Container
The tray head holds a container range, Fit and the live width. The wrapper changes; the page viewport does not.
A query card
Query card
Media
A visual region
Content
Stacks when this wrapper narrows.
Below 18rem of container width the regions stack.
A whole page instead
When the lesson is about the viewport, show the real page in a browser instead of a container.
Workspace layout
Adjust the iframe viewport. Scroll inside the preview to see all content.
Used on the Responsive Design guide.
Usage and interface
DemoContainer renders a complete tray: title and the width tools in the ui-tray-head, the measured wrapper on a ui-stage, and an optional caption. maxWidth (720 by default) bounds the range; Fit restores the available width.
<DemoContainer title="Card width" caption="The card stacks below 18rem." maxWidth={720}> <div className="container-inline"> <article className="p-md">The card owns its containment.</article> </div></DemoContainer>The page viewport remains unchanged. Keep the query boundary and responsive descendants in the example; the wrapper carries data-demo-container and only its width.