元件

標籤

在測量版面之外標示條件名稱。

保留原樣或大寫

p-md · gap-sm

Aa

Collection / 024

Aa

Class names and values keep their case; a quiet heading may be uppercase.

為尺度加上標籤

shadow-xs

Quiet separation

Small controls, table rows, and subtle raised states.

shadow-sm

Standard surface

Cards, reusable panels, and quiet product surfaces.

shadow-md

Temporary lift

Hover lift, floating toolbars, and command surfaces.

shadow-lg

Detached overlay

Dropdowns, popovers, toasts, and menus.

shadow-xl

Workflow interruption

Drawers, dialogs, and focused panels.

shadow-2xl

Blocking layer

Modals and spotlight surfaces above a dimmed page.

shadow-inset

Sunken well

Inputs, tracks, pressed states, and recessed wells.

使用於色彩指南.

用法與介面

DemoLabel 使用等寬標籤字體呈現 span.ui-label。文字會照原樣保留（data-case="as-is"），確保 class 名稱與值正確；需要大寫標題時可設定 upper。

<DemoLabel>shadow-sm</DemoLabel><DemoLabel upper>Collection / 024</DemoLabel>

<span class="ui-label" data-case="as-is">shadow-sm</span><span class="ui-label">Collection / 024</span>

除非標籤本身就是教學主體，否則應放在需要測量的 flex、grid 或 float 父元素之外。