<Card title="Next Meeting" subtitle="Upcoming on your calendar">
  <div style="display: flex; align-items: center; gap: 16px; margin-bottom: 16px;">
    <div style="background: #e8f4fd; border-radius: 12px; padding: 16px; min-width: 70px; text-align: center;">
      <div style="font-size: 28px; font-weight: 700; color: #1a73e8;">2</div>
      <div style="font-size: 12px; color: #5f6368; text-transform: uppercase;">Apr</div>
      <div style="font-size: 12px; color: #5f6368; text-transform: uppercase;">Wed</div>
    </div>
    <div>
      <h3 style="margin: 0 0 4px 0; font-size: 18px;">Product Strategy Sync</h3>
      <p style="margin: 0; color: #5f6368; font-size: 14px;">2:00 PM – 3:00 PM • Google Meet</p>
    </div>
  </div>
</Card>

<Card title="Attendees" subtitle="6 people">
  <div style="display: flex; flex-wrap: wrap; gap: 8px;">
    <Avatar name="Sarah Chen" subtitle="Organizer" />
    <Avatar name="Marcus Johnson" subtitle="Product Lead" />
    <Avatar name="Priya Patel" subtitle="Engineering" />
    <Avatar name="Alex Rivera" subtitle="Design" />
    <Avatar name="Jordan Kim" subtitle="Marketing" />
    <Avatar name="You" subtitle="Attending" />
  </div>
</Card>

<Card title="Join the Call">
  <div style="display: flex; flex-direction: column; gap: 12px;">
    <Button variant="primary" icon="video" size="large">Join Google Meet</Button>
    <Button variant="secondary" icon="phone" size="large">Join by phone</Button>
    <p style="margin: 8px 0 0 0; font-size: 13px; color: #5f6368;">Meeting ID: abc-defg-hij • Passcode: 123456</p>
  </div>
</Card>