Card

Usage

import { Card } from "@heroui/react";

<ComponentPreview name="card-default" />

Anatomy

import { Card } from "@heroui/react";

export default () => (
  <Card>
    <Card.Header>
      <Card.Title />
      <Card.Description />
    </Card.Header>
    <Card.Content />
    <Card.Footer />
  </Card>
);

Examples

Variants

Cards come in semantic variants that describe their prominence level rather than specific visual styles. This allows themes to interpret them differently:

<ComponentPreview name="card-variants" />

• transparent - Minimal prominence, transparent background (great for nested cards)
• default - Standard card for most use cases (surface-secondary)
• secondary - Medium prominence to draw moderate attention (surface-tertiary)
• tertiary - Higher prominence for important content (surface-tertiary)

Horizontal Layout

<ComponentPreview name="card-horizontal" />

With Avatar

<ComponentPreview name="card-with-avatar" />

With Images

<ComponentPreview name="card-with-images" />

With Form

<ComponentPreview name="card-with-form" />

Customization

Tailwind CSS

Global CSS

To customize the Card component classes, you can use the @layer components directive. Learn more.

@layer components {
  .card--secondary {
    @apply bg-gradient-to-br from-blue-50 to-purple-50;
  }

  .card__title {
    @apply text-xl font-bold;
  }
}

Styling Reference

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

Card uses BEM naming for predictable styling (View source styles):

Base Classes [!toc]

• .card - Base container with padding and border
• .card__header - Header section container
• .card__title - Title with base font size and weight
• .card__description - Muted description text
• .card__content - Flexible content container
• .card__footer - Footer with row layout

Variant Classes [!toc]

• .card--transparent - Minimal prominence, transparent background (maps to transparent variant)
• .card--default - Standard appearance with surface-secondary (default)
• .card--secondary - Medium prominence with surface-tertiary (maps to secondary variant)
• .card--tertiary - Higher prominence with surface-tertiary (maps to tertiary variant)

API Reference

Card

Card.Header

Card.Title

Card.Description

Card.Content

Card.Footer

Accessibility

import { Card } from '@heroui/react';
import { cardVariants } from '@heroui/styles';

// Semantic markup
<Card role="article" aria-labelledby="card-title">
  <Card.Header>
    <Card.Title id="card-title">Article Title</Card.Title>
  </Card.Header>
</Card>

// Interactive cards
<a className={cardVariants().base()} href="/details" aria-label="View product details">
  <Card.Title>Product Name</Card.Title>
</a>

Related Components