Mantra Examples

Available components

Story frame

ID: mantra_examples:story_frame

A frame to show a story or an example in, at a container size and a zoom level of its own. The content is laid out at the width the frame is given -- and the frame is a size container, so container queries inside it answer to that width -- then scaled to the zoom level, so a desktop layout can be looked at whole on a narrow page. Media queries cannot be simulated this way: they keep answering to the browser window. A component that wants its narrow layout shown in the frame repeats its media query rules in a `@container story-frame-viewport (...)` query: the frame is always a container of that name, and no page outside a frame has one. Meant to be used in the `library_wrapper` of a story, with the story passed as the content slot.

Status: experimental

Name Label Type Description
content Content Slot The story or the example to show.
label Label String A caption for the frame, shown above it.
width Width String The inline size the content is laid out at, as a CSS length: `384px`, `48rem`, `60%`. Leave empty for the full width of the frame.
height Height String A fixed block size, as a CSS length. The content scrolls inside it. Leave empty to let the frame grow with its content.
zoom Zoom Number The scale the content is shown at: 1 is 100%, 0.5 is 50%.
Default: 1
Minimum: 0.1
Maximum: 0.1
fit Fit to width Boolean Zoom out as far as needed for the content to fit the width available, and never in. Takes precedence over the zoom level.
Default: false
container_name Container name String A `container-name` for the frame beside `story-frame-viewport`, which it always has, for a component whose container queries name the container they answer to.
controls Controls Boolean Show the toolbar for changing the width and the zoom level.
Default: true
resizable Resizable Boolean Show a handle on the inline end of the content for dragging its width, or moving it with the arrow keys once focused. A double click on the handle goes back to the full width.
Default: true
sizes Sizes List The widths the toolbar offers, as CSS lengths. By default 256, 320, 384, 512, 640, 768, 1024 and 1440 pixels.
Phone width

A heading

At 320px, this paragraph wraps where it would in a container of that width. The readout in the toolbar gives the width the content is laid out at and the zoom level it is shown at.

Desktop width

A heading

At 1440px, this paragraph wraps where it would in a container of that width. The readout in the toolbar gives the width the content is laid out at and the zoom level it is shown at.