<Card title="Up Next" subtitle="Here's what's coming up on your calendar">
  <Columns>
    <div>
      <Stat label="Next meeting" value="Product Sync" icon="calendar" />
      <Stat label="Starts at" value="2:30 PM" icon="clock" />
      <Stat label="Duration" value="45 min" icon="hourglass" />
    </div>
    <div>
      <Avatar name="Sarah Chen" subtitle="Product Lead" />
      <Avatar name="Marcus Johnson" subtitle="Engineering" />
      <Avatar name="Priya Patel" subtitle="Design" />
      <Avatar name="Tomás Rivera" subtitle="Marketing" />
    </div>
  </Columns>
</Card>

<Card title="Attendees">
  <Columns>
    <div>
      <Avatar name="Sarah Chen" subtitle="Product Lead" />
      <Avatar name="Marcus Johnson" subtitle="Engineering" />
      <Avatar name="Priya Patel" subtitle="Design" />
    </div>
    <div>
      <Avatar name="Tomás Rivera" subtitle="Marketing" />
      <Avatar name="Ana Silva" subtitle="Customer Success" />
      <Badge tone="info">2 more</Badge>
    </div>
  </Columns>
</Card>

<Card title="Join the call">
  <Callout tone="info" title="Meeting link">
    This meeting uses Google Meet. The link is active 5 minutes before the start time.
  </Callout>
  <Button href="https://meet.google.com/abc-defg-hij" icon="video-camera">Join with Google Meet</Button>
  <Button variant="secondary" icon="phone">Join by phone</Button>
  <Button variant="tertiary" icon="copy">Copy meeting link</Button>
</Card>