Item

Item — a list row: media, a title, a description, actions.

Beta · Content blocks · packages/css/src/components/item.css

.pui-item · style --outline --muted · --small · --selected (aria-selected when the item is a role="option") · __media __texts __title __description __check __button __action.

Item — every size and every stateOpen in the workshop

Sizes across, states down.

What it is for

• Title; Description + Has description; Has media + Media (swap — Avatar 36 by default; an icon box, a Logo mark or an Aspect ratio 1:1 at 40 swaps in), the Media exposed; Has check (the picker’s selected mark); Has button + the exposed small secondary Button (‘Open’); Has action + the exposed ghost ellipsis
• Style: default (no border) · outline (border/default) · muted (surface/sunken); Size: default (space/16) · small (space/8 / space/12); State: default · hover · selected
• 400 wide in the specimen; fills its column; rows stack at 0 or space/4 — no separators (the rule)

Use when a list of things with a face and a line — publishers, campaigns, templates, people with access, search results — where a Table’s columns would be empty and a Card’s box too much.

Do not use when the rows have three or more comparable numbers (Table, Data table); the list is actions (Dropdown menu) or options (Select item); a single thing on a page (Card).

Relates to Avatar, Icon button - ghost, Button - secondary, Table, Card, Combobox menu, Select item, Aspect ratio, Empty.

Anti-patterns separators between items · a description longer than two lines · two actions where one ⋯ would do · a selected row without its check where a choice is being made · a fill changed on the instance.

Keywords: item, list row, list item, publisher row, template row, people row

Figma — page Item: Item (18 variants)

shadcn: item

The markup — copy this

The class, the parts, and nothing that is not in the package. The same block opens item.css.

<div class="pui-item pui-item--selected">
  <span class="pui-avatar pui-avatar--blue pui-item__media">FK</span>
  <div class="pui-item__texts"><p class="pui-item__title">Cover — split</p><p class="pui-item__description">Used 12 times</p></div>
  <span class="pui-icon pui-item__check">…check…</span>
  <button class="pui-button pui-button--secondary pui-button--small pui-item__button">Open</button>
  <button class="pui-icon-button pui-icon-button--ghost pui-icon-button--small pui-item__action" aria-label="More">…</button></div>

The modifiers

	What it is	Note
Style	(none) default · --outline · --muted	—
Size	(none) default · --small	—
State	:hover · :focus-visible (the hover surface plus the inset ring, the surface alone is 1.0 on a card) · selected = --selected, or [aria-selected=“true”] when the item is a role=“option” inside a role=“listbox” (aria-selected is not valid on a plain div, axe)	—

Accessibility — measured, not assumed

Every number here is measured on the rendered component: contrast (npm run contrast:render), the focus ring (npm run focus) and the keyboard (npm run keyboard). The floors are principle 12’s.

Contrast

ink on ground	reads	floor	the matrix calls it
#544d4d on #e9e9fb	6.87	4.5	Muted ink on the tint (promised)	ok
#634e0f on #fdf3d3	7.2	4.5	Yellow avatar initials (promised)	ok
#544d4d on #ffffff	8.24	4.5	text.muted on surface.page (promised)	ok
#5b0e0d on #f9d3d2	10.09	4.5	Red avatar initials (promised)	ok
#110e56 on #d4d3f7	11.84	4.5	Blue avatar initials (promised)	ok
#0b0202 on #e9e9fb	17.1	4.5	KPI value, blue tile (promised)	ok
#0b0202 on #f2f2f2	18.32	4.5	text.default on surface.sunken (promised)	ok
#0b0202 on #ffffff	20.51	4.5	text.default on surface.page (promised)	ok

8 distinct pair(s) rendered, 0 that axe calls a violation.

The focus ring

primitive	on	the indicator	over	the change
Item	surface/page	shadow-inset #6a66e4 2 px	#ffffff	4.53	ok
Item	surface/card	shadow-inset #6a66e4 2 px	#f2f2f7	4.06	ok
Item	surface/sunken	shadow-inset #6a66e4 2 px	#f2f2f2	4.05	ok

3 of 3 focus stop(s) in this block meet WCAG 2.4.13 on screen — the same crop screenshotted focused and unfocused, and the difference measured.

Keyboard

Nothing in this component claims an ARIA role with a keyboard contract; its controls are ordinary ones and the browser already gives them their keys.

Tab order across the whole library is document order over 344 stops, and Shift+Tab is its exact reverse — no keyboard trap anywhere (WCAG 2.1.2).