Card

A container with padding, border, and shadow for grouping content.

Enter your email below to login to your account.

Password Forgot your password?

Examples

Size

Use [--card-spacing:--spacing(3)] for a smaller, more compact card.

Small Card

This card uses the small size variant.

Override --card-spacing for a more compact appearance.

Spacing

Control padding and gap via the --card-spacing CSS variable on the card root. Default is 6 (24px).

Tight

--spacing(3)

Default

--spacing(6)

Loose

--spacing(10)

Image

Add an image before the card header to create a card with an image.

Featured

Design systems meetup

A practical talk on component APIs, accessibility, and shipping faster.

Usage

<!-- Card with title, description, action, content, and footer -->
<div x-data="card()" x-bind="cardAttrs">
  <div x-data="cardHeader()" x-bind="cardHeaderAttrs">
    <div x-data="cardTitle()" x-bind="cardTitleAttrs">Card Title</div>
    <div x-data="cardDescription()" x-bind="cardDescriptionAttrs">Card description</div>
    <div x-data="cardAction()" x-bind="cardActionAttrs">
      <button x-data="button({ size: 'sm', variant: 'outline' })" x-bind="buttonAttrs">Action</button>
    </div>
  </div>
  <div x-data="cardContent()" x-bind="cardContentAttrs">
    <p class="text-sm text-muted-foreground">Content</p>
  </div>
  <div x-data="cardFooter()" x-bind="cardFooterAttrs">
    <button x-data="button()" x-bind="buttonAttrs">Save</button>
  </div>
</div>