# Upcoming Meeting

<Card title="Next on your calendar">
  <div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;">
    <div>
      <h2 style="margin: 0 0 4px;">Product Strategy Review</h2>
      <p style="margin: 0; color: var(--muted); font-size: 14px;">
        <span style="display: inline-flex; align-items: center; gap: 4px;">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
          Today, 2:30 PM – 3:15 PM
        </span>
        <span style="margin-left: 16px; display: inline-flex; align-items: center; gap: 4px;">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-4"/><path d="M3 10h18"/><path d="M15 3v6"/><path d="M21 3v6"/></svg>
          Conference Room B / Zoom
        </span>
      </p>
    </div>
    <Badge tone="info">In 12 min</Badge>
  </div>
</Card>

<Card title="Attendees" subtitle="8 people">
  <div style="display: flex; flex-wrap: wrap; gap: 8px; align-items: center;">
    <Avatar name="Sarah Chen" src="find:professional woman headshot" subtitle="Organizer" />
    <Avatar name="Marcus Johnson" src="find:professional man headshot" subtitle="Product Lead" />
    <Avatar name="Priya Patel" src="find:professional woman headshot" subtitle="Engineering" />
    <Avatar name="James Wilson" src="find:professional man headshot" subtitle="Design" />
    <Avatar name="Lisa Park" src="find:professional woman headshot" subtitle="Marketing" />
    <Avatar name="David Kim" src="find:professional man headshot" subtitle="Sales" />
    <Avatar name="Emma Davis" src="find:professional woman headshot" subtitle="Support" />
    <Avatar name="You" src="find:professional person headshot" subtitle="Attending" />
  </div>
</Card>

<Card title="Join the call">
  <div style="display: flex; flex-direction: column; gap: 12px;">
    <Button variant="primary" size="large" icon="video">
      Join Zoom Meeting
    </Button>
    <Button variant="secondary" size="large" icon="phone">
      Dial in: +1 (555) 123-4567,, 892 4321 5678#
    </Button>
    <p style="margin: 0; font-size: 13px; color: var(--muted);">
      Meeting ID: 892 4321 5678 • Passcode: 748291
    </p>
  </div>
</Card>