Patterns

2.3.2

Layouts

Content
<div class="layout-wrap w-full shadow-up-2 border-2 border-primary-navy mb-2"><div class="bg-base-white py-6 mx-auto text-center">Content</div></div>

Wrap

The .layout-wrap element will have a maximum width of 1200px.

Content
<div class="layout-content w-full p-4 bg-secondary-grey-30t shadow-up-2 border-2 border-primary-navy mb-2"><div class="mx-auto p-6 bg-base-white text-center">Content</div></div>

Content Layout

The first child of the .layout-content element will have a maximum width of 600px intended for longform content.

Sidebar
<div class="layout-sidebar w-full screen-tablet:flex shadow-up-2 border-2 border-primary-navy mb-2"><div class="bg-base-white p-6"><div class="p-6">Sidebar</div></div><div class="bg-secondary-grey-30t p-6"></div></div>

Layout with Sidebar

The first child of the .layout-sidebar element will have a fixed width of 16rem for sidebar content. The second child’s width will stretch to the end of the viewport’s width.

Cell A
Cell B
Cell C
Cell D
<div class="layout-two-columns-gutter bg-secondary-grey-30t p-4 text-center shadow-up-2 border-2 border-primary-navy mb-2"><div class="bg-base-white p-4">Cell A</div><div class="bg-base-white p-4">Cell B</div><div class="bg-base-white p-4">Cell C</div><div class="bg-base-white p-4">Cell D</div></div>

Two Columns with Gutter

The children of the .layout-two-columns-gutter element will be 50% the width of their parent with an 8px gutter in between. No gutter option is available using .layout-two-columns.

Cell A
Cell B
Cell C
Cell D
Cell E
Cell F
<div class="layout-three-columns-gutter bg-secondary-grey-30t p-4 text-center shadow-up-2 border-2 border-primary-navy mb-2"><div class="bg-base-white p-4">Cell A</div><div class="bg-base-white p-4">Cell B</div><div class="bg-base-white p-4">Cell C</div><div class="bg-base-white p-4">Cell D</div><div class="bg-base-white p-4">Cell E</div><div class="bg-base-white p-4">Cell F</div></div>

Three Columns with Gutter

The children of the .layout-three-columns-gutter element will be 33.3% the width of their parent with an 8px gutter in between. No gutter option is available using .layout-three-columns.

Cell A
Cell B
Cell C
Cell D
Cell E
Cell F
Cell G
Cell H
Cell I
Cell J
<div class="layout-four-columns-gutter bg-secondary-grey-30t p-4 text-center shadow-up-2 border-2 border-primary-navy mb-2"><div class="bg-base-white p-4">Cell A</div><div class="bg-base-white p-4">Cell B</div><div class="bg-base-white p-4">Cell C</div><div class="bg-base-white p-4">Cell D</div><div class="bg-base-white p-4">Cell E</div><div class="bg-base-white p-4">Cell F</div><div class="bg-base-white p-4">Cell G</div><div class="bg-base-white p-4">Cell H</div><div class="bg-base-white p-4">Cell I</div><div class="bg-base-white p-4">Cell J</div><div></div><div></div></div>

Four Columns with Gutter

The children of the .layout-four-columns-gutter element will be 25% the width of their parent with an 8px gutter in between. No gutter option is available using .layout-four-columns.