Card

Column with a surface's worth of sensible defaults — not a new visual vocabulary, just spacing/border/radius/background values a caller would otherwise repeat on every card. Every default is a plain JS default parameter, not a class the caller's own prop has to out-cascade.

<Card>
  ...
</Card>

Examples

Since every default is just a Column prop's default value, override any of them the same way you would on a plain Column — no separate "card variant" API to learn:

<Card gap="8">
  <Heading as="h3" displaySize="xs">Plan</Heading>
  <Text color="medium">Everything you need to get started.</Text>
</Card>

href makes the whole card a real link, same as Button — the prev/next cards at the bottom of this page are exactly this. Pass your router's own link component via as to get client-side navigation instead of a full page load:

<Card as={Link} href="/get-started" gap="4">
  <Text fontSize="xs" color="medium">Next</Text>
  <Text weight="medium">Get started</Text>
</Card>

Props