# Card **Category**: react **URL**: https://www.heroui.com/docs/react/components/card **Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/react/components/(layout)/card.mdx > Flexible container component for grouping related content and actions *** ## Import ```tsx import { Card } from "@heroui/react"; ``` ### Usage ```tsx import {CircleDollar} from "@gravity-ui/icons"; import {Card, Link} from "@heroui/react"; export function Default() { return ( Become an Acme Creator! Visit the Acme Creator Hub to sign up today and start earning credits from your fans and followers. Creator Hub ); } ``` ### Anatomy Import the Card component and access all parts using dot notation. ```tsx import { Card } from "@heroui/react"; export default () => ( ); ``` ### Variants Cards come in semantic variants that describe their prominence level rather than specific visual styles. This allows themes to interpret them differently: ```tsx import {Card} from "@heroui/react"; export function Variants() { return (

Transparent Minimal prominence with transparent background

Use for less important content or nested cards

Default Standard card appearance (bg-surface)

The default card variant for most use cases

Secondary Medium prominence (bg-surface-secondary)

Use to draw moderate attention

Tertiary Higher prominence (bg-surface-tertiary)

Use for primary or featured content

); } ``` - **`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 ```tsx import {Button, Card, CloseButton} from "@heroui/react"; export function Horizontal() { return (

Become an ACME Creator! Lorem ipsum dolor sit amet consectetur. Sed arcu donec id aliquam dolor sed amet faucibus etiam.

Only 10 spots Submission ends Oct 10.

); } ``` ### With Avatar ```tsx import {Avatar, Card} from "@heroui/react"; export function WithAvatar() { return (

Indie Hackers 148 members IH By Martha AI Builders community

AI Builders 362 members B By John

); } ``` ### With Images ```tsx import {CircleDollar} from "@gravity-ui/icons"; import {Avatar, Button, Card, CloseButton, Link} from "@heroui/react"; export function WithImages() { return (

{/* Row 1: Large Product Card - Available Soon */}

Become an ACME Creator! Lorem ipsum dolor sit amet consectetur. Sed arcu donec id aliquam dolor sed amet faucibus etiam.

Only 10 spots Submission ends Oct 10.

{/* Row 2 */}

{/* Left Column */}

{/* Top Card */}

PAYMENT You can now withdraw on crypto Add your wallet in settings to withdraw

Go to settings {/* Bottom cards */}

{/* Left Card */} JK

Indie Hackers

148 members

By John

{/* Right Card */} AB

AI Builders

362 members

By Martha

{/* Right Column */} {/* Background image */} {/* Header */} NEO Home Robot {/* Footer */}

Available soon

Get notified

{/* Row 3 */}

{/* Left Column: Card */}

NEO

$499/m

{/* Right Column: Cards Stack */}

{/* 1 */}

Bridging the Future Today, 6:30 PM

{/* 2 */}

Avocado Hackathon Wed, 4:30 PM

{/* 3 */}

Sound Electro | Beyond art Fri, 8:00 PM

); } ``` ### With Form ```tsx "use client"; import {Button, Card, Form, Input, Label, Link, TextField} from "@heroui/react"; export function WithForm() { const onSubmit = (e: React.FormEvent) => { e.preventDefault(); const formData = new FormData(e.currentTarget); const data: Record = {}; // Convert FormData to plain object formData.forEach((value, key) => { data[key] = value.toString(); }); alert("Form submitted successfully!"); }; return ( Login Enter your credentials to access your account ); } ``` ## Accessibility ```tsx import { Card } from '@heroui/react'; import { cardVariants } from '@heroui/styles'; // Semantic markup Article Title // Interactive cards Product Name ``` ## Related Components - **Surface**: Base container surface - **Avatar**: Display user profile images - **Form**: Form validation and submission handling ## Styling ### Component Customization ```tsx Custom Styled Card Custom colors applied

Content with custom styling

``` ### CSS Variable Overrides ```css /* Override specific variants */ .card--secondary { @apply bg-gradient-to-br from-blue-50 to-purple-50; } /* Custom element styles */ .card__title { @apply text-xl font-bold; } ``` ## CSS Classes Card uses [BEM](https://getbem.com/) naming for predictable styling, ([View source styles](https://github.com/heroui-inc/heroui/blob/v3/packages/styles/components/card.css)): #### Base Classes - `.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 - `.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 | Prop | Type | Default | Description | | ----------- | --------------------------------------------------------- | ------------ | -------------------------- | | `variant` | `"transparent" \| "default" \| "secondary" \| "tertiary"` | `"default"` | Semantic variant indicating prominence level | | `className` | `string` | - | Additional CSS classes | | `children` | `React.ReactNode` | - | Card content | ### Card.Header | Prop | Type | Default | Description | | ----------- | ----------------- | ------- | ------------------------- | | `className` | `string` | - | Additional CSS classes | | `children` | `React.ReactNode` | - | Header content | ### Card.Title | Prop | Type | Default | Description | | ----------- | ----------------- | ------- | -------------------------------- | | `className` | `string` | - | Additional CSS classes | | `children` | `React.ReactNode` | - | Title content (renders as `h3`) | ### Card.Description | Prop | Type | Default | Description | | ----------- | ----------------- | ------- | ------------------------------- | | `className` | `string` | - | Additional CSS classes | | `children` | `React.ReactNode` | - | Description content (renders as `p`) | ### Card.Content | Prop | Type | Default | Description | | ----------- | ----------------- | ------- | ------------------------- | | `className` | `string` | - | Additional CSS classes | | `children` | `React.ReactNode` | - | Main content | ### Card.Footer | Prop | Type | Default | Description | | ----------- | ----------------- | ------- | ------------------------- | | `className` | `string` | - | Additional CSS classes | | `children` | `React.ReactNode` | - | Footer content |