Class Reference
Structure
Class Reference
Structure
Page wrappers, content widths and section spacing.
How to use
Use a vertical section class and padding-global on the section. Use content-wrapper with padding-none inside it. The wrapper controls maximum width, while the section controls the gutters.
Responsive behavior
Fluid variables scale spacing and widths with the viewport. A full-bleed section uses padding-x-none instead of padding-global.
Visual reference
Live examples use the installed class styles and your current design variables. Previews expand to show the full example; responsive classes follow the browser width.
Content width
Content
Content
Content
Content
This section has a minimum height of 100svh: the small viewport height, with the browser controls visible. Unlike dvh, this height stays stable as browser controls appear or disappear.
Content
Content width
Content width
Content width
Content width
Content width
Content width
Content width
Content width
Content width
Content width
123
123
Content width