Item Card

Usage

Anatomy

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

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

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

Device List

Email Setting

Pressable

There is no pressable variant — render swaps the root element for a button, and the hover, press, and focus treatment comes from utility classes on className.

Title Only

Variants

Vertical Stack

Wallet Card

With Multi Select

With Select

With Switch

Without Icon

CSS Classes

Base Class

• .item-card — The row itself. display: flex with align-items: center, a --spacing * 3 gap, border-radius: --radius * 2, and --spacing * 4 inline / --spacing * 3 block padding. It carries no background of its own — that is the variant's job — and no hover, press, or focus rule, which is why a pressable row supplies its own.

Variant Classes

• .item-card--default — background-color: --surface plus 1px solid --border. Bordered and flat, like every variant below it.
• .item-card--secondary — background-color: --surface-secondary plus 1px solid --border.
• .item-card--tertiary — background-color: --surface-tertiary plus 1px solid --border.
• .item-card--outline — 1px solid --border over a transparent background. It differs from default only in the fill.
• .item-card--transparent — Transparent background, no border, and box-shadow: none, for a row that sits inside a surface that is already painted. The only variant with no stroke.

Element Classes

• .item-card__icon — Leading square: --spacing * 9 on both axes, border-radius: --radius * 1, background-color: --default, color: --foreground, and flex-shrink: 0 so it survives a crowded row. A descendant svg is forced to --spacing * 4 on both axes, so the icon size is the slot's decision rather than the icon's.
• .item-card__content — flex: 1 with flex-direction: column and min-width: 0. That min-width is what makes this column the part that yields when the row runs out of room, instead of the action being pushed out of the card.
• .item-card__title — 0.875rem / 1.25rem at weight 500 in --foreground, white-space: nowrap with overflow: hidden and text-overflow: ellipsis — and width: fit-content. Note that the fit-content resolves to the text's full max-content width rather than to the column, so the ellipsis does not engage on its own: long text keeps its full width and runs underneath the action. Add max-w-full to clamp it to the content column and get real truncation. Every demo on this page does.
• .item-card__description — 0.75rem / 1rem in --muted, margin-top: --spacing * 0.5, with the same truncation rules as the title — and the same need for max-w-full.
• .item-card__action — margin-left: auto pins it to the trailing edge, flex-shrink: 0 keeps it at its natural size while the content column absorbs the squeeze, and padding-left: --spacing * 2 holds it off the content.

Descendant Rule

• :is(.item-card--secondary, .item-card--tertiary) > [data-slot="item-card-icon"] — On the two filled non-default variants the icon square repaints to color-mix(in oklab, var(--surface) 50%, transparent), because --default has too little contrast against those surfaces.

Data Attributes

• [data-slot="item-card"], [data-slot="item-card-icon"], [data-slot="item-card-content"], [data-slot="item-card-title"], [data-slot="item-card-description"], [data-slot="item-card-action"] — One per part, so any of them can be targeted without depending on its BEM class. The icon rule above is the component's own use of them.

API Reference

ItemCard

The root. A div by default, rendered through the shared DOM-render helper so render can swap the element.

Also accepts every native div attribute — or, when render retargets the element, that element's attributes.

ItemCard.Icon

The leading square. A div that centres whatever it is given and forces a descendant svg to 16px.

Also accepts every native div attribute.

ItemCard.Content

The text column. Takes the remaining width and, because it sets min-width: 0, is the part that yields when the row runs out of room.

Also accepts every native div attribute.

ItemCard.Title

The primary label. A span, single-line and ellipsised.

Also accepts every native span attribute.

ItemCard.Description

The supporting line. A span in --muted, truncated like the title.

Also accepts every native span attribute.

ItemCard.Action

The trailing slot, pushed to the far edge and held at its natural size.

Also accepts every native div attribute.