項目

色調與繪製

在教學中

版面由範例提供：此處為斜線 padding 方框與三個項目之間的 gap。

使用於 版面系統指南.

用法與介面

DemoItem 會呈現 div.ui-item，這是最小尺寸為 3rem、內容置中的浮起圖塊。tone（neutral、blue、violet、amber、green、red）對應 data-tone；variant（soft、solid、outline、ghost）對應 data-variant。圖塊上的 utilities 決定尺寸與版面。

<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>

背景脈絡使用 neutral，主體使用 blue，比較對象使用 violet；每種色調都要透過圖例或標籤說明。圖塊是不可互動的 div，操作應使用原生按鈕或連結。