Design system · Component review 10

Demo measure

Measurements should explain an actual box boundary. The adopted shared measure gives the dimensions clearer hierarchy while retaining the Guide’s thin ruler language.

Approved default direction: the shared DemoMeasure uses the refined annotation. Use the width slider and detail toggle to test both axes. The controls sit outside the measured object.

Live content bounds

The previous and adopted treatments measure the same panel. The original Guide demonstrates its own draggable ruler, which remains unchanged.

01

Original Guide

Drag-to-resize ruler

Workspace layout

Drag the edge to reveal the original viewport ruler.

The layout-system Guide uses ResizeZone. Its ruler appears while dragging on desktop; the content stays inside the resizable boundary.

02

Previous

Earlier shared DemoMeasure

Content bounds
Collection panel

The subject stays inside its measured boundary.

The ruler reports the actual rendered box. At narrow widths, the available space can be less than the requested width.

The current label and bracket line show the observed width and height above the object.

03

Adopted

Readable bounds annotation

Content boundsMeasuring…
Collection panel

The subject stays inside its measured boundary.

The ruler reports the actual rendered box. At narrow widths, the available space can be less than the requested width.

A separated name and numeric readout sit above a full-width fine ruler. ResizeObserver still measures the content wrapper.

Actual Reference use

The width reference compares a fixed 192px object with a fluid object in the same containing block.

Open /reference/width
Set a fixed or fluid width
The dashed outline is the authored containing block. Read the actual blue border-box width alongside its parent.

The Reference keeps its own true browser measurements. A shared annotation must report the box it observes rather than a requested CSS width.