Item Card Group

Usage

Anatomy

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

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

<ItemCardGroup>
  <ItemCardGroup.Header>
    <ItemCardGroup.Title />
    <ItemCardGroup.Description />
  </ItemCardGroup.Header>
</ItemCardGroup>

Grid

Grid Three Columns

Linked Accounts

List

Multiple Sections

Notification Preferences

Permission Levels

Pressable

Variants

Wallet List

With Header

CSS Classes

Base & Variant Classes

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

Layout Classes

• .item-card-group--list - Vertical stack layout with auto-dividers between cards
• .item-card-group--grid - Multi-column grid layout with spaced cards (column count via --item-card-group-columns)

Element Classes

• .item-card-group__header - Optional section heading area
• .item-card-group__title - Section heading text
• .item-card-group__description - Section subtext

CSS Variables

• --item-card-group-columns - Number of grid columns (default: 2, set via the columns prop)

API Reference

ItemCardGroup

The root component. Groups item cards with shared styling.

Also supports all native div HTML attributes.

ItemCardGroup.Header

Optional section heading area.

Also supports all native div HTML attributes.

ItemCardGroup.Title

Section heading rendered as an h3.

Also supports all native h3 HTML attributes.

ItemCardGroup.Description

Section subtext rendered as a p.

Also supports all native p HTML attributes.