Center

Center a container and set a max width of 1200px which is the widest the page should ever be.

Centered content with a max width of 1200px.

Four Up Layout

Creates a four-column layout using flexbox. The columns stack below breakpoint x-small (~704px). Between breakpoints x-small (~704px) and breakpoint small (~880px) the display shifts to a 2x2 grid

Column
Column
Column
Column

Grid

Create a dynamic 1, 2, 3 or 4 column grid.

Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
.l-grid--clean
Modifier to remove bottom margins on each column.
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
.l-grid--space-between
Use space between instead of margins for gutters. This is useful for mixed width columns.
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column

Offset Two-Column Layout

This layout is used on the Stories content type.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo.
Image or blockquote here
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper.
Left Column

Margin

Add margin above or below a container. By default margin is added to the bottom.

Margin content
Margin content
.l-margin--top
By default there's no margin added to the top. Add top margin using this modifier.
Margin content
Margin content

Padded

Add padding around a container so it's not full width. Uses padding on the sides by default.

Padded content
.l-padded--top
By default there's no padding added to the top. Add top padding using this modifier.
Padded content
.l-padded--bottom
By default there's no padding added to the bottom. Add bottom padding using this modifier.
Padded content

Split 65% 35%

Split-65-35 is a two-column layout in which the left column is 65% and the right column is 35%.

Left Column (~64%)
Right Column (~34%)

Three Up Layout

Creates a three-column layout using flexbox. The columns stack below breakpoint small (~880px).

Column
Column
Column

Two Up Layout

Creates a two-column layout using flexbox

Column
Column
.l-two-up--30-70
Two column layout with left column is 30% wide
Column
Column
.l-two-up--70-30
Two column layout with left column is 70% wide
Column
Column