Card

Usage

import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@tulipfarm/sprout/card";

<Card>
  <CardHeader>
    <CardTitle render={<h3 />}>Meadow project</CardTitle>
    <CardDescription>Spring planting plan · 12 beds</CardDescription>
    <CardAction>
      <Badge variant="success">Active</Badge>
    </CardAction>
  </CardHeader>
  <CardContent>Three tasks are ready to review.</CardContent>
  <CardFooter>
    <Button variant="outline">Review tasks</Button>
  </CardFooter>
</Card>

size is "default" (16px padding and gaps, 16px title) or "sm" (12px, 14px title). Both are exposed as the--sprout-card-spacing variable for content that needs to line up with the card edges. surface is "default" or"raised", which tints the panel and adds a soft shadow in light mode for settings panels that sit on a surface of the same color.

The root and every part render a div and take the Base UIrender prop. CardTitle is not a heading by default; pass render={<h3 />} to place it in the document outline. The root exposes data-size and data-surface, and each part has a matching data-slot. cardVariants()returns the root classes for other elements.

Layout

CardHeader is a grid. A CardAction takes a second column and spans the title and description rows. Add aborder-b class to the header to divide it from the content. A CardFooter sits flush with the bottom edge with a tinted background and top border, even when it is wrapped in an element such as<div className="mt-auto"> that pushes it down in an equal-height grid. An image placed first or last runs edge to edge.

<article aria-label={task.title} className="grid min-w-0">
  <Card size="sm">
    <CardHeader>
      <Button variant="ghost" size="card-title" nativeButton={false}
        render={<a href={task.href} />}>
        <CheckSquare size={14} aria-hidden="true" />
        <span className="line-clamp-2">{task.title}</span>
      </Button>
    </CardHeader>
    <div className="mt-auto">
      <CardFooter>…</CardFooter>
    </div>
  </Card>
</article>

<Card surface="raised">
  <CardContent>
    <div className="space-y-4">…list, alerts, or a StatePanel…</div>
  </CardContent>
</Card>

Accessibility

A card is a plain container with no role and no focus stop. Name the region around it with section or article andaria-label when it stands alone, and render the title as a heading that fits the page outline. Links and buttons inside keep their own focus rings, and long text wraps instead of overflowing. Theme changes fade in 120ms and stop when reduced motion is requested.

Theme tokens

Cards use --sprout-surface, --sprout-line,--sprout-text, --sprout-muted, and--sprout-radius-panel. The footer tints with--sprout-hover. Raised cards use--sprout-card-raised and--sprout-card-raised-shadow, defined for light and dark modes and overridable like any other Sprõut token.