Card
Cards group related information into contained surfaces. They support images, highlights, disabled states, and hover-lift animations.
Default
Content Card
A standard card with a title and description. Hover to see the lift effect.
With Image
Cards can include a header image area.
<Card title="Content Card" description="A standard card." />
<Card title="With Image" imageSrc="/hero.png" />
Highlighted
Featured Content
Highlighted cards use the primary border and glow shadow to draw attention.
<Card highlighted title="Featured" description="..." />
Disabled
Archived Content
This card is disabled. It cannot be interacted with.
<Card disabled title="Archived" description="..." />
Hover-Lift Demo
Hover each card to see the lift animation. The highlighted card also shows a glow shadow.
Standard
Hover me to lift up.
Props
| Prop | Type | Default | Description | Required |
|---|
| title | string | - | Card heading text | No |
| description | string | - | Card body text | No |
| highlighted | boolean | false | Apply primary border and glow shadow | No |
| disabled | boolean | false | Dim the card and disable interactions | No |
| imageSrc | string | - | URL for the header image | No |
| children | ReactNode | - | Custom content inside the card body | No |
Usage Guidelines
- Use cards to group related content into scannable, interactive surfaces.
- Only one card per view should be highlighted to avoid diluting emphasis.
- Use the disabled state for archived or unavailable items.
- Keep card content concise -- cards are entry points, not full pages.