Card

Card is a flexible surface that combines a variant (filled, light, outline, gradient) with a color prop to express semantic meaning — the same (variant × color) model used by Button.

import { Card } from '@42-central/ui-react/card';

<Card variant="light" color="green" padding="none">
  <Card.Header>
    <Card.Title>Title</Card.Title>
    <Card.Description>Supporting text.</Card.Description>
  </Card.Header>
  <Card.Content>Body content.</Card.Content>
  <Card.Footer>
    <Button size="sm">Action</Button>
  </Card.Footer>
</Card>

Playground

<Component variant="default" padding="md">
  A bordered surface for grouped content.
</Component>

Full prop browser

Variants

variant controls the visual treatment. Combine with color to express intent.

<Card variant="default">Default</Card>
<Card variant="filled" color="brand">Filled</Card>
<Card variant="light" color="brand">Light</Card>
<Card variant="outline" color="brand">Outline</Card>
<Card variant="gradient" color="brand">Gradient border</Card>

default is independent of color — navy text in light theme, white text in dark theme, matching the 42 UI Kit Figma's card chrome exactly (confirmed against Figma's own light-mode test frame). The surface itself is a 4% white overlay (Figma's own bg-primary token, Figma's dark-theme elevation tint) rather than an opaque fill, used in both themes here — it lightens whatever's behind it rather than imposing a flat hue. outline shares the same tint with a solid-color border on top.

Gradient border

The gradient variant uses CSS ::before / ::after pseudo-elements. ::before shows only the 1 px border strip via mask-composite: exclude; ::after paints a 15 % tinted fill behind the content.

<Card variant="gradient" color="brand">Brand</Card>
<Card variant="gradient" color="purple">Purple</Card>
<Card variant="gradient" color="teal">Teal</Card>

Clickable card

Use asChild with a link to make the whole card a single click target. No wrapper needed.

<Card asChild variant="light" color="brand">
  <a href="/dashboard">Open dashboard →</a>
</Card>

Padding

<Card padding="sm">Compact</Card>
<Card padding="md">Default</Card>
<Card padding="lg">Roomy</Card>
<Card padding="none">
  <Card.Header><Card.Title>Header</Card.Title></Card.Header>
  <Card.Content>Body content.</Card.Content>
  <Card.Footer><Button size="sm">OK</Button></Card.Footer>
</Card>

Dividers

Card.Header, Card.Description, and Card.Footer each take a withBorder boolean (default false) that draws a separator on the edge facing the content — bottom for Header, top for Description / Footer. Use it when a section needs visual separation from its neighbor, e.g. a footer with actions set apart from the body above it.

<Card padding="none">
  <Card.Header withBorder>
    <Card.Title>Header</Card.Title>
  </Card.Header>
  <Card.Content>Body content.</Card.Content>
  <Card.Footer withBorder>
    <Button size="sm">OK</Button>
  </Card.Footer>
</Card>

Card.Content has no withBorder — it sits between the two, so Header / Footer already own that edge.

Subcomponents

Every part renders testId as data-testid on its own DOM node — see Testing.

API

Changelog