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.

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>

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>

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>