Card

Card Component

stable
level-a3campaign-1
Playground

Default card content.

Props
PropTypeDefaultValue
variantselectdefault | elevated | outlined—
paddingselectnone | sm | md | lg—
hoverableboolean—
Default

Default card content.

Elevated

Elevated card with shadow.

WithHeaderAndFooter

Task Title

Task description.

Outlined

Outlined card with border.

Hoverable

Hover over me to see the effect.

WithImage
🖼

Card with Image

Placeholder image block above.

WithFooter

Article title

Short preview of the article content goes here.

5 min read
PaddingSizes

Small padding

Medium padding

Large padding

PROPTYPEDEFAULTDESCRIPTION
hoverableboolean—Hover effect
paddingselect—Padding size
variantselect—Card visual variant
Using Cardtsx
import { Card } from '@/components/Card'

<Card
  variant="..."
  padding="..."
  hoverable="..."
/>
Level:A3
Campaign:1
Tokens Used
No design tokens detected