Source: _style/objects/_objects.container.scss, line 1

2.1 Container

Page-level constraining and wrapping elements.

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi debitis deserunt ipsum optio perferendis totam velit! Ab dignissimos dolorum id impedit natus odio sint tempore?

<div class="o-container">
    <div class="u-box u-1of1">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi debitis deserunt ipsum optio perferendis totam velit! Ab dignissimos dolorum id impedit natus odio sint tempore?
    </div>
</div>

Source: _style/objects/_objects.layout.scss, line 1

2.2 Layout

Use to align items on page. By default all o-layout__item in an o-layout will have the same width.

Example

o-layout__item

<div class="o-layout">
    <div class="o-layout__item">
        <div class="u-box">o-layout__item</div>
    </div>
    <div class="o-layout__item">
        <div class="u-box">o-layout__item</div>
    </div>
    <div class="o-layout__item">
        <div class="u-box">o-layout__item</div>
    </div>
</div>

Source: _style/utilities/_utilities.alignment.scss, line 1

2.2.1 Layout alignment

Use this modifiers on the o-layout block to specify how the elements should be aligned.

Example

Variable width content

o-layout__item u-1of5

o-layout__item--fit u-justify-content-center

o-layout__item u-1of5

o-layout__item

o-layout__item--fit

o-layout__item u-1of5

Vertical alignment

u-align-items-start

u-align-items-center

u-align-items-end

u-align-self-start

u-align-self-center

u-align-self-end

Horizontal alignment

u-justify-content-start

u-justify-content-center

u-justify-content-end

u-justify-content-around

u-justify-content-between

<h1 class="u-mv">Variable width content</h1>
<div class="o-layout u-justify-content-center u-mb-large">
    <div class="o-layout__item u-1of5">
        <div class="u-box">o-layout__item u-1of5</div>
    </div>
    <div class="o-layout__item o-layout__item--fit">
        <div class="u-box u-pv-none">
            o-layout__item--fit
            u-justify-content-center
        </div>
    </div>
    <div class="o-layout__item u-1of5">
        <div class="u-box">o-layout__item u-1of5</div>
    </div>
</div>

<div class="o-layout u-mb-large">
    <div class="o-layout__item">
        <div class="u-box">o-layout__item</div>
    </div>
    <div class="o-layout__item o-layout__item--fit">
        <div class="u-box u-pv-none">o-layout__item--fit</div>
    </div>
    <div class="o-layout__item u-1of5">
        <div class="u-box">o-layout__item u-1of5</div>
    </div>
</div>

<h1 class="u-mv">Vertical alignment</h1>
<div class="o-layout u-align-items-start u-mb-large" style="min-height: 10rem; background-color: #EBF1FC">
    <div class="o-layout__item">
        <div class="u-box">
            u-align-items-start
        </div>
    </div>
    <div class="o-layout__item">
        <div class="u-box">
            u-align-items-start
        </div>
    </div>
    <div class="o-layout__item">
        <div class="u-box">
            u-align-items-start
        </div>
    </div>
</div>

<div class="o-layout u-align-items-center u-mb-large" style="min-height: 10rem; background-color: #EBF1FC">
    <div class="o-layout__item">
        <div class="u-box">
            u-align-items-center
        </div>
    </div>
    <div class="o-layout__item">
        <div class="u-box">
            u-align-items-center
        </div>
    </div>
    <div class="o-layout__item">
        <div class="u-box">
            u-align-items-center
        </div>
    </div>
</div>

<div class="o-layout u-align-items-end u-mb-large" style="min-height: 10rem; background-color: #EBF1FC">
    <div class="o-layout__item">
        <div class="u-box">
            u-align-items-end
        </div>
    </div>
    <div class="o-layout__item">
        <div class="u-box">
            u-align-items-end
        </div>
    </div>
    <div class="o-layout__item">
        <div class="u-box">
            u-align-items-end
        </div>
    </div>
</div>

<div class="o-layout u-mb-large" style="min-height: 10rem; background-color: #d9e5fc">
    <div class="o-layout__item u-align-self-start">
        <div class="u-box">u-align-self-start</div>
    </div>
    <div class="o-layout__item u-align-self-center">
        <div class="u-box u-pv-none">u-align-self-center</div>
    </div>
    <div class="o-layout__item u-align-self-end">
        <div class="u-box">u-align-self-end</div>
    </div>
</div>

<h1 class="u-mv">Horizontal alignment</h1>
<div class="o-layout u-justify-content-start u-mb-large">
    <div class="o-layout__item u-1of3">
        <div class="u-box">u-justify-content-start</div>
    </div>
    <div class="o-layout__item u-1of3">
        <div class="u-box">u-justify-content-start</div>
    </div>
</div>

<div class="o-layout u-justify-content-center u-mb-large">
    <div class="o-layout__item u-1of3">
        <div class="u-box">u-justify-content-center</div>
    </div>
    <div class="o-layout__item u-1of3">
        <div class="u-box">u-justify-content-center</div>
    </div>
</div>

<div class="o-layout u-justify-content-end u-mb-large">
    <div class="o-layout__item u-1of3">
        <div class="u-box">u-justify-content-end</div>
    </div>
    <div class="o-layout__item u-1of3">
        <div class="u-box">u-justify-content-end</div>
    </div>
</div>

<div class="o-layout u-justify-content-around u-mb-large">
    <div class="o-layout__item u-1of3">
        <div class="u-box">u-justify-content-around</div>
    </div>
    <div class="o-layout__item u-1of3">
        <div class="u-box">u-justify-content-around</div>
    </div>
</div>

<div class="o-layout u-justify-content-between u-mb-large">
    <div class="o-layout__item u-1of3">
        <div class="u-box">u-justify-content-between</div>
    </div>
    <div class="o-layout__item u-1of3">
        <div class="u-box">u-justify-content-between</div>
    </div>
</div>

Source: _style/objects/_objects.layout.scss, line 64

2.2.2 Grid

Make grids combining layout items with widths utilities

Example

1 / 1

1 / 2 - 1 / 1 tablet - 1 / 2 desktop

1 / 3

2 / 3

1 / 4

3 / 4

1 / 5

2 / 5

3 / 5

1 / 5

4 / 5

<div class="o-layout u-mb-40">
    <div class="o-layout__item u-1of1">
        <div class="u-box">1 / 1 </div>
    </div>

    <div class="o-layout__item u-1of2">
        <div class="u-box">1 / 2</div>
    </div>
    <div class="o-layout__item u-1of2">
        <div class="u-box">1 / 2</div>
    </div>

    <div class="o-layout__item u-1of3">
        <div class="u-box">1 / 3</div>
    </div>
    <div class="o-layout__item u-1of3">
        <div class="u-box">1 / 3</div>
    </div>
    <div class="o-layout__item u-1of3">
        <div class="u-box">1 / 3</div>
    </div>
    <div class="o-layout__item u-1of3">
        <div class="u-box">1 / 3</div>
    </div>
    <div class="o-layout__item u-2of3">
        <div class="u-box">2 / 3</div>
    </div>

    <div class="o-layout__item u-1of4">
        <div class="u-box">1 / 4</div>
    </div>
    <div class="o-layout__item u-1of4">
        <div class="u-box">1 / 4</div>
    </div>
    <div class="o-layout__item u-1of4">
        <div class="u-box">1 / 4</div>
    </div>
    <div class="o-layout__item u-1of4">
        <div class="u-box">1 / 4</div>
    </div>
    <div class="o-layout__item u-1of4">
        <div class="u-box">1 / 4</div>
    </div>
    <div class="o-layout__item u-3of4">
        <div class="u-box">3 / 4</div>
    </div>

    <div class="o-layout__item u-1of5">
        <div class="u-box">1 / 5</div>
    </div>
    <div class="o-layout__item u-1of5">
        <div class="u-box">1 / 5</div>
    </div>
    <div class="o-layout__item u-1of5">
        <div class="u-box">1 / 5</div>
    </div>
    <div class="o-layout__item u-1of5">
        <div class="u-box">1 / 5</div>
    </div>
    <div class="o-layout__item u-1of5">
        <div class="u-box">1 / 5</div>
    </div>
    <div class="o-layout__item u-1of5">
        <div class="u-box">1 / 5</div>
    </div>
    <div class="o-layout__item u-2of5">
        <div class="u-box">2 / 5</div>
    </div>
    <div class="o-layout__item u-2of5">
        <div class="u-box">2 / 5</div>
    </div>
    <div class="o-layout__item u-2of5">
        <div class="u-box">2 / 5</div>
    </div>
    <div class="o-layout__item u-3of5">
        <div class="u-box">3 / 5</div>
    </div>
    <div class="o-layout__item u-1of5">
        <div class="u-box">1 / 5</div>
    </div>
    <div class="o-layout__item u-4of5">
        <div class="u-box">4 / 5</div>
    </div>
</div>

Source: _style/objects/_objects.layout.scss, line 74

2.2.3 Grid offset

Make grids combining layout items with widths utilities

Example

none

item

<div class="u-mb-large">
    <div class="o-layout">
        <div class="o-layout__item u-1of2 u-offset1of2">
            <div class="u-box">none</div>
        </div>
        <div class="o-layout__item u-1of2">
            <div class="u-box">none</div>
        </div>
        <div class="o-layout__item u-1of2">
            <div class="u-box">none</div>
        </div>
    </div>
</div>

<div class="u-mb-large">
    <div class="o-layout o-layout--gutter-small">
        <div class="o-layout__item u-1of3 u-offset1of3">
            <div class="u-box">item</div>
        </div>
        <div class="o-layout__item u-1of3">
            <div class="u-box">item</div>
        </div>
        <div class="o-layout__item u-1of3">
            <div class="u-box">item</div>
        </div>
        <div class="o-layout__item u-2of3">
            <div class="u-box">item</div>
        </div>
    </div>
</div>

Source: _style/objects/_objects.layout.scss, line 85

2.2.4 Grid gutter

Example

No gutter

none

Gutter small

item

Gutter default

default

Gutter large

default

Gutter larger

default

Gutter largest

largest

<h1 class="u-mv">No gutter</h1>
<div class="o-layout o-layout--gutter-none">
    <div class="o-layout__item u-1of2">
        <div class="u-box">none</div>
    </div>
    <div class="o-layout__item u-1of2">
        <div class="u-box">none</div>
    </div>
    <div class="o-layout__item u-1of2">
        <div class="u-box">none</div>
    </div>
    <div class="o-layout__item u-1of2">
        <div class="u-box">none</div>
    </div>
</div>

<h1 class="u-mv">Gutter small</h1>
<div class="o-layout o-layout--gutter-small">
    <div class="o-layout__item u-1of2">
        <div class="u-box">item</div>
    </div>
    <div class="o-layout__item u-1of2">
        <div class="u-box">item</div>
    </div>
    <div class="o-layout__item u-1of2">
        <div class="u-box">item</div>
    </div>
    <div class="o-layout__item u-1of2">
        <div class="u-box">item</div>
    </div>
</div>

<h1 class="u-mv">Gutter default</h1>
<div class="o-layout">
    <div class="o-layout__item u-1of2">
        <div class="u-box">default</div>
    </div>
    <div class="o-layout__item u-1of2 ">
        <div class="u-box">default</div>
    </div>
    <div class="o-layout__item u-1of2">
        <div class="u-box">default</div>
    </div>
    <div class="o-layout__item u-1of2">
        <div class="u-box">default</div>
    </div>
</div>

<h1 class="u-mv">Gutter large</h1>
<div class="o-layout o-layout--gutter-large">
    <div class="o-layout__item u-1of2">
        <div class="u-box">default</div>
    </div>
    <div class="o-layout__item u-1of2 ">
        <div class="u-box">default</div>
    </div>
    <div class="o-layout__item u-1of2">
        <div class="u-box">default</div>
    </div>
    <div class="o-layout__item u-1of2">
        <div class="u-box">default</div>
    </div>
</div>

<h1 class="u-mv">Gutter larger</h1>
<div class="o-layout o-layout--gutter-larger">
    <div class="o-layout__item u-1of2">
        <div class="u-box">default</div>
    </div>
    <div class="o-layout__item u-1of2 ">
        <div class="u-box">default</div>
    </div>
    <div class="o-layout__item u-1of2">
        <div class="u-box">default</div>
    </div>
    <div class="o-layout__item u-1of2">
        <div class="u-box">default</div>
    </div>
</div>

<h1 class="u-mv">Gutter largest</h1>
<div class="o-layout o-layout--gutter-largest">
    <div class="o-layout__item u-1of2">
        <div class="u-box">largest</div>
    </div>
    <div class="o-layout__item u-1of2">
        <div class="u-box">largest</div>
    </div>
    <div class="o-layout__item u-1of2">
        <div class="u-box">largest</div>
    </div>
    <div class="o-layout__item u-1of2">
        <div class="u-box">largest</div>
    </div>
</div>

Source: _style/objects/_objects.layout.scss, line 23

2.2.5 Item order

Change the order of an item

Use this modifiers on the o-layout__item element to change the order of a particular item.

Example

1

2

3

4

5

<div class="o-layout">
    <div class="o-layout__item o-layout__item--order2">
        <div class="u-box">1</div>
    </div>
    <div class="o-layout__item o-layout__item--order3">
        <div class="u-box">2</div>
    </div>
    <div class="o-layout__item o-layout__item--order1">
        <div class="u-box">3</div>
    </div>
    <div class="o-layout__item o-layout__item--order5">
        <div class="u-box">4</div>
    </div>
    <div class="o-layout__item o-layout__item--order4">
        <div class="u-box">5</div>
    </div>
</div>

Source: _style/objects/_objects.layout.scss, line 42

2.2.6 Item size

Alignment and auto size

Use o-layout__item--fit on an o-layout__item element to make its width equal to its content width.

Example

fit content

o-layout__item

<div class="o-layout u-mb-large">
    <div class="o-layout__item o-layout__item--fit">
        <div class="u-box ">fit content</div>
    </div>
    <div class="o-layout__item">
        <div class="u-box">o-layout__item</div>
    </div>
</div>

Source: _style/objects/_objects.list-horizontal.scss, line 1

2.3 List horizontal

Stack items horizontally, with spacing between them when necessary

Example

No spacing

1
2
3

Spacing small

1
2
3

Default spacing

1
2
3

Spacing large

1
2
3

Spacing larger

1
2
3

Spacing Largest

1
2
3

Nesting

- 1
- 2
- 1
- 2

<h1 class="u-mv">No spacing</h1>
<ul class="o-list-horizontal o-list-horizontal--spacing-none">
    <li class="o-list-horizontal__item"><div class="u-box">1</div></li>
    <li class="o-list-horizontal__item"><div class="u-box">2</div></li>
    <li class="o-list-horizontal__item"><div class="u-box">3</div></li>
</ul>

<h1 class="u-mv">Spacing small</h1>
<ul class="o-list-horizontal o-list-horizontal--spacing-small">
    <li class="o-list-horizontal__item"><div class="u-box">1</div></li>
    <li class="o-list-horizontal__item"><div class="u-box">2</div></li>
    <li class="o-list-horizontal__item"><div class="u-box">3</div></li>
</ul>

<h1 class="u-mv">Default spacing</h1>
<ul class="o-list-horizontal">
    <li class="o-list-horizontal__item"><div class="u-box">1</div></li>
    <li class="o-list-horizontal__item"><div class="u-box">2</div></li>
    <li class="o-list-horizontal__item"><div class="u-box">3</div></li>
</ul>

<h1 class="u-mv">Spacing large</h1>
<ul class="o-list-horizontal o-list-horizontal--spacing-large">
    <li class="o-list-horizontal__item"><div class="u-box">1</div></li>
    <li class="o-list-horizontal__item"><div class="u-box">2</div></li>
    <li class="o-list-horizontal__item"><div class="u-box">3</div></li>
</ul>

<h1 class="u-mv">Spacing larger</h1>
<ul class="o-list-horizontal o-list-horizontal--spacing-larger">
    <li class="o-list-horizontal__item"><div class="u-box">1</div></li>
    <li class="o-list-horizontal__item"><div class="u-box">2</div></li>
    <li class="o-list-horizontal__item"><div class="u-box">3</div></li>
</ul>

<h1 class="u-mv">Spacing Largest</h1>
<ul class="o-list-horizontal o-list-horizontal--spacing-largest">
    <li class="o-list-horizontal__item"><div class="u-box">1</div></li>
    <li class="o-list-horizontal__item"><div class="u-box">2</div></li>
    <li class="o-list-horizontal__item"><div class="u-box">3</div></li>
</ul>

<h1 class="u-mv">Nesting</h1>
<ul class="o-list-horizontal o-list-horizontal--spacing-largest">
    <li class="o-list-horizontal__item">
        <div class="u-box">
            <ul class="o-list-horizontal o-list-horizontal--spacing-none">
                <li class="o-list-horizontal__item"><div class="u-box">1</div></li>
                <li class="o-list-horizontal__item"><div class="u-box">2</div></li>
            </ul>
        </div>
    </li>
    <li class="o-list-horizontal__item">
        <div class="u-box">
            <ul class="o-list-horizontal">
                <li class="o-list-horizontal__item"><div class="u-box">1</div></li>
                <li class="o-list-horizontal__item"><div class="u-box">2</div></li>
            </ul>
        </div>
    </li>
</ul>

Source: _style/objects/_objects.list-vertical.scss, line 1

2.4 List vertical

Stack items vertically, with spacing between them when necessary

Example

No spacing

1
2
3

Spacing small

1
2
3

Default spacing

1
2
3

Spacing large

1
2
3

Spacing Larger

1
2
3

Spacing Largest

1
2
3

Nesting

- 1
- 2
- 1
- 2

<h1 class="u-mv">No spacing</h1>
<ul class="o-list-vertical o-list-vertical--spacing-none">
    <li class="o-list-vertical__item"><div class="u-box">1</div></li>
    <li class="o-list-vertical__item"><div class="u-box">2</div></li>
    <li class="o-list-vertical__item"><div class="u-box">3</div></li>
</ul>

<h1 class="u-mv">Spacing small</h1>
<ul class="o-list-vertical o-list-vertical--spacing-small u-mv-large">
    <li class="o-list-vertical__item"><div class="u-box">1</div></li>
    <li class="o-list-vertical__item"><div class="u-box">2</div></li>
    <li class="o-list-vertical__item"><div class="u-box">3</div></li>
</ul>

<h1 class="u-mv">Default spacing</h1>
<ul class="o-list-vertical u-mv-large">
    <li class="o-list-vertical__item"><div class="u-box">1</div></li>
    <li class="o-list-vertical__item"><div class="u-box">2</div></li>
    <li class="o-list-vertical__item"><div class="u-box">3</div></li>
</ul>

<h1 class="u-mv">Spacing large</h1>
<ul class="o-list-vertical o-list-vertical--spacing-large u-mv-large">
    <li class="o-list-vertical__item"><div class="u-box">1</div></li>
    <li class="o-list-vertical__item"><div class="u-box">2</div></li>
    <li class="o-list-vertical__item"><div class="u-box">3</div></li>
</ul>

<h1 class="u-mv">Spacing Larger</h1>
<ul class="o-list-vertical o-list-vertical--spacing-larger">
    <li class="o-list-vertical__item"><div class="u-box">1</div></li>
    <li class="o-list-vertical__item"><div class="u-box">2</div></li>
    <li class="o-list-vertical__item"><div class="u-box">3</div></li>
</ul>

<h1 class="u-mv">Spacing Largest</h1>
<ul class="o-list-vertical o-list-vertical--spacing-largest">
    <li class="o-list-vertical__item"><div class="u-box">1</div></li>
    <li class="o-list-vertical__item"><div class="u-box">2</div></li>
    <li class="o-list-vertical__item"><div class="u-box">3</div></li>
</ul>

<h1 class="u-mv">Nesting</h1>
<ul class="o-list-vertical o-list-vertical--spacing-largest">
    <li class="o-list-vertical__item">
        <div class="u-box">
            <ul class="o-list-vertical">
                <li class="o-list-vertical__item"><div class="u-box">1</div></li>
                <li class="o-list-vertical__item"><div class="u-box">2</div></li>
            </ul>
        </div>
    </li>
    <li class="o-list-vertical__item">
        <div class="u-box">
            <ul class="o-list-vertical o-list-vertical--spacing-none">
                <li class="o-list-vertical__item"><div class="u-box">1</div></li>
                <li class="o-list-vertical__item"><div class="u-box">2</div></li>
            </ul>
        </div>
    </li>
</ul>

Style Guide

2.1 Container

Example

2.2 Layout

Example

2.2.1 Layout alignment

Example

Variable width content

Vertical alignment

Horizontal alignment

2.2.2 Grid

Example

2.2.3 Grid offset

Example

2.2.4 Grid gutter

Example

No gutter

Gutter small

Gutter default

Gutter large

Gutter larger

Gutter largest

2.2.5 Item order

Example

2.2.6 Item size

Example

2.3 List horizontal

Example

No spacing

Spacing small

Default spacing

Spacing large

Spacing larger

Spacing Largest

Nesting

2.4 List vertical

Example

No spacing

Spacing small

Default spacing

Spacing large

Spacing Larger

Spacing Largest

Nesting