Card A composable card with header, content, and footer slots. Reads radius, shadow, and surface color from your token file.
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, } from "@sigil-ui/components" ; < Card > < CardHeader > < CardTitle >Card title</ CardTitle > < CardDescription >Supporting description.</ CardDescription > </ CardHeader > < CardContent > < p >Card body content goes here.</ p > </ CardContent > < CardFooter > < Button variant = "primary" >Action</ Button > </ CardFooter > </ Card > Add hoverable to enable a lift effect on hover.
< Card hoverable > < CardContent >Hover me for an elevation shift.</ CardContent > </ Card > Cards are built from composable sub-components. Use only the slots you need:
{ /* Content only */ } < Card > < CardContent >Content only — no header or footer.</ CardContent > </ Card > { /* Header + content */ } < Card > < CardHeader > < CardTitle >Title only</ CardTitle > </ CardHeader > < CardContent >Body text here.</ CardContent > </ Card > CSS Variable Used for --s-surfaceCard background --s-surface-elevatedHover state background --s-textCard text color --s-text-mutedDescription text color --s-borderCard border color --s-border-styleBorder style (solid, dashed, etc.) --s-radius-cardBorder radius --s-shadow-smDefault elevation --s-shadow-mdHover state elevation --s-duration-normalHover transition duration
Prop Type Default Description hoverablebooleanfalseEnable hover lift effect classNamestring— Additional CSS classes childrenReactNode— Card content
Prop Type Default Description classNamestring— Additional CSS classes childrenReactNode— Header content (use with CardTitle, CardDescription)
Prop Type Default Description classNamestring— Additional CSS classes childrenReactNode— Title text
Prop Type Default Description classNamestring— Additional CSS classes childrenReactNode— Description text
Prop Type Default Description classNamestring— Additional CSS classes childrenReactNode— Body content
Prop Type Default Description classNamestring— Additional CSS classes childrenReactNode— Footer content
Renders as a <div> by default with no implicit role
For interactive cards, wrap content in a semantic element like <a> or <button>
Focus ring uses --s-ring for keyboard navigation