Item
The Item component provides a flexible container for displaying content with optional metadata and indexing. It's commonly used for lists, schedules, and other content that needs consistent formatting.
Item Variants
Items can be displayed in three different variants: with meta and index, with meta only, or in a simple format. Each variant provides different levels of visual hierarchy and information density.
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>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>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>Related Tokens
These tokens are automatically mapped to this page by token prefix.
| Token | 1-bit | 2-bit | Density 2x | 4/8/16-bit |
|---|---|---|---|---|
| Base | ||||
--item-index-font-family
|
"NicoPups" | "NicoPups" | "Inter Variable", Inter | — |
--item-index-font-size
|
16px | 16px | calc(13px * var(--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
|
10px | 10px | — | calc(10px * var(--ui-scale)) |