Card

Card is a container component that groups and displays related content. It organizes information with a header, content, and footer structure, supporting diverse layouts including images and actions.

Variants

Sizes

Orientations

Pure

React

Playground

Preview

D24px

Card Title

Card description goes here.

This is the main content area of the card. It can contain any content.

Variant

Size

Radius

Direction

Options

<Card>
  <Card.Header>
    <Card.Title icon={<Layers />}>Card Title</Card.Title>
    <Card.Description>Card description goes here.</Card.Description>
  </Card.Header>
  <Card.Content>
    <p className="text-sm text-text-muted">
      This is the main content area of the card. It can contain any content.
    </p>
  </Card.Content>
  <Card.Footer>
    <Button size="sm" variant="ghost" className="ml-auto" rightIcon={<ChevronRight />}>
      Learn more
    </Button>
  </Card.Footer>
</Card>

Variants

3 variants control the visual prominence of the card.

Default

Elevated with shadow

Main UI

Outline

Flat style with border only

Lists & grids

Ghost

Minimal — no background or border

Inside groups

Sizes

sm

Side16px

Top20px

Inner bottom12px

Last bottom20px

default

Side24px

Top24px

Inner bottom16px

Last bottom24px

lg

Side32px

Top32px

Inner bottom16px

Last bottom32px

Size	Side padding	Top padding	Inner bottom	Last bottom	Preview
`sm`	16px	20px	12px	20px	Title Content
`default`	24px	24px	16px	24px	Title Content
`lg`	32px	32px	16px	32px	Title Content

Responsive: default and lg sizes automatically reduce padding one step on mobile (below 640px). sm size uses a fixed value.

Features

Orientation

Switch between vertical and horizontal layout. In horizontal mode, the image is placed on the left.

Vertical (Default)

Image Area

Vertical Card

Image on top, content below.

<Card>
  <Card.Image src="/placeholder.jpg" alt="Preview" />
  <Card.Header>
    <Card.Title>Vertical Card</Card.Title>
    <Card.Description>Image on top, content below.</Card.Description>
  </Card.Header>
</Card>

Horizontal

Horizontal Card

Image on left, content on right.

<Card direction="horizontal">
  <Card.Image src="/placeholder.jpg" alt="Preview" />
  <Card.Header>
    <Card.Title>Horizontal Card</Card.Title>
    <Card.Description>Image on left, content on right.</Card.Description>
  </Card.Header>
</Card>

Header Action

Notifications

You have 3 unread messages.

<Card>
  <Card.Header>
    <Card.Title>Notifications</Card.Title>
    <Card.Description>You have 3 unread messages.</Card.Description>
    <Card.Action>
      <DropdownMenu>
        <DropdownMenu.Trigger asChild>
          <IconButton variant="ghost" size="sm">
            <MoreHorizontal />
          </IconButton>
        </DropdownMenu.Trigger>
        <DropdownMenu.Content align="end">
          <DropdownMenu.Item>Edit</DropdownMenu.Item>
          <DropdownMenu.Item>Duplicate</DropdownMenu.Item>
          <DropdownMenu.Separator />
          <DropdownMenu.Item>Delete</DropdownMenu.Item>
        </DropdownMenu.Content>
      </DropdownMenu>
    </Card.Action>
  </Card.Header>
</Card>

Image Overlay

Tropical Beach

Discover the most beautiful beaches.

<Card variant="outline">
  <Card.Image
    src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=600&h=300&fit=crop"
    alt="Beach"
    overlay
    className="h-48"
  />
  <Card.Header>
    <Card.Title>Tropical Beach</Card.Title>
    <Card.Description>Discover the most beautiful beaches.</Card.Description>
  </Card.Header>
</Card>

Customization

Customize image overlays with overlayOpacity and overlayClassName.

Opacity control

Light (30%)

Default (60%)

Dark (80%)

<Card.Image overlay overlayOpacity={30} />  {/* Light */}
<Card.Image overlay />                      {/* Default 60% */}
<Card.Image overlay overlayOpacity={80} />  {/* Dark */}

Full customization

{/* Change gradient direction */}
<Card.Image overlay overlayClassName="from-black/60 bg-gradient-to-b" />

{/* Color overlay */}
<Card.Image overlay overlayClassName="from-blue-900/50" />

Tip: Specifying overlayClassName takes precedence over overlayOpacity. Freely change the gradient direction or color.

API

Component Structure

Card— Radix Slot

.ImageProps.HeaderProps.TitleProps.DescriptionProps.ActionProps.ContentProps.FooterProps

.ImagePropsCard image (overlay support)

.HeaderPropsHeader area

.TitlePropsTitle (icon prop support)

.DescriptionPropsSupplementary text

.ActionPropsAction element (top-right of header)

.ContentPropsMain content area

.FooterPropsFooter area

Props

Card

variant"default"

"default" | "outline" | "ghost"

Visual style of the card

size"default"

"sm" | "default" | "lg"

Content padding scale (responsive)

radius"xl"

"sm" | "base" | "md" | "lg" | "xl" | "2xl"

Corner radius (2/4/6/8/12/16px)

direction"vertical"

"vertical" | "horizontal"

Layout direction

interactivefalse

boolean

Enhanced shadow and lift effect on hover (for clickable cards)

asChildfalse

boolean

Render as child element via Slot pattern

Name	Type	Default	Description
`variant`	`"default" \| "outline" \| "ghost"`	`"default"`	Visual style of the card
`size`	`"sm" \| "default" \| "lg"`	`"default"`	Content padding scale (responsive)
`radius`	`"sm" \| "base" \| "md" \| "lg" \| "xl" \| "2xl"`	`"xl"`	Corner radius (2/4/6/8/12/16px)
`direction`	`"vertical" \| "horizontal"`	`"vertical"`	Layout direction
`interactive`	`boolean`	`false`	Enhanced shadow and lift effect on hover (for clickable cards)
`asChild`	`boolean`	`false`	Render as child element via Slot pattern

Card.Title

iconundefined

React.ReactNode

Icon displayed before the title

Name	Type	Default	Description
`icon`	`React.ReactNode`	`undefined`	Icon displayed before the title

Card.Image

overlayfalse

boolean

Show gradient overlay

overlayOpacity60

number

Overlay opacity (10–90)

overlayClassNameundefined

string

Custom class for overlay (takes precedence over overlayOpacity)

alt""

string

Alternative text for the image

Name	Type	Default	Description
`overlay`	`boolean`	`false`	Show gradient overlay
`overlayOpacity`	`number`	`60`	Overlay opacity (10–90)
`overlayClassName`	`string`	`undefined`	Custom class for overlay (takes precedence over overlayOpacity)
`alt`	`string`	`""`	Alternative text for the image

Card.Header / Card.Content / Card.Footer / Card.Action / Card.Description

Inherits standard HTMLDivAttributes (Card.Description inherits HTMLParagraphAttributes). Padding is automatically adjusted based on the card's size context.

Anatomy

Card Title

⋯

Short description text here

Cancel

Confirm

Padding X24px

Padding top24px

Radius12px(xl)

Root

Card

Image

Card.Image

Header

Card.Header

Icon

Card.Title icon

Title

Card.Title

Action

Card.Action

Content

Card.Content

Footer

Card.Footer

Best Practices

✓

Don't

✗Don't nest cards inside cards
✗Don't cram excessive content into one card
✗Don't place buttons or links inside interactive cards (click conflicts)
✗Don't use cards purely for layout purposes

Accessibility

Semantics

asChildUse <a> for link cards

h3Card.Title renders as an h3 element

ARIA / WCAG

Icon in Card.Title has aria-hidden="true"
Card.Image supports the alt attribute
Use heading hierarchy (h3) correctly
DOM order matches visual order

Card

Playground

Card Title

Variants

Default

Outline

Ghost

Sizes

Title

Title

Title

Features

Orientation

Vertical (Default)

Vertical Card

Horizontal

Horizontal Card

Header Action

Notifications

Image Overlay

Tropical Beach

Customization

Opacity control

Full customization

API

Component Structure

Props

Card

Card.Title

Card.Image

Card.Header / Card.Content / Card.Footer / Card.Action / Card.Description

Anatomy

Best Practices

Recommended

Don't

Accessibility

Semantics

ARIA / WCAG

Related

Badge

Button

Avatar

MetricCard