Components

Label

A label names the condition, value or class a specimen shows. It sits above or beside the subject, never inside the measured layout.

As written or uppercase

p-md · gap-sm

Collection / 024

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

Labelling a scale

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.

Used on the Colors guide.

Usage and interface

DemoLabel renders span.ui-label in the mono label face. It keeps its text as written (data-case="as-is") so class names and values stay exact; set upper for an uppercase heading.

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

Place a label outside any measured flex, grid or float parent unless the label is the lesson.