Data display

Card

A grouped surface for related content.

Server-renderable4 exports

Three visual treatments and an optional interactive state. `interactive` styles the card only — put a real link or button inside for the interaction, because a clickable div is unreachable by keyboard.

Import

import {
  Card,
  CardHeader,
  CardBody,
  CardFooter,
} from "@abbainitiative/ui";

Also available from the subpath entry @abbainitiative/ui/card.

This component has no state and no event handlers, so it renders inside a Server Component without a client boundary of your own.

Examples

Variants

Outlined

Elevated

Filled

<Grid minItemWidth="13rem" gap={4}>
  <Card variant="outlined"><CardBody>Outlined</CardBody></Card>
  <Card variant="elevated"><CardBody>Elevated</CardBody></Card>
  <Card variant="filled"><CardBody>Filled</CardBody></Card>
</Grid>

Header, body and footer

Monthly report

Generated 4 August

Contributions rose 12% against the previous period.

<Card variant="elevated">
  <CardHeader>
    <Heading level={3} size="md">Monthly report</Heading>
    <Text size="sm" tone="muted">Generated 4 August</Text>
  </CardHeader>
  <CardBody>
    <Text>Contributions rose 12% against the previous period.</Text>
  </CardBody>
  <CardFooter divided>
    <Button size="sm">Download</Button>
    <Button size="sm" variant="ghost">Share</Button>
  </CardFooter>
</Card>

Props

Card props. All native attributes of the underlying element are also accepted and forwarded.
Prop	Type	Default	Description
variant	`"outlined" \| "elevated" \| "filled"`	`"outlined"`	Visual treatment.
interactive	`boolean`	`false`	Adds hover and focus affordances for cards that lead somewhere.
as	`"div" \| "article" \| "section" \| "li"`	`"div"`	Element to render.

Accessibility

The focus ring is driven by `:focus-within`, so it appears when the control inside the card is focused.
Never attach a click handler to the card itself — keyboard users cannot reach it.
Use `as="article"` or `as="li"` when the card is a real content item.