Item
A row for lists, schedules, and other repeating content, with optional meta text, an index, or an icon. Stack items in a Layout and let the Overflow engine handle the ones that do not fit.
Item Variants
Items can be displayed in four variants: with meta and index, with meta only, with meta emphasis levels, or in a simple format. Each variant provides different levels of visual hierarchy and information density.
With Meta
This variant includes a meta section without an index, providing space for optional metadata while maintaining a clean appearance.
Item
With Meta
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="title title--small">Team Meeting</span>
<span class="description">Weekly team sync-up</span>
<div class="flex gap--small">
<span class="label label--small label--underline">9:00 AM - 10:00 AM</span>
<span class="label label--small label--underline">Confirmed</span>
</div>
</div>
</div>With Meta Emphasis
Items support three emphasis levels: default, emphasis-2, and emphasis-3. Apply item--emphasis-2 or item--emphasis-3 to progressively darken the meta bar and draw attention.
Item
Emphasis Levels
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="title title--small">Team Meeting</span>
<span class="description">Weekly team sync-up</span>
<div class="flex gap--small">
<span class="label label--small label--underline">9:00 AM - 10:00 AM</span>
<span class="label label--small label--underline">Confirmed</span>
</div>
</div>
</div>
<div class="item item--emphasis-2">
<div class="meta"></div>
<div class="content">
<span class="title title--small">Client Presentation</span>
<span class="description">Quarterly review with XYZ Corp</span>
<div class="flex gap--small">
<span class="label label--small label--underline">2:00 PM - 3:30 PM</span>
<span class="label label--small label--underline">Tentative</span>
</div>
</div>
</div>
<div class="item item--emphasis-3">
<div class="meta"></div>
<div class="content">
<span class="title title--small">Project Deadline</span>
<span class="description">Submit final deliverables for Project Alpha</span>
<div class="flex gap--small">
<span class="label label--small label--underline">11:59 PM</span>
<span class="label label--small label--underline">Important</span>
</div>
</div>
</div>With Meta and Index
The most detailed variant includes both a meta section and an index number, useful for ordered lists or when additional context is needed.
Item
With Meta and Index
<div class="item">
<div class="meta">
<span class="index">1</span>
</div>
<div class="content">
<span class="title title--small">Team Meeting</span>
<span class="description">Weekly team sync-up</span>
<div class="flex gap--small">
<span class="label label--small label--underline">9:00 AM - 10:00 AM</span>
<span class="label label--small label--underline">Confirmed</span>
</div>
</div>
</div>Simple
The simplest variant focuses purely on content, ideal for basic lists or when metadata isn't needed.
Item
Simple
<div class="item">
<div class="content">
<span class="title title--small">Team Meeting</span>
<span class="description">Weekly team sync-up</span>
<div class="flex gap--small">
<span class="label label--small label--underline">9:00 AM - 10:00 AM</span>
<span class="label label--small label--underline">Confirmed</span>
</div>
</div>
</div>With Icon
Add an icon div between meta and content to display an icon alongside the item.
Give monochrome icons the image--adaptive class so they follow the
screen's semantic text-primary paint across Raw/Preview, themes, and dark mode (see
Image
Image
Optimize images using dithering techniques for 1-bit rendering
Place images on a screen and control their size, object fit, and inversion. On 1-bit displays, dithering arranges black and white pixels so an image still reads as shades of gray.
).
Item
With Icon
<div class="layout">
<div class="item">
<div class="meta"></div>
<div class="icon">
<img src="path/to/icon.svg" class="image--adaptive w--[6cqw] h--[6cqh] portrait:w--[10cqw] portrait:h--[10cqh]" />
</div>
<div class="content">
<span class="value value--small">72°</span>
<span class="label">Temperature</span>
</div>
</div>
</div>Filling Spare Space
An item sizes to its content. Add item--shrink
to make it flexible instead: it grows into the container's spare space along the main axis and gives that
space back when the container runs tight.
Use it for the one item that should absorb the leftover room, such as the body row above a fixed footer row. Applying it to every item in a container splits the space between them.
<div class="flex flex--col h--36">
<div class="item item--shrink">
<div class="meta"></div>
<div class="content">
<span class="value value--small">72°</span>
<span class="label">Temperature</span>
</div>
</div>
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="label label--small">Updated 4 min ago</span>
</div>
</div>
</div>List component (deprecated)
The .list class is deprecated. Prefer a column component, flex column, grid column, or a layout wrapper with a
Gap
Gap
Set precise spacing between elements with predefined gap values
Utility classes for the space between the children of a flex, grid, or column container. Predefined sizes, arbitrary values, distribution modifiers, and responsive variants.
utility instead. The
Overflow
Overflow
Handle column items overflow
The Overflow engine automatically lays out items into up to N columns and adds an "and X more" label when content exceeds the available height. It also applies text clamping per-column width and handles grouped headers without leaving orphaned headings.
engine still supports legacy .list for backward compatibility.
Related Tokens
These tokens are automatically mapped to this page by token prefix.
| Token | 1-bit | 2-bit | Density 2x | 4-bit and up |
|---|---|---|---|---|
| Base | ||||
--item-index-font-family
|
"NicoPups" | "NicoPups" | "Inter Variable", Inter | - |
--item-index-font-size
|
calc(16px * var(--text-ui-scale)) | calc(16px * var(--text-ui-scale)) | calc(13px * var(--text-ui-scale)) | - |
--item-index-font-smoothing
|
none | none | auto | - |
--item-index-font-weight
|
400 | 400 | 600 | - |
--item-index-line-height
|
1 | 1 | 1 | - |
--item-meta-width
|
calc(10px * var(--ui-scale)) | calc(10px * var(--ui-scale)) | - | calc(10px * var(--ui-scale)) |
Related APIs
Theming the item
A theme can re-point the item's paint through its named
slots
(item-meta, item-meta-emphasis-2, item-meta-emphasis-3)
without touching geometry. Slots take palette token references, so the surface still resolves through the
device mode at render time. See
Theme Slots
Theme Slots
Every themable surface: semantic channels, component slots, utility remaps, border lines, and the chart ramp
Every surface a theme can re-point, with the mixin that sets it: semantic channels, component slots, utility remaps, border lines, and the chart ramp. Slots take token references, so each one still resolves through the device mode at render time.
for every slot and mixin.
@include theme-slots.text-slot("item-meta", "black");