<Card title="Next Meeting" subtitle="Starting in 15 minutes">
  <div style="margin-bottom: 16px;">
    <h2 style="margin: 0 0 8px 0; font-size: 1.5rem;">Q3 Product Planning</h2>
    <p style="margin: 0; color: var(--muted); font-size: 1.1rem;">
      📅 Today · 2:00 PM – 3:00 PM EDT · 60 min
    </p>
    <p style="margin: 8px 0 0 0; color: var(--muted);">Conference Room B / Google Meet</p>
  </div>

  <hr style="border: none; border-top: 1px solid var(--border); margin: 16px 0;" />

  <h3 style="margin: 0 0 12px 0; font-size: 1rem;">Attendees</h3>
  <div style="display: flex; flex-wrap: wrap; gap: 8px;">
    <Avatar name="Sarah Chen" src="find" subtitle="Product Lead" />
    <Avatar name="Marcus Johnson" src="find" subtitle="Engineering" />
    <Avatar name="Priya Patel" src="find" subtitle="Design" />
    <Avatar name="Alex Rivera" src="find" subtitle="Marketing" />
    <Avatar name="Jordan Kim" src="find" subtitle="Data" />
    <Avatar name="You" src="find" subtitle="Organizer" />
  </div>

  <hr style="border: none; border-top: 1px solid var(--border); margin: 16px 0;" />

  <div style="display: flex; gap: 12px; flex-wrap: wrap;">
    <Button variant="primary" icon="video">Join video call</Button>
    <Button variant="secondary" icon="phone">Dial in</Button>
    <Button variant="tertiary" icon="message">Chat</Button>
  </div>
</Card>