Card

Basic Usage

Card Title

This is the content of the card.

mdx

<Card title="Card Title">
  This is the content of the card.
</Card>

Card Grid

Use <CardGrid> (or <Columns>) to arrange cards in a grid layout.

First Card

Content for the first card.

Second Card

Content for the second card.

Variants

Cards come in four visual variants.

Default

The default card style with subtle background.

Outline

Transparent background with visible border.

Ghost

Minimal style with no visible border.

Elevated

Raised card with shadow effect.

Sizes

Cards support three sizes: sm, md (default), and lg.

Small Card

Compact size for dense layouts.

Medium Card

Default size for most use cases.

Large Card

Larger size with more padding.

Props

title

string

required

The title of the card.

children

ReactNode

The content of the card.

variant

'default' | 'outline' | 'ghost' | 'elevated'

default: default

Visual style variant.

size

'sm' | 'md' | 'lg'

default: md

Size of the card affecting padding, font sizes, and icon dimensions.

href

string

Optional URL to make the card clickable.

icon

ReactNode | string

Icon to display beside the title. Can be a Lucide icon name or React node.

horizontal

boolean

default: false

Whether to use a horizontal layout with image on the left.

img

string

URL of an image to display at the top (or left in horizontal mode).

cta

string

Call to action text shown in the footer (requires href).

arrow

boolean

Whether to show the arrow icon (enabled automatically for external links).

boolean

default: false

Shows a skeleton loading state when true.

color

string

Custom color for the icon (hex value).

className

string

Additional CSS classes to apply.

CardGrid

children

ReactNode

The cards to display in the grid.

cols

1 | 2 | 3 | 4

default: 2

Number of columns.

Examples

With Link and Icon

Documentation

Read the full documentation.

Horizontal Layout

Horizontal Card

This card uses a horizontal layout with the image on the left.

With Image

Card with Image

This card displays an image at the top.

With CTA

Card with CTA

This card has a call to action link at the bottom.

Learn More

Elevated Variant with Link

Featured Article

Elevated cards have a subtle lift effect on hover.

Loading State

Data Attributes

Cards expose data attributes for custom styling:

data-card-variant - The variant type
data-card-size - The size
data-card-interactive - Whether the card is clickable
data-card-horizontal - Whether using horizontal layout
data-card-loading - Whether in loading state

Basic Usage

Card Title

This is the content of the card.

mdx

<Card title="Card Title">
  This is the content of the card.
</Card>

Card Grid

Use <CardGrid> (or <Columns>) to arrange cards in a grid layout.

First Card

Content for the first card.

Second Card

Content for the second card.

Variants

Cards come in four visual variants.

Default

The default card style with subtle background.

Outline

Transparent background with visible border.

Ghost

Minimal style with no visible border.

Elevated

Raised card with shadow effect.

Sizes

Cards support three sizes: sm, md (default), and lg.

Small Card

Compact size for dense layouts.

Medium Card

Default size for most use cases.

Large Card

Larger size with more padding.

Props

Card

title

string

required

The title of the card.

children

ReactNode

The content of the card.

variant

'default' | 'outline' | 'ghost' | 'elevated'

default: default

Visual style variant.

size

'sm' | 'md' | 'lg'

default: md

Size of the card affecting padding, font sizes, and icon dimensions.

href

string

Optional URL to make the card clickable.

icon

ReactNode | string

Icon to display beside the title. Can be a Lucide icon name or React node.

horizontal

boolean

default: false

Whether to use a horizontal layout with image on the left.

img

string

URL of an image to display at the top (or left in horizontal mode).

cta

string

Call to action text shown in the footer (requires href).

arrow

boolean

Whether to show the arrow icon (enabled automatically for external links).

boolean

default: false

Shows a skeleton loading state when true.

color

string

Custom color for the icon (hex value).

className

string

Additional CSS classes to apply.

CardGrid

children

ReactNode

The cards to display in the grid.

cols

1 | 2 | 3 | 4

default: 2

Number of columns.

Examples

With Link and Icon

Documentation

Read the full documentation.

Horizontal Layout

Horizontal Card

This card uses a horizontal layout with the image on the left.

With Image

Card with Image

This card displays an image at the top.

With CTA

Card with CTA

This card has a call to action link at the bottom.

Learn More

Elevated Variant with Link

Featured Article

Elevated cards have a subtle lift effect on hover.

Loading State

Data Attributes

Cards expose data attributes for custom styling:

data-card-variant - The variant type
data-card-size - The size
data-card-interactive - Whether the card is clickable
data-card-horizontal - Whether using horizontal layout
data-card-loading - Whether in loading state