Item Card Group

Usage

Anatomy

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

import { ItemCardGroup } from "@blakeui/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

There is no pressable variant — render swaps each card's root for a button, and the group takes overflow-hidden so a square row highlight cannot escape its rounded corners.

Variants

Wallet List

With Header

CSS Classes

Base Class

• .item-card-group — The container. Carries only border-radius: --radius * 2 and no padding of its own, so in list layout the rows run edge to edge and the group's corners are the panel's corners. Everything else — fill, stroke, and the layout itself — comes from the variant and layout modifiers below.

Variant Classes

• .item-card-group--default — background-color: --surface plus 1px solid --border. Bordered and flat, like every variant below it.
• .item-card-group--secondary — background-color: --surface-secondary plus 1px solid --border.
• .item-card-group--tertiary — background-color: --surface-tertiary plus 1px solid --border.
• .item-card-group--outline — 1px solid --border over a transparent background, with box-shadow: none. It differs from default only in the fill.
• .item-card-group--transparent — Transparent background, no border, box-shadow: none, and border-radius: 0. The only variant that also drops the corners.

Layout Classes

• .item-card-group--list — display: flex with flex-direction: column. The rows stack and a Separator between them draws the divider.
• .item-card-group--grid — display: grid over repeat(var(--item-card-group-columns), minmax(0, 1fr)) with a --spacing * 3 gap. It also zeroes the group's own fill, stroke, and shadow, so in grid layout the variant modifier has nothing left to paint — the cards are the surfaces. All three rules are single-class selectors, so this one has to stay below the variant rules in the stylesheet to win.

Element Classes

• .item-card-group__header — --spacing * 4 inline and top padding, --spacing * 2 bottom. In grid layout the padding is dropped to 0 and the part spans grid-column: 1 / -1, so the heading sits above the whole grid rather than inside the first cell.
• .item-card-group__title — 0.875rem / 1.25rem at weight 600 in --foreground. Heavier than .item-card__title, which is weight 500, so the section heading outranks the row labels.
• .item-card-group__description — 0.75rem / 1rem in --muted with margin-top: --spacing * 0.5.

Descendant Rules

• .item-card-group--list > [data-slot="item-card"] — In list layout only, each card gives up its own border-width, border-radius, background-color, and box-shadow, so the rows read as one panel instead of a stack of separate cards. Grid layout is deliberately excluded, which is why grid cards keep the bordered-flat treatment they have anywhere else.
• :is(.item-card-group--secondary, .item-card-group--tertiary) [data-slot="separator"] — On the two filled non-default surfaces the divider repaints to color-mix(in oklab, var(--muted) 10%, transparent), because the default separator has too little contrast against them.
• :is(.item-card-group--secondary, .item-card-group--tertiary) > [data-slot="item-card"] > [data-slot="item-card-icon"] — The same reasoning for the icon square, which repaints to color-mix(in oklab, var(--surface) 50%, transparent).

CSS Variables

• --item-card-group-columns — Column count for grid layout. Declared as 2 on .item-card-group--grid and overridden inline by the columns prop. Setting it yourself on any ancestor works too, since the grid template reads it through var().

Data Attributes

• [data-slot="item-card-group"], [data-slot="item-card-group-header"], [data-slot="item-card-group-title"], [data-slot="item-card-group-description"] — One per part, so any of them can be targeted without depending on its BEM class. The descendant rules above are the component's own use of them, together with [data-slot="item-card"] and [data-slot="separator"] from the parts it wraps.

API Reference

ItemCardGroup

The root. A div with role="group" that lays its children out and paints the shared surface.

Also accepts every native div attribute.

ItemCardGroup.Header

The section heading area. A div, padded in list layout and spanning the full row in grid.

Also accepts every native div attribute.

ItemCardGroup.Title

The section heading. Rendered as an h3.

Also accepts every native h3 attribute.

ItemCardGroup.Description

The supporting line under the title. Rendered as a p in --muted.

Also accepts every native p attribute.