Variables
The max-width of content boxes is controlled using the Root Spacing variables.
Utility Classes
There are 2 widths of content box available for you to use. For each width you can additionally choose whether the element should be aligned left, right or center.
Content Box Med
The medium variants are:
content-med aligned to the center and linked to root-variable --content-med-width
content-med-left aligned to the left and linked to root-variable --content-med-width
content-med-right aligned to the right and linked to root-variable --content-med-width
Content Box Sml
The small variants are:
content-sml aligned to the center and linked to root-variable --content-sml-width
content-sml-left aligned to the left and linked to root-variable --content-sml-width
content-sml-right aligned to the right and linked to root-variable --content-sml-width
Example usage:
<div class="container">
<div class="content-sml-left">Example content</div>
</div>
All content within the content box will be constrained by it's max-width and the box will be aligned left.
Preview examples:
content-sml-left
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
content-sml
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
content-sml-right
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
content-sml
w additional styling
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam