Card

Card is a neutral container that reuses Button's default variant recipe — the same gray surface, border, and dark-mode shift. It deliberately does not take a color prop: surfaces stay quiet so the content inside leads.

import { Card, CardHeader, CardBody, CardFooter } from '@42/ui-react/card';

<Card padding="none">
  <CardHeader>Title</CardHeader>
  <CardBody>Body content.</CardBody>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

Playground

<Component padding="md" interactive={false}>  A bordered surface for grouped content.</Component>

Full prop browser

Padding

The padding variant controls uniform inner spacing for the simple case. Set padding="none" when composing with CardHeader / CardBody / CardFooter so they own the spacing.

<Card padding="md">Default card.</Card>

<Card padding="none">
  <CardHeader>Header</CardHeader>
  <CardBody>Body content.</CardBody>
  <CardFooter>
    <Button size="sm">OK</Button>
  </CardFooter>
</Card>

Interactive

Set interactive to lift the surface on hover. Use with asChild to wrap a link or button so the whole card is a single click target.

<Card asChild interactive padding="md">
  <a href="/dashboard">Open dashboard →</a>
</Card>

Subcomponents

Each part is its own exported function — not a Card.Header static property — so consumers can tree-shake unused pieces.

API