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
TRMNL Logo 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
TRMNL Logo 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
TRMNL Logo 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
TRMNL Logo 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.

72° Temperature
12 mph Wind Speed
6 UV Index
Sunny Today
Partly Cloudy Tomorrow
Rainy Wednesday
TRMNL Logo Item With Icon 
<div class="layout">
  <div class="item">
    <div class="meta"></div>
    <div class="icon">
      <img src="path/to/icon.svg" class="w--[6cqw] h--[6cqw] portrait:w--[10cqw] portrait:h--[10cqw]" />
    </div>
    <div class="content">
      <span class="value value--small">72°</span>
      <span class="label">Temperature</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 utility instead. The Overflow 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/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))