Center
Center the box. Settings also allow for centering of child elements and centering of text.
Usage
Lorem ipsum dolor sit amet, consectetur adipisicing elit
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
<div data-unitone-layout="center">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div data-unitone-layout="center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>Props
HTML -with-text / JSX withText
Text is also centered.
<div data-unitone-layout="center -with-text">
...
</div>HTML -gutters:{variation} / JSX gutters={variation}
Gutters.
Can be set from -2 to 7. For variations 2 and above, clamp is used to adjust the margins so that they do not become too large on small screens.
<div data-unitone-layout="center -gutters:1">
...
</div>HTML --unitone--max-width / JSX maxWidth={value}
Max width.
<div data-unitone-layout="center" style="--unitone--max-width: 400px">
...
</div>