<Card title="Today’s Focus" subtitle="One task, one deadline — everything else can wait.">
  <Columns>
    <div>
      <Badge tone="danger">Urgent</Badge>
      <h3 style="margin-bottom: 0.25rem;">Finish Q3 investor update</h3>
      <p style="margin: 0.25rem 0; color: var(--color-text-muted);">
        <i class="ph ph-calendar" aria-hidden="true"></i> Deadline: Today, 5:00 PM
      </p>
      <p style="margin: 0.25rem 0; color: var(--color-text-muted);">
        <i class="ph ph-clock" aria-hidden="true"></i> 2h 15m left
      </p>
    </div>
    <div style="text-align: right;">
      <Stat label="Status" value="In Progress" tone="info" icon="chart-line" />
    </div>
  </Columns>
</Card>

<Card title="Progress">
  <Progress value="65" max="100" label="65% complete" tone="info" />
  <p style="margin: 0.5rem 0 0; color: var(--color-text-muted);">
    Next step: Finalize the revenue slide.
  </p>
</Card>

<Card title="Mark as done">
  <Callout tone="success" title="Almost there">
    Once you’ve completed this task, mark it done to clear your focus view.
  </Callout>
  <Form name="complete-task">
    <Button variant="primary" size="large">Mark as done</Button>
  </Form>
</Card>