Center
The Center layout horizontally centers layout elements with a configurable maximum width. This component is designed to create centered containers that won't exceed a specified threshold width, making it ideal for content areas that need to remain readable and well-proportioned across different screen sizes.
Example
<div class="center --threshold-4">
<h1>Centered Content</h1>
<p>
This content will be centered horizontally and won't exceed the threshold
width.
</p>
</div>Custom Properties
| Property | Default | Description |
|---|---|---|
--layout-threshold |
100% |
Maximum width of the centered element |
Class Utilities
| Class | Description |
|---|---|
.--threshold-* |
Controls the maximum width using Feo.css design tokens for breakpoints |