Components

Sheet and well

A sheet is a raised face on the stage; a well is a sunken field below its surroundings. Elevation, not hue, separates them.

Elevation

data-elevation="flat"Collection

data-elevation="1"Collection

default · rise-2Collection

data-elevation="3"Collection

data-elevation chooses flat, rise-1, rise-2 (the default) or rise-3. Geometry and padding stay with the example.

DemoSurface

The specimen component renders a flat sheet by default and rise-1 with elevation="raised".

flat

Start with the collection overview and its key details.

raised

Continue through each column in reading order.

Well

Inputs, tracks and pressed states sink into a well.

ui-wellA sunken field for entry and selection.

Used on the View transitions guide.

Usage and interface

DemoSurface renders div.ui-sheet. It adds no padding, dimensions, layout or clipping; the example supplies them. elevation="flat" (the default) is a hairline sheet; elevation="raised" maps to data-elevation="1".

<DemoSurface className="p-md">A quiet content surface.</DemoSurface><DemoSurface elevation="raised" className="p-md">A raised layer.</DemoSurface>

<div class="ui-sheet" data-elevation="flat">…</div><div class="ui-sheet" data-elevation="1">…</div><div class="ui-well">…</div>

A sheet uses --ui-surface-sheet and the elevation roles; a well uses --ui-surface-well with --ui-elevation-sink. Never invent a surface color: when a lesson teaches surfaces, use the preset bg-surface-* utilities in the specimen instead.