Wrapper
Page-level constraining and wrapping elements.
Where is it?
The Wrapper object is located in 5-Objects/_objects.wrapper.scss.
Elements
The Wrapper Object hasn't elements.
Usage
The maximum width provided by the Wrapper object is larger than the available in this document.
<p class="o-wrapper">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, reiciendis
fugiat ut voluptate fugit uisquam modi maiores, perspiciatis quasi praesentium
ab vel at repellat amet atque?
</p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, reiciendis fugiat ut voluptate fugit uisquam modi maiores, perspiciatis quasi praesentium ab vel at repellat amet atque?
Size modifiers
Use the size modifiers to change the gutter of the wrapped item.
| Class | Object's gutter |
|---|---|
| o-wrapper--flush | 0 |
| o-wrapper--tiny | $global-spacing-unit-tiny |
| o-wrapper--small | $global-spacing-unit-small |
| o-wrapper--large | $global-spacing-unit-large |
| o-wrapper--huge | $global-spacing-unit-huge |
$global-spacing-unit map is located in 1-Settings/_settings.core.scss
Usage
.o-wrapper--flush
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, reiciendis fugiat ut voluptate fugit uisquam modi maiores, perspiciatis quasi praesentium ab vel at repellat amet atque?
.o-wrapper--tiny
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, reiciendis fugiat ut voluptate fugit uisquam modi maiores, perspiciatis quasi praesentium ab vel at repellat amet atque?
.o-wrapper--small
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, reiciendis fugiat ut voluptate fugit uisquam modi maiores, perspiciatis quasi praesentium ab vel at repellat amet atque?
.o-wrapper--large
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, reiciendis fugiat ut voluptate fugit uisquam modi maiores, perspiciatis quasi praesentium ab vel at repellat amet atque?
.o-wrapper--huge
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, reiciendis fugiat ut voluptate fugit uisquam modi maiores, perspiciatis quasi praesentium ab vel at repellat amet atque?
← Media