Cards

<Card>
  <Card.Header>
    <Card.Title>Basic Card</Card.Title>
    <Card.Description>Simple card with content</Card.Description>
  </Card.Header>
  <Card.Footer>
    <Button size="sm">Action</Button>
  </Card.Footer>
</Card>

<Card>
  <Card.Header className="flex-row items-center justify-between">
    <div>
      <Card.Title>AAPL</Card.Title>
      <Card.Description>Apple Inc.</Card.Description>
    </div>
    <Chip color="success" size="sm">+2.5%</Chip>
  </Card.Header>
  <Card.Content className="flex flex-col gap-2 text-sm">
    <div className="flex justify-between">
      <span className="text-muted">Price</span>
      <span className="font-medium tabular-nums">$175.25</span>
    </div>
  </Card.Content>
</Card>

<Card>
  <Card.Header>
    <Card.Description>ROE</Card.Description>
    <Card.Title className="text-3xl tabular-nums">25.3%</Card.Title>
  </Card.Header>
  <Card.Footer className="flex items-center gap-2">
    <Chip color="success" size="sm">↑ 2.1%</Chip>
    <span className="text-muted text-xs">vs sector</span>
  </Card.Footer>
</Card>

<Card className="p-6">
  <Card.Header>
    <Card.Title>Valuation Ratios</Card.Title>
  </Card.Header>
  <Card.Content className="flex flex-col gap-6">
    {/* Hero stat — typography defines hierarchy */}
    <div className="flex flex-col gap-1">
      <p className="text-muted text-xs">P/E Ratio</p>
      <p className="font-semibold text-4xl tabular-nums tracking-tight">23.30x</p>
    </div>
    <Separator />
    {/* Detail section below */}
    <div>...</div>
  </Card.Content>
</Card>