Card

Polymorphic

Bordered surface for grouped content. Compose variant and color to express semantic meaning.

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

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

<Card variant="light" color="green" padding="none">
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Supporting text.</CardDescription>
  </CardHeader>
  <CardContent>Body content.</CardContent>
  <CardFooter>
    <Button size="sm">Action</Button>
  </CardFooter>
</Card>

Playground

Component

Dir

Presets

Code

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

Full prop browser

A bordered surface for grouped content.

object

Variants

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

Default

Filled

Light

Outline

Subtle

Gradient border

Code

<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="subtle" color="brand">Subtle</Card><Card variant="gradient" color="brand">Gradient border</Card>

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.

Brand

Purple

Teal

Code

<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.

Open dashboard →

Code

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

Padding

Compact

Default

Roomy

Header

Body content.

Code

<Card padding="sm">Compact</Card><Card padding="md">Default</Card><Card padding="lg">Roomy</Card><Card padding="none"><CardHeader><CardTitle>Header</CardTitle></CardHeader><CardContent>Body content.</CardContent><CardFooter><Button size="sm">OK</Button></CardFooter></Card>

Subcomponents

Prop

Type

API

Prop

Type

Circular Progress

Ring progress indicator. Filled and gradient arcs across eleven colors, with a built-in indeterminate spinner — the circular counterpart of Progress.

A dropdown of actions on Ark UI's Menu — composable parts plus a typesafe data-driven form, with sections, submenus, checkbox / radio items, and a context-menu trigger.

Card

Header

On this page