--- title: "Item" description: "Displays a row of content with media, a title, a description and actions, alone or in a list." url: "https://susonwaiba.github.io/htmx-ui/docs/components/item" section: "Components" --- # Item Displays a row of content with media, a title, a description and actions, alone or in a list. ```html

Basic item

A simple item with a title and a description.

Your profile has been verified.

``` ## Markup An item is a flex row. Every part is optional except the content: ```html

…

``` - `.item-media` sits at the start. Next to a title and a description it aligns with the title rather than the middle. - `.item-content` takes the free space. A second `.item-content` (a date, an amount) only takes the room it needs. - `.item-description` is clamped to two lines. Links inside it are underlined. - `.item-actions` sits at the end. - `.item-header` and `.item-footer` take a full line each, above and below the rest. Items wrap. When the media, the content and the actions don't fit side by side, the actions move to a line of their own, still at the end, so an item works on a phone with no extra classes. ## Variants The default item has no border or background, for lists inside a card or a panel. `.item-outline` adds a border and `.item-muted` a muted background. ```html

Default

Transparent, with no border.

Outline

A border around the item.

Muted

A muted background, for secondary content.

``` ## Sizes The default size, `.item-sm` and `.item-xs` reduce the padding and gaps. The extra small size also shrinks icon and image media and the description. ```html

Inbox

12 unread messages

Inbox

12 unread messages

Inbox

12 unread messages

``` ## Icon `.item-media-icon` puts an icon in a small bordered, muted square. A bare icon in `.item-media` works too. ```html

Security alert

New sign-in from an unknown device in Lisbon, Portugal.

``` ## Avatar Put an [avatar](https://susonwaiba.github.io/htmx-ui/docs/components/avatar) or an avatar group in `.item-media`. The person's name is in the title, so the avatar is decorative: `aria-hidden="true"`, with no role or label. ```html

Ana Lima

Last seen 5 months ago

No team members

Invite your team to collaborate on this project.

``` ## Image `.item-media-image` crops an image to a rounded square: put an `` inside it, or use it on the `` itself. Images next to a title are decorative: `alt=""`. ```html

Mountain Echoes · The Ridgeline

High Country

3:42

Low Tide · Harbour Lights

Saltwater

4:15

Under the Canopy · Moss & Fern

Evergreen

5:03

``` ## Group `.item-group` stacks items in a list. Give it `role="list"` and each item `role="listitem"` (or use a `

`). Put an a [`.separator`](https://susonwaiba.github.io/htmx-ui/docs/components/separator) between items for a line, hidden from screen readers with `aria-hidden="true"` so the list only holds items; or space them with a `gap-*` utility. ```html

Ana Lima

ana@example.com

Kofi Mensah

kofi@example.com

Ravi Patel

ravi@example.com

``` ## Header `.item-header` is a full-width row above the media and content. An image or video directly inside it fills the width with rounded corners; set its shape with an `aspect-*` utility. Laid out in a grid, such items make a set of cards. `.item-footer` is the same below. ```html

Summit-1

Everyday tasks, fast and inexpensive.

Available

Tide-2

Long documents and careful reasoning.

Available

Canopy-3

Images and charts alongside text.

Available

``` ## Link When the whole item goes somewhere and has nothing else to click, make the item the link: ``. It gets a hover background and a focus outline. The same works on a ` ``` ## Dropdown Items work as entries in a [dropdown](https://susonwaiba.github.io/htmx-ui/docs/components/dropdown) menu: give each one `role="menuitem"`. Inside `.dropdown-menu` they take the menu's padding and highlight, and the description shrinks to one line. Use `

Team

``` ### A menu in the actions Put a dropdown in `.item-actions` for the actions that don't fit as buttons. Align its menu to the end with `.dropdown-menu-end`. ```html

Project Atlas

8 members · Updated yesterday

``` ## Actions with htmx Actions are ordinary buttons, so they take `hx-*` attributes. Here the button posts a setting and the server's reply replaces the status in the description. A server can just as well return whole items, to append to an `.item-group` or to replace one item with `hx-swap="outerHTML"`. ```html

Email notifications

Off. Turn them on to hear about new comments.

``` ## Accessibility - Group items with `role="list"` and `role="listitem"`, or `
- `. Don't put `role="listitem"` on an ``: it replaces the link role. Wrap the link in an element with the role instead. - Separators inside a list get `aria-hidden="true"`, so the list holds only items; outside a list, use `role="separator"`. - Never nest a link or button inside ``. For a link item with actions, use `.item-link` on a link around the title. - Icon-only actions need an `aria-label` that names the item: “Invite Ana Lima”, not “Invite”. - Media next to a title is decorative: `alt=""` on images, `aria-hidden="true"` on avatars. - The title is a `
  ` here. Make it a heading when the items are sections of the page someone would navigate by. ## Reference | Class | Description | | --- | --- | | `.item` | A flex row of media, content and actions that wraps on narrow widths. On an or