This paragraph appears before the layout component to show how it fits within content flow. Layout classes control the width and positioning of components, allowing for flexible content presentation across different viewport sizes. Notice how the text naturally wraps and adapts to the container width.
This paragraph appears after the layout component to demonstrate spacing and width constraints. Each layout variant has specific maximum widths and responsive behaviors that ensure optimal readability and visual hierarchy. The spacing between components is controlled by the component gap variable for consistent vertical rhythm.
Layout classes control component width, height, and positioning using CSS custom properties. All layout classes must be used with the layout-component base class to function properly.
Standard article content width, optimal for readability
Wide content areas for images, videos, and larger components
Full viewport width up to 1740px for immersive content
Full viewport width, no max-width constraint
Full viewport coverage, height calculated as 100vh minus header height
One side matches normal content width, other side matches ultrawide
Always combine a layout modifier with the base layout-component class:
<!-- HTML --> <div class="layout-component layout-normal">Normal width content</div> <div class="layout-component layout-wide">Wide content</div> <img class="layout-component layout-fullwidth" src="..." /> <!-- React JSX --> <div className="layout-component layout-normal">Normal width</div> <div className="layout-component layout-wide layout-padded"> Wide with padding </div>