Card

A data display component that groups related content, imagery, and actions onto a single contained surface.

espresso

Header

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.

Sizes

Use the card-{size} class to control the component size.

Size values can include:smmdlg.

For more information on all available sizing utilities, visit Tailwind

Header

Alice was beginning to get very tired.

Header

Alice was beginning to get very tired.

Header

Alice was beginning to get very tired.

Variants

Use the variant and palette classes to control the appereance of the component.

Variant values can include solidoutlinesurfacesubtleplain.
Color palettes can include primaryneutral. For extra palettes such as warning error and more, refer to the Colors section.

Header

Alice was beginning to get very tired.

Header

Alice was beginning to get very tired.

Header

Alice was beginning to get very tired.

Header

Alice was beginning to get very tired.

Header

Alice was beginning to get very tired.

Header

Alice was beginning to get very tired.

Header

Alice was beginning to get very tired.

Header

Alice was beginning to get very tired.

Header

Alice was beginning to get very tired.

Header

Alice was beginning to get very tired.

Customizing

globals.css


:root {
  --ex-card-font-size-sm: var(--text-xs);
  --ex-card-font-size-md: var(--text-sm);
  --ex-card-font-size-lg: var(--text-base);
 
  --ex-card-radius-sm: var(--radius-sm);
  --ex-card-radius-md: var(--radius-sm);
  --ex-card-radius-lg: var(--radius-sm);
 
  --ex-card-section-gap-x-sm: calc(var(--spacing) * 2);
  --ex-card-section-gap-x-md: calc(var(--spacing) * 2.5);
  --ex-card-section-gap-x-lg: calc(var(--spacing) * 3);
 
  --ex-card-section-gap-y-sm: calc(var(--spacing) * 2);
  --ex-card-section-gap-y-md: calc(var(--spacing) * 2);
  --ex-card-section-gap-y-lg: calc(var(--spacing) * 2);
 
  --ex-card-section-px-sm: calc(var(--spacing) * 4);
  --ex-card-section-px-md: calc(var(--spacing) * 5);
  --ex-card-section-px-lg: calc(var(--spacing) * 6);
 
  --ex-card-section-py-sm: calc(var(--spacing) * 4);
  --ex-card-section-py-md: calc(var(--spacing) * 5);
  --ex-card-section-py-lg: calc(var(--spacing) * 6);
 
  --ex-card-title-font-size-sm: var(--text-sm);
  --ex-card-title-font-size-md: var(--text-base);
  --ex-card-title-font-size-lg: var(--text-lg);
 
  --ex-card-title-font-weight: var(--font-weight-semibold);
 
  --ex-card-description-font-size-sm: var(--text-xs);
  --ex-card-description-font-size-md: var(--text-sm);
  --ex-card-description-font-size-lg: var(--text-base);
 
  --ex-card-description-font-weight: var(--font-weight-normal);
  --ex-card-description-opacity: var(--ex-options-opacity-muted);
}

API

Card

Element	Selector
`Card`	`.ex-card`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Card Content

Element	Selector
`Card.Content`	`.ex-card-content`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Card Section

Element	Selector
`Card.Section`	`.ex-card-section`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Card Title

Element	Selector
`Card.Title`	`.ex-card-title`

Prop	Type	Default
`as`	`ElementType`	`h4`
`asChild`	`boolean`	`false`

Card Description

Element	Selector
`Card.Description`	`.ex-card-description`

Prop	Type	Default
`as`	`ElementType`	`p`
`asChild`	`boolean`	`false`

Last updated on July 20, 2026

Bg Image Color Swatch