Card

A surface with header, content, and footer.

Composition

Header, content, footer. The header stacks a title over a description. Content and footer drop their top padding so the parts sit flush.

Stability pool

Deposit CCPU, earn liquidation gains.

12.4%

<Card>
  <CardHeader>
    <CardTitle>Stability pool</CardTitle>
    <CardDescription>Deposit CCPU, earn liquidation gains.</CardDescription>
  </CardHeader>
  <CardContent>
    <Text variant="value">12.4%</Text>
  </CardContent>
  <CardFooter>
    <Button size="md">Deposit</Button>
  </CardFooter>
</Card>

Surface only

Card alone is the tinted surface with rounded corners. Use it when a section needs a background and nothing else.

One padded region. The card is the surface, the parts are optional.

<Card>
  <CardHeader>
    <Text>One padded region. The card is the surface, the parts are optional.</Text>
  </CardHeader>
</Card>

Props

Every part is a div with a forwarded ref and one style. They share the same props.

childrenReactNode

The parts, in order: CardHeader (CardTitle, CardDescription), CardContent, CardFooter. Each is optional.

classNamestring

Appended after the part's own classes. A bridge for tailwind product code.

styleCSSProperties

Merged over the part's own style.

refRef<HTMLDivElement>

Every part forwards its ref to the div.