Components

Item

An item stands for content inside a specimen. Neutral is the context; a named tone marks the subject or a comparison, and a legend or label always names it.

Tone and paint

softsolidoutlineghost
neutral
Aa
Aa
Aa
Aa
blue
Aa
Aa
Aa
Aa
violet
Aa
Aa
Aa
Aa
amber
Aa
Aa
Aa
Aa
green
Aa
Aa
Aa
Aa
red
Aa
Aa
Aa
Aa
Tone chooses the hue; variant chooses the paint. Neither changes the item’s size.

In a lesson

The example supplies the layout: here a hatched padding box and a gap between three items.

01
02
03
  • Context
  • Subject

Used on the Layout System guide.

Usage and interface

DemoItem renders div.ui-item, a raised tile with a 3rem minimum and centered content. tone (neutral, blue, violet, amber, green, red) maps to data-tone; variant (soft, solid, outline, ghost) maps to data-variant. Utilities on the item set its size and layout.

<Demo>  <div className="flex gap-sm">    <DemoItem>Context</DemoItem>    <DemoItem tone="blue">Subject</DemoItem>  </div></Demo>
<div class="ui-item">Context</div><div class="ui-item" data-tone="blue">Subject</div><div class="ui-item" data-tone="violet" data-variant="outline">Compare</div>

Use neutral for context, blue for the subject and violet for a comparison; name every tone with a legend or label. The item is a noninteractive div; use a native button or link for an action.