Item Card Group

Usage

.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

.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)

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

The root component. Groups item cards with shared styling.

Prop	Type	Default	Description
`layout`	`'list' \| 'grid'`	`'list'`	Layout mode
`variant`	`'default' \| 'secondary' \| 'tertiary' \| 'outline' \| 'transparent'`	`'default'`	Visual style variant
`columns`	`2 \| 3`	`2`	Number of grid columns when `layout` is `"grid"`
`children`	`ReactNode`	-	Item cards, separators, and headers

Also supports all native div HTML attributes.

Optional section heading area.

Prop	Type	Default	Description
`children`	`ReactNode`	-	Title and description elements

Also supports all native div HTML attributes.

Section heading rendered as an h3.

Prop	Type	Default	Description
`children`	`ReactNode`	-	Title text

Also supports all native h3 HTML attributes.

Section subtext rendered as a p.

Prop	Type	Default	Description
`children`	`ReactNode`	-	Description text

Also supports all native p HTML attributes.