DeviceStage
One device centred, with up to four small cards floating around it.
Offline sync
Review
Signage brief
Depot signage
Icon audit
Harbour rebrand
Offline sync
Review
Signage brief
Depot signage
Icon audit
Harbour rebrand
Offline sync
Review
Signage brief
Depot signage
Icon audit
Harbour rebrand
In context
Tideline mobile
Offline tasks and a quiet inbox for the crew.
Offline sync
Review
Signage brief
Depot signage
Icon audit
Harbour rebrand
Props
| Prop | Type | Required | Default |
|---|---|---|---|
children | ReactNode | Yes | — |
floats | DeviceStageFloat[] | undefined | No | [] |
glow | boolean | undefined | No | false |
Layout rules
The stage's height comes from the device. Set the device's width with --rebar-device-stage-device-width (default 16rem). Each float hugs the device, overlapping its edge by 15% of the float's own width, and is capped by the side gutter so it never clips or causes horizontal scroll.
Below 480px of the stage's own width (a container query) the floats become one-line chips just outside the device's corners. data-rebar-compact mirrors this on the root and on each float; top is ignored in compact mode.
Accessibility
The device comes first in the DOM and the floats follow. Each float is a role="group" named by its label (or "Related detail"). The floats carry real text, so they are not aria-hidden.
data-rebar-* attributes
data-rebar-component="device-stage", data-rebar-glow and data-rebar-compact on the root; data-rebar-part values area, device and float (with data-rebar-side, data-rebar-slot and data-rebar-compact). Each float's card is a FloatCard.
Migrating to Ant Design
Not codemod-covered. Ant Design has no equivalent; this is a bespoke layout.