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.

Team Meeting Weekly team sync-up
9:00 AM - 10:00 AM Confirmed
Client Presentation Quarterly review with XYZ Corp
2:00 PM - 3:30 PM Tentative
Project Deadline Submit final deliverables for Project Alpha
11:59 PM Important
Code Review Review pull requests for Project Beta
3:30 PM - 4:30 PM High Priority
Team Meeting Weekly team sync-up
9:00 AM - 10:00 AM Confirmed
Client Presentation Quarterly review with XYZ Corp
2:00 PM - 3:30 PM Tentative
Project Deadline Submit final deliverables for Project Alpha
11:59 PM Important
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

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.

Team Meeting Weekly team sync-up
9:00 AM - 10:00 AM Confirmed
Client Presentation Quarterly review with XYZ Corp
2:00 PM - 3:30 PM Tentative
Project Deadline Submit final deliverables for Project Alpha
11:59 PM Important
Code Review Review pull requests for Project Beta
3:30 PM - 4:30 PM High Priority
Team Meeting Weekly team sync-up
9:00 AM - 10:00 AM Confirmed
Client Presentation Quarterly review with XYZ Corp
2:00 PM - 3:30 PM Tentative
Project Deadline Submit final deliverables for Project Alpha
11:59 PM Important
Item Emphasis Levels 
<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.

1
Team Meeting Weekly team sync-up
9:00 AM - 10:00 AM Confirmed
2
Client Presentation Quarterly review with XYZ Corp
2:00 PM - 3:30 PM Tentative
3
Project Deadline Submit final deliverables for Project Alpha
11:59 PM Important
4
Code Review Review pull requests for Project Beta
3:30 PM - 4:30 PM High Priority
1
Team Meeting Weekly team sync-up
9:00 AM - 10:00 AM Confirmed
2
Client Presentation Quarterly review with XYZ Corp
2:00 PM - 3:30 PM Tentative
3
Project Deadline Submit final deliverables for Project Alpha
11:59 PM Important
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.

Team Meeting Weekly team sync-up
9:00 AM - 10:00 AM Confirmed
Client Presentation Quarterly review with XYZ Corp
2:00 PM - 3:30 PM Tentative
Project Deadline Submit final deliverables for Project Alpha
11:59 PM Important
Code Review Review pull requests for Project Beta
3:30 PM - 4:30 PM High Priority
Team Meeting Weekly team sync-up
9:00 AM - 10:00 AM Confirmed
Client Presentation Quarterly review with XYZ Corp
2:00 PM - 3:30 PM Tentative
Project Deadline Submit final deliverables for Project Alpha
11:59 PM Important
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>

Rich Text

Display formatted paragraphs with alignment and size variants

Previous

Table

Create data tables optimized for 1-bit rendering

Next
Framework Index