Base
Basic
Columns automatically resize themselves to fit, and will wrap to a new row when the content can no longer fit.
Column 1
Column 2
Column 3
<div class='o-layout'>
<div class='o-layout__item'>Column 1</div>
<div class='o-layout__item'>Column 2</div>
<div class='o-layout__item'>Column 3</div>
</div>
Sized
We can manually size our columns using width utilities, based on 12 columns.
Column 1
Column 2
Column 3
<div class='o-layout'>
<div class='o-layout__item u-width-2/12'>Column 1</div>
<div class='o-layout__item u-width-5/12'>Column 2</div>
<div class='o-layout__item u-width-5/12'>Column 3</div>
</div>
Responsive
We can use responsive width utility classes to change column sizes depending on the size of the viewport. Here, on smaller screens, column 1 starts full width, with columns 2 and 3 split 50:50. Then once the md breakpoint is hit, column 3 resizes to 6 columns width and the other 2 resize to 3 columns width each.
Column 1
Column 2
Column 3
<div class='o-layout'>
<div class='o-layout__item u-width-12/12 u-width-3/12@md u-mb-small u-mb-none@md'>Column 1</div>
<div class='o-layout__item u-width-6/12 u-width-3/12@md'>Column 2</div>
<div class='o-layout__item u-width-6/12 u-width-6/12@md'>Column 3</div>
</div>
Advanced Responsive
Using the u-width-shrink and u-width-grow utility classes, we can also apply more traditional flexbox behaviour to our layout object. In this example, each column starts full width, then at the md breakpoint, column 1 shrinks down to the smallest its content will allow for, whilst column 2 changes to 4 columns width, and finally column 3 expands to fill whatever remaining space is available.
Column 1
Column 2
Column 3
<div class="o-layout">
<div class="o-layout__item u-width-12/12 u-width-shrink@md">Column 1</div>
<div class="o-layout__item u-width-12/12 u-width-4/12@md">Column 2</div>
<div class="o-layout__item u-width-12/12 u-width-grow@md">Column 3</div>
</div>
Offset
We can also use offset utility classes to shift columns across by a certain amount of columns. Here, we have 2 columns of 4, with the second shift 4 columns across, leaving a gap of 4 columns in the middle.
<div class='o-layout'>
<div class='o-layout__item u-width-4/12'>Column 1</div>
<div class='o-layout__item u-width-4/12 u-offset-4/12'>Column 2</div>
</div>
Modifiers
A list of modifiers for the layout component, allowing you to change its appearance to fit a variety of roles and scenarios.
Modifiers can typically be combined to achieve the desired appearance, unless stated otherwise.
Break
Adding a o-layout__item--break modifier moves all subsequent columns, manually sized or not, to a new row.
Column 1
Column 2
Column 3
Column 4
Column 5
Column 1
Column 2
Column 3
Column 4
Column 5
Column 6
Column 6
<div class="o-layout u-mb-large">
<div class='o-layout__item'>Column 1</div>
<div class='o-layout__item'>Column 2</div>
<div class='o-layout__item'>Column 3</div>
<div class='o-layout__item o-layout__item--break u-mb-small'></div>
<div class='o-layout__item'>Column 4</div>
<div class='o-layout__item'>Column 5</div>
</div>
<div class="o-layout">
<div class='o-layout__item u-width-4/12'>Column 1</div>
<div class='o-layout__item u-width-4/12'>Column 2</div>
<div class='o-layout__item o-layout__item--break u-mb-small'></div>
<div class='o-layout__item'>Column 3</div>
<div class='o-layout__item'>Column 4</div>
<div class='o-layout__item'>Column 5</div>
<div class='o-layout__item'>Column 6</div>
<div class='o-layout__item o-layout__item--break u-mb-small'></div>
<div class='o-layout__item u-width-6/12'>Column 6</div>
</div>
Flush
The flush modifier removes the spacing between individual columns.
Column 1
Column 2
Column 3
<div class='o-layout o-layout--flush'>
<div class='o-layout__item u-width-4/12'>Column 1</div>
<div class='o-layout__item u-width-4/12'>Column 2</div>
<div class='o-layout__item u-width-4/12'>Column 3</div>
</div>
Content Flush
This additional flush modifier allows you to remove the spacing from an individual column.
Column 1
Column 2
Column 3
Column 1
Column 2
Column 3
<div class='o-layout u-mb-regular'>
<div class='o-layout__item o-layout__item--flush u-width-4/12'>Column 1</div>
<div class='o-layout__item u-width-4/12'>Column 2</div>
<div class='o-layout__item u-width-4/12'>Column 3</div>
</div>
<div class='o-layout'>
<div class='o-layout__item u-width-4/12'>Column 1</div>
<div class='o-layout__item o-layout__item--flush u-width-4/12'>Column 2</div>
<div class='o-layout__item u-width-4/12'>Column 3</div>
</div>
Fit
The fit modifier makes all columns fit on a single row which never pushes columns to a new row, regardless of their content.
Column 1
Column 2
Column 3
Column 4
Column 5
<div class='o-layout o-layout--fit'>
<div class='o-layout__item'>Column 1</div>
<div class='o-layout__item'>Column 2</div>
<div class='o-layout__item'>Column 3</div>
<div class='o-layout__item'>Column 4</div>
<div class='o-layout__item'>Column 5</div>
</div>
Fit Height
o-layout--fit-height makes all columns equal height, no matter their content. A variant class for the individual columns called o-layout__item--fit-height exists for individual columns.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id molestie arcu, at sodales lectus. Vivamus varius enim non lectus volutpat, vel auctor tortor efficitur. Praesent vel iaculis dui. Curabitur non tortor libero.
Column 2
Column 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id molestie arcu, at sodales lectus. Vivamus varius enim non lectus volutpat, vel auctor tortor efficitur. Praesent vel iaculis dui. Curabitur non tortor libero.
Column 2
Column 3
<div class='o-layout o-layout--fit-height u-mb-regular'>
<div class='o-layout__item u-width-4/12'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id molestie arcu, at sodales lectus. Vivamus varius enim non lectus volutpat, vel auctor tortor efficitur. Praesent vel iaculis dui. Curabitur non tortor libero.</div>
<div class='o-layout__item u-width-4/12'>Column 2</div>
<div class='o-layout__item u-width-4/12'>Column 3</div>
</div>
<div class='o-layout'>
<div class='o-layout__item u-width-4/12'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id molestie arcu, at sodales lectus. Vivamus varius enim non lectus volutpat, vel auctor tortor efficitur. Praesent vel iaculis dui. Curabitur non tortor libero.</div>
<div class='o-layout__item u-width-4/12'>Column 2</div>
<div class='o-layout__item o-layout__item--fit-height u-width-4/12'>Column 3</div>
</div>
Fit Height Fill
When a --fit-height modifier has been applied to a layout, any o-layout__fill-column and o-layout__fill-row elements within will automatically stretch to fill all available space, irrespective of their content. Depending on the content, you may also need to attach an u-height-full utility class.
<div class="o-layout o-layout--fit-height">
<div class="o-layout__item u-width-12/12 u-width-5/12@md">
<div class="o-box u-p-small">
<ul class="o-list-bare">
<li><a class="c-type-link">Link</a></li>
<li><a class="c-type-link">Link</a></li>
<li><a class="c-type-link">Link</a></li>
<li><a class="c-type-link">Link</a></li>
<li><a class="c-type-link">Link</a></li>
<li><a class="c-type-link">Link</a></li>
<li><a class="c-type-link">Link</a></li>
<li><a class="c-type-link">Link</a></li>
<li><a class="c-type-link">Link</a></li>
<li><a class="c-type-link">Link</a></li>
<li><a class="c-type-link">Link</a></li>
<li><a class="c-type-link">Link</a></li>
<li><a class="c-type-link">Link</a></li>
<li><a class="c-type-link">Link</a></li>
<li><a class="c-type-link">Link</a></li>
<li><a class="c-type-link">Link</a></li>
</ul>
</div>
</div>
<div class="o-layout__item">
<div class="o-box u-p-small o-layout__fill-column u-height-full">
<div class="o-box u-p-small o-layout__fill-column u-height-full c-box c-box--rounded u-theme-very-light">
<div class="o-box u-p-small c-box c-box--rounded u-mb-small">Hello</div>
<div class="o-box u-p-small o-layout__fill-column u-height-full c-box c-box--rounded">
<div class="u-mb-small">Hello</div>
<div class="o-box u-p-small o-layout__fill-column u-height-full c-box c-box--rounded u-theme-very-light">Hello</div>
</div>
</div>
</div>
</div>
</div>
Spacing
Spacing modifiers allow you to change the spacing between columns. These use the values defined in $spacing. Responsive variants are also available.
Column 1
Column 2
Column 3
<div class='o-layout o-layout--spacing-large'>
<div class='o-layout__item u-width-4/12'>Column 1</div>
<div class='o-layout__item u-width-4/12'>Column 2</div>
<div class='o-layout__item u-width-4/12'>Column 3</div>
</div>
