Misc

Item

A flexible row with media, a title, a description and actions, for settings, lists and cards.

Import

import { Item, ItemMedia, ItemContent, ItemActions, ItemGroup, ItemSeparator, ItemTitle, ItemDescription, ItemHeader, ItemFooter } from "@booleanpress/ui/item"

Usage

An item lays out a row: optional media, a content block with a title and a description, and actions. Header and footer parts take a full-width line above and below.

import { Item, ItemContent, ItemDescription, ItemTitle } from "@booleanpress/ui/item"

export function Mailer() {
  return (
    <Item variant="outline">
      <ItemContent>
        <ItemTitle>Primary mailer</ItemTitle>
        <ItemDescription>Sends through smtp.example.com on port 587.</ItemDescription>
      </ItemContent>
    </Item>
  )
}

variant is default (no frame), outline (a border) or muted (a tinted fill); size is default or sm. ItemMedia takes variant="icon" (a small bordered tile) or "image" (a 40 px picture). ItemGroup stacks items and ItemSeparator draws the line between them.

Pass asChild and a link to make the whole item a link: it keeps the link's role, gets a hover fill and the focus ring. Do not put a second link or button inside such an item.

Examples

Basic

A title and a description in an outlined item.

Primary mailer

Sends through smtp.example.com on port 587.

Variants

default, outline and muted.

The default variant

Delivery is checked every five minutes.

The outline variant

Delivery is checked every five minutes.

The muted variant

Delivery is checked every five minutes.

With media and actions

An icon tile, a title with a badge, and a button.

Backup mailer Standby

Used when the primary mailer fails.

Group

Items in a group with separators between them.

Order emails

Subject contains “Order”

Support replies

Sender is support@example.com

Everything else

No condition

As a link

asChild makes the whole row one link.

Email log

Every email your site sent this month.

Accessibility

Semantics: Plain divs (and a p for the description), with no roles. ItemGroup has no role="list": stock adds it, which would require every child to be role="listitem", and Item is not one. For a real list, put the items in a ul and li yourself with asChild.
Labels: The title is the visible name. A link made with asChild is named by its content, so keep title and description short.
Focus: An item is not focusable unless it is a link or contains a control. The focus ring shows on keyboard focus.
Known limits: ItemDescription keeps two lines (line-clamp-2) and cuts the rest with an ellipsis, so the full text is not available to sighted users: keep descriptions short.
Without a list role, a screen reader does not announce how many items a group has.