Components

Card

Surface container. Compose from CardHeader / CardContent / CardFooter. Comes in two sizes; sm tightens the internal spacing.

When to useto group a bounded set of related information — a mission, an operator, a stat block.

Import

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardAction,
  CardContent,
  CardFooter,
} from "@ravnhq/efni/card"

Default

Mission MB-4472

In progress · assigned to two operators

Waypoint reached at 09:12. Awaiting confirmation before proceeding to phase two.

<Card>
  <CardHeader>
    <CardTitle>Mission MB-4472</CardTitle>
    <CardDescription>In progress · two operators</CardDescription>
    <CardAction>
      <Button variant="ghost" size="icon-sm"><Icon icon={MoreHorizontal} /></Button>
    </CardAction>
  </CardHeader>
  <CardContent>…</CardContent>
  <CardFooter>
    <Button size="sm" variant="outline">Details</Button>
    <Button size="sm" className="ml-auto">Confirm</Button>
  </CardFooter>
</Card>

Small

Compact card

Tighter spacing for dense list rows.

Body content.

<Card size="sm">…</Card>

Do & don't

Mission MB-4472

In progress

Waypoint reached at 09:12.

Use the Header/Content composition so the title and metadata line up across the grid.

Mission MB-4472

In progress

Waypoint reached at 09:12.

Don't hand-roll the internals — spacing tokens and slot slots drift once you skip the subcomponents.

Guidelines

Keep the title short (≤ 6 words). Push detail to Description.
Reserve CardFooter for actions or metadata that belongs beside them.
Use size="sm" when nesting cards inside a table or list.

Don't

Don't nest more than one Card deep — flatten the layout instead.
Don't fill the card with more than one hero action; secondary actions belong in CardAction.
Don't use Card as a decorative wrapper — a bordered div is fine when there's no header or footer.

Props

Prop	Type	Default	Description
`size`	`"default" \| "sm"`	`"default"`	Internal spacing scale.
`…props`	`React.ComponentProps<"div">`	—	Everything Card passes to the element it renders.