Card

A container component for grouping related content. Organizes information with header, content, and footer structure — supports images, actions, and diverse layouts.

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>
  <CardHeader>
    <CardTitle icon={<Layers />}>Card Title</CardTitle>
    <CardDescription>Card description goes here.</CardDescription>
  </CardHeader>
  <CardContent>
    <p className="text-sm text-text-muted">
      This is the main content area of the card. It can contain any content.
    </p>
  </CardContent>
  <CardFooter>
    <Button size="sm" variant="ghost" className="ml-auto" rightIcon={<ChevronRight />}>
      Learn more
    </Button>
  </CardFooter>
</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>
  <CardImage src="/placeholder.jpg" alt="Preview" />
  <CardHeader>
    <CardTitle>Vertical Card</CardTitle>
    <CardDescription>Image on top, content below.</CardDescription>
  </CardHeader>
</Card>

Horizontal

Horizontal Card

Image on left, content on right.

<Card direction="horizontal">
  <CardImage src="/placeholder.jpg" alt="Preview" />
  <CardHeader>
    <CardTitle>Horizontal Card</CardTitle>
    <CardDescription>Image on left, content on right.</CardDescription>
  </CardHeader>
</Card>

Header Action

Notifications

You have 3 unread messages.

<Card>
  <CardHeader>
    <CardTitle>Notifications</CardTitle>
    <CardDescription>You have 3 unread messages.</CardDescription>
    <CardAction>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <IconButton variant="ghost" size="sm">
            <MoreHorizontal />
          </IconButton>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end">
          <DropdownMenuItem>Edit</DropdownMenuItem>
          <DropdownMenuItem>Duplicate</DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem>Delete</DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </CardAction>
  </CardHeader>
</Card>

Image Overlay

Tropical Beach

Discover the most beautiful beaches.

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

Customization

Customize image overlays with overlayOpacity and overlayClassName.

Opacity control

Light (30%)

Default (60%)

Dark (80%)

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

Full customization

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

{/* Color overlay */}
<CardImage 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

CardTitle

iconundefined

React.ReactNode

Icon displayed before the title

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

CardImage

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

CardHeader / CardContent / CardFooter / CardAction / CardDescription

Inherits standard HTMLDivAttributes (CardDescription 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

CardImage

Header

CardHeader

Icon

CardTitle icon

Title

CardTitle

Action

CardAction

Content

CardContent

Footer

CardFooter

Best Practices

✓

Do

✓Group related content into a single card
✓Use consistent variant and size within the same section
✓Use the interactive prop for clickable cards
✓Always set the alt attribute on images

Don't

✗Don't nest cards inside cards
✗Don't overload a single card with too much content
✗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

h3CardTitle renders as an h3 element

ARIA / WCAG

Icon in CardTitle has aria-hidden="true"
CardImage 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

CardTitle

CardImage

CardHeader / CardContent / CardFooter / CardAction / CardDescription

Anatomy

Best Practices

Do

Don't

Accessibility

Semantics

ARIA / WCAG

Related

Badge

Button

Avatar

MetricCard