Card

Import

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

Usage

import {CircleDollar} from "@gravity-ui/icons";
import {Card, Link} from "@heroui/react";

export function Default() {
  return (

Anatomy

Import the Card component and access all parts using dot notation.

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

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

Variants

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

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

export function Variants() {
  return (
    <div className="flex flex-col gap-4">

• 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-quaternary)
• quaternary - Highest prominence for critical content

Horizontal Layout

Become an ACME Creator!

Lorem ipsum dolor sit amet consectetur. Sed arcu donec id aliquam dolor sed amet faucibus etiam.

Only 10 spotsSubmission ends Oct 10.

Apply Now

import {Button, Card, CloseButton} from "@heroui/react";

export function Horizontal() {
  return (
    <Card className="w-full items-stretch md:flex-row">

Expand code

With Avatar

Indie Hackers

148 members

IHBy Martha

AI Builders

362 members

BBy John

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

export function WithAvatar() {
  return (
    <div className="flex flex-wrap gap-4">

Expand code

With Images

Become an ACME Creator!

Lorem ipsum dolor sit amet consectetur. Sed arcu donec id aliquam dolor sed amet faucibus etiam.

Only 10 spotsSubmission ends Oct 10.

Apply Now

PAYMENT

You can now withdraw on crypto

Add your wallet in settings to withdraw

Go to settings

JK

Indie Hackers

148 members

JK

By John

AB

AI Builders

362 members

M

By Martha

NEO

Home Robot

Available soon

Get notified

Notify me

NEO

$499/m

Get now

Bridging the Future

Today, 6:30 PM

Avocado Hackathon

Wed, 4:30 PM

Sound Electro | Beyond art

Fri, 8:00 PM

import {CircleDollar} from "@gravity-ui/icons";
import {Avatar, Button, Card, CloseButton, Link} from "@heroui/react";

export function WithImages() {
  return (

Expand code

With Form

"use client";

import {Button, Card, Form, Input, Label, Link, TextField} from "@heroui/react";

export function WithForm() {

Accessibility

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

// 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>

Styling

Component Customization

<Card className="border-2 border-blue-500 bg-gradient-to-r from-blue-50 to-purple-50">
  <Card.Header>
    <Card.Title className="text-blue-900">Custom Styled Card</Card.Title>
    <Card.Description className="text-blue-700">Custom colors applied</Card.Description>
  </Card.Header>
  <Card.Content>
    <p className="text-blue-800">Content with custom styling</p>
  </Card.Content>
</Card>

CSS Variable Overrides

/* 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 naming for predictable styling, (View source styles):

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-quaternary (maps to tertiary variant)
• .card--quaternary - Highest prominence for critical content (maps to quaternary variant)

API Reference

Card

Card.Header

Card.Title

Card.Description

Card.Content

Card.Footer