Skip to content
Spira
Surfaces

Card

Layered, rounded containers with header/content/footer slots.

Basic card

Header, content and footer slots, all token-driven.

Rounded by default

Generous corners, layered surfaces, and a subtle shadow.

Cards compose header, content and footer slots — driven entirely by design tokens.
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui";

<Card>
  <CardHeader>
    <CardTitle>Rounded by default</CardTitle>
    <CardDescription>
      Generous corners, layered surfaces, and a subtle shadow.
    </CardDescription>
  </CardHeader>
  <CardContent className="text-muted">
    Cards compose header, content and footer slots — driven entirely by design tokens.
  </CardContent>
</Card>