Avala Design
← Components/primitives

Card

Container with header / title / description / content / footer slots. Preserves the legacy @avala/ui Card API surface (Card / CardHeader / CardTitle / CardDescription / CardContent / CardFooter) so consumer apps migrate without churn.

primitivesstablea11y: untested2/3 coverageEdit on GitHub ↗

Live playground

Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.

LiveOpen all variants in Storybook ↗
Edit JSX — preview updates livereact-live
import { Card, CardContent, CardDescription, CardFooter } from "@avala/design";

<Card>
  <CardContent />
  <CardDescription />
  <CardFooter />
</Card>

All variants

The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.

primitives-card--defaultOpen in Storybook →

When to use

  • Generic content containers in marketing and informational surfaces (case studies, feature blocks, settings groups).
  • Already-@avala/ui-Card consumers migrating off — same API surface.

When not to use

  • Clickable / selectable / expandable / radio-grouped tiles → use `Tile`. Tile is the Carbon-spec primitive with proper variants.
  • Action-bearing containers in product surfaces (Mission Control kanban, dataset rows) → reach for `Tile` ClickableTile.