Sign in
Components

Card

A flexible container for grouping related content, actions, and media.

Import

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

Anatomy

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

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

Usage

Notifications

You have 3 unread messages.

Manage what lands in your inbox with fine-grained filters.
import { Button, Card } from "@heroui/react";

export function Basic() {
  return (
    <Card className="w-full max-w-sm">
      <Card.Header>
        <Card.Title>Notifications</Card.Title>
        <Card.Description>You have 3 unread messages.</Card.Description>
      </Card.Header>
      <Card.Content>
        <p className="text-sm text-muted">
          Manage what lands in your inbox with fine-grained filters.
        </p>
      </Card.Content>
      <Card.Footer className="mt-4">
        <Button fullWidth>View inbox</Button>
      </Card.Footer>
    </Card>
  );
}

Variants

Default

Standard surface with subtle border.

Secondary

Slightly elevated background.

Tertiary

Strongest surface prominence.

Transparent

Minimal chrome, content-first.

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

export function Variants() {
  return (
    <div className="grid gap-3 sm:grid-cols-2">
      <Card variant="default">…</Card>
      <Card variant="secondary">…</Card>
      <Card variant="tertiary">…</Card>
      <Card variant="transparent">…</Card>
    </div>
  );
}

API Reference

Card

PropTypeDefaultDescription
variant"transparent" | "default" | "secondary" | "tertiary""default"Semantic variant indicating prominence level
classNamestring—Additional CSS classes

Card Parts

PartRenders asDescription
Card.HeaderdivHeader container
Card.Titleh3Title text
Card.DescriptionpMuted description paragraph
Card.ContentdivMain content container
Card.FooterdivFooter row (actions, metadata)

See the HeroUI Card docs for richer compositions (bento grids, form cards, hero cards).