Item New Alpha Light DOM & Tailwind

Usage

Item is a flexible, composable row used to display a piece of content such as a person, a file or a setting. Combine it with its parts to build rich list rows, and stack several together with Item Group.

Import the parts you need — each import registers its custom element:

import "@nordhealth/components/lib/Item"
import "@nordhealth/components/lib/ItemActions"
import "@nordhealth/components/lib/ItemContent"
import "@nordhealth/components/lib/ItemDescription"
import "@nordhealth/components/lib/ItemFooter"
import "@nordhealth/components/lib/ItemGroup"
import "@nordhealth/components/lib/ItemHeader"
import "@nordhealth/components/lib/ItemMedia"
import "@nordhealth/components/lib/ItemSeparator"
import "@nordhealth/components/lib/ItemTitle"

Then compose the parts inside an Item:

Composition

An Item lays out a leading visual, textual content and trailing controls in a single row. The variant attribute controls its appearance (default, outline or muted) and size controls its padding and gap (xs, s or m). Wrap an Item in an <a> element to make the whole row act as a link.

Item
├── ItemMedia        (optional, leading visual)
├── ItemContent
│   ├── ItemTitle
│   └── ItemDescription   (optional)
└── ItemActions      (optional, trailing controls)

<nord-item variant="outline">
  <nord-item-media variant="icon">
    <!-- icon, avatar or image -->
  </nord-item-media>
  <nord-item-content>
    <nord-item-title>Title</nord-item-title>
    <nord-item-description>Secondary line of text.</nord-item-description>
  </nord-item-content>
  <nord-item-actions>
    <!-- buttons or a chevron -->
  </nord-item-actions>
</nord-item>

Item Media

Item Media holds the leading visual of an Item, such as an icon, an avatar or an image. Its variant attribute switches between default (simply centers its content), icon (a small bordered, muted square that centers an icon) and image (a rounded square that clips an image to a cover fit).

Item Content

Item Content holds the textual content of an Item, typically an Item Title and an Item Description. It grows to fill the available space.

Item Title

Item Title is the primary line of text in an Item. It can also contain an inline icon.

Item Description

Item Description is the secondary, muted line of text in an Item. It is clamped to two lines.

Item Actions

Item Actions holds the trailing controls of an Item, such as buttons or a chevron.

Item Header

Item Header spans the full width at the top of an Item, useful for a leading image or a row of metadata.

Item Footer

Item Footer spans the full width at the bottom of an Item, useful for a row of metadata or trailing actions.

Item Group

Item Group stacks a set of Item rows vertically and exposes them to assistive technology as a list. Separate individual items with Item Separator.

Item Separator

Item Separator draws a horizontal divider between Item rows inside an Item Group.

Examples

Variants

The variant attribute switches between a transparent default, an outline with a visible border, and a muted filled background for secondary content.

Sizes

The size attribute controls the item's padding and gap, from the standard m down to a compact xs.

Avatar media

Use Item Media for an avatar, and Item Actions for a trailing button.

Item group

Stack several Items in an Item Group, which exposes them to assistive technology as a list.

As a link

Wrap an Item in an <a> element to make the whole row act as a link. The row highlights on hover when wrapped this way.

With an icon

Place an icon in Item Media to give the row a leading glyph.

With an avatar

Combine an avatar with supporting text and trailing actions for a richer row.

With an image

Use an image in Item Media for thumbnails such as product or document previews.

Header

Use Item Header to label a group of items.

Grouped items

Combine headers, media and actions across a full Item Group.

With a dropdown

Trigger a Dropdown from an Item's trailing actions for per-row menus.

RTL

Item follows the document or container direction. Toggle the direction to see the layout mirror.

Accessibility

• Wrap a set of related items in an Item Group, which exposes them to assistive technology as a list so screen reader users hear the number of items and can navigate between them.
• To make an entire Item act as a link, wrap it in an <a> element rather than nesting interactive controls — this gives a single, predictable target for keyboard and pointer users.
• Give icon-only controls in Item Actions an accessible name with aria-label, since the icon alone has no text for assistive technology.
• An Item Separator is purely visual — don't use it to convey grouping that isn't already expressed by the Item Group structure.