컴포넌트

레이블

측정하는 레이아웃 밖에 조건 이름을 표시합니다.

원문 그대로 또는 대문자

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 부모 요소 밖에 배치하세요.