Frame

A side/main split in which the main area can shrink and scroll. These classes belong to the opt-in Official preset. Add @presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight used alongside these structural shortcuts.

Classes

• frame, frame-side, frame-main

Example

The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.

<div class="frame">
  <aside class="frame-side" aria-label="Sections">Section links</aside>
  <main class="frame-main">Long-form content</main>
</div>

Variants and composition

frame-side reserves side width while frame-main takes the remaining room. Either region can appear first in DOM order. Set --frame-offset at the frame when a sticky header occupies viewport space; its default is 0px.

Behavior and accessibility

Keep meaningful DOM reading order even when the side region appears first visually. Wide main content should scroll inside frame-main rather than pushing the side away.

Reference

See the interactive Storybook specimen ↗. Continue to Hero or return to the Official preset overview.