Item Card

Usage

Anatomy

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

import {ItemCard} from "@heroui-pro/react";

<ItemCard>
  <ItemCard.Icon />
  <ItemCard.Content>
    <ItemCard.Title />
    <ItemCard.Description />
  </ItemCard.Content>
  <ItemCard.Action />
</ItemCard>

Device List

Email Setting

Pressable

Title Only

Variants

Vertical Stack

Wallet Card

With Multi Select

With Select

With Switch

Without Icon

CSS Classes

Base & Variant Classes

• .item-card - Base horizontal row layout with rounded corners
• .item-card--default - Default variant with surface background and shadow
• .item-card--secondary - Secondary variant with surface-secondary background
• .item-card--tertiary - Tertiary variant with surface-tertiary background
• .item-card--outline - Outline variant with border and transparent background
• .item-card--transparent - Transparent variant with no background or shadow

Element Classes

• .item-card__icon - Leading icon container (rounded square with default background)
• .item-card__content - Title + description area, fills available space
• .item-card__title - Primary label text (truncated)
• .item-card__description - Secondary text (truncated)
• .item-card__action - Trailing slot for buttons, toggles, etc.

API Reference

ItemCard

The root component. Renders a horizontal row container.

Also supports all native div HTML attributes.

ItemCard.Icon

Leading icon container.

Also supports all native div HTML attributes.

ItemCard.Content

Container for title and description, fills available space.

Also supports all native div HTML attributes.

ItemCard.Title

Primary label text rendered as a span.

Also supports all native span HTML attributes.

ItemCard.Description

Secondary descriptive text rendered as a span.

Also supports all native span HTML attributes.

ItemCard.Action

Trailing action slot for buttons, toggles, or other controls.

Also supports all native div HTML attributes.