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 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.
<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
Apply item--emphasis-1
, item--emphasis-2
or item--emphasis-3
to progressively darken the meta bar and draw attention. Level 1 is the default styling.
<div class="item item--emphasis-1">
<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.
<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.
<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>