Components

Tray and stage

One example is one tray. Its head names the example and holds its tools; the lit stage shows the specimen; the code window keeps the source with a closed Generated CSS disclosure; the caption says what to notice.

A complete example

Padding around the group, gap between items

<div class="grid-cols(3) gap-md p-md">  <div>01</div>  <div>02</div>  <div>03</div></div>

Generated CSS

.grid-cols\(3\) {  display: grid;  grid-template-columns: repeat(3, minmax(0, 1fr))}.gap-md {  gap: var(--spacing-md)}.p-md {  padding: var(--spacing-md)}

The hatch shows p-md around the grid and gap-md between its children.

Stage only

Without a head or source the tray is a quiet frame around one specimen; a lone caption names the figure.

Subject

A caption alone describes the figure.

Used on the Syntax Tutorial.

Usage and interface

Demo renders one figure.ui-tray: an optional ui-tray-head (title, description, controls), a ui-stage holding the children, an optional source, and a ui-tray-caption. class and style belong to the stage, so the chrome never joins the demonstrated layout. The stage centers its specimen; align="start" places it from the start edge.

<Demo title="Collection" caption="The card follows its container." source={<>  <Code lang="html">{html}</Code>  <DemoGeneratedCSS><Code lang="css" beautify>{css}</Code></DemoGeneratedCSS></>}>  <DemoSurface className="p-lg">Room for the details.</DemoSurface></Demo>

<figure class="ui-tray">  <figcaption class="ui-tray-head"><div><p class="ui-tray-title">Collection</p></div></figcaption>  <div class="ui-stage">…</div>  <div class="ui-code">…</div>  <details class="ui-disclosure"><summary>Generated CSS</summary>…</details>  <div class="ui-tray-caption">The card follows its container.</div></figure>

padding="sm" and padding="none" map to data-padding on the stage for scenes with their own spacing. Add frame="none" when the content already owns its frame: a DemoViewport browser, a ui-compare or a code window. DemoGeneratedCSS is always closed by default. Keep labels and controls outside a measured flex, grid or float parent.

#Purposeful backgrounds

Choose the stage background for the behavior being explained; most examples use the plain lit stage. background maps to data-background on ui-stage.

Plain

The default lit stage for reading a complete example.

Hatch

Mark measured gaps, padding or otherwise empty space.

Grid

Inspect alignment and positioning against regular lines.

Dots

Compare placement against a sparse grid.

Checkerboard

Reveal transparency in an image or painted surface.