Preview

Import

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@sigil-ui/components";

Usage

<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>

Hoverable

Add hoverable to enable a lift effect on hover.

<Card hoverable>
  <CardContent>Hover me for an elevation shift.</CardContent>
</Card>

Composable slots

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>

Token integration

CSS Variable	Used for
`--s-surface`	Card background
`--s-surface-elevated`	Hover state background
`--s-text`	Card text color
`--s-text-muted`	Description text color
`--s-border`	Card border color
`--s-border-style`	Border style (solid, dashed, etc.)
`--s-radius-card`	Border radius
`--s-shadow-sm`	Default elevation
`--s-shadow-md`	Hover state elevation
`--s-duration-normal`	Hover transition duration

Props

Card

Prop	Type	Default	Description
`hoverable`	`boolean`	`false`	Enable hover lift effect
`className`	`string`	—	Additional CSS classes
`children`	`ReactNode`	—	Card content

CardHeader

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes
`children`	`ReactNode`	—	Header content (use with CardTitle, CardDescription)

CardTitle

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes
`children`	`ReactNode`	—	Title text

CardDescription

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes
`children`	`ReactNode`	—	Description text

CardContent

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes
`children`	`ReactNode`	—	Body content

CardFooter

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes
`children`	`ReactNode`	—	Footer content

Accessibility

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

On this page