コンポーネント

ラベル

測定対象のレイアウト外に条件名を示します。

原文のまま、または大文字

p-md · gap-sm

Collection / 024

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 の親要素の外に置きます。