Skip to main content

Patterns

Layouts

Column A
Column B
<div class="layout--columns flex text-center">
  <div class="bg-color-grey-light p-4">Column A</div>
  <div class="bg-color-grey-lightest p-4">Column B</div>
</div>
Row A
Row B
<div class="layout--rows text-center">
  <div class="bg-color-grey-light p-4">Row A</div>
  <div class="bg-color-grey-lightest p-4">Row B</div>
</div>
Row A
Row B
<div class="layout--gutter bg-color-grey-lightest p-4 text-center">
  <div class="bg-color-grey-light p-4">Row A</div>
  <div class="bg-color-grey-light p-4">Row B</div>
</div>
Cell A
Cell B
Cell C
Cell D
<div class="layout--columns-gutter bg-color-grey-lightest p-4 text-center">
  <div class="bg-color-grey-light p-4">Cell A</div>
  <div class="bg-color-grey-light p-4">Cell B</div>
  <div class="bg-color-grey-light p-4">Cell C</div>
  <div class="bg-color-grey-light p-4">Cell D</div>
</div>
Cell A
Cell B
Cell C
Cell D
Cell E
<div class="layout--two-columns-gutter bg-color-grey-lightest p-4 text-center">
  <div class="bg-color-grey-light p-4">Cell A</div>
  <div class="bg-color-grey-light p-4">Cell B</div>
  <div class="bg-color-grey-light p-4">Cell C</div>
  <div class="bg-color-grey-light p-4">Cell D</div>
  <div class="bg-color-grey-light p-4">Cell E</div>
  <div></div>
</div>
Cell A
Cell B
Cell C
Cell D
Cell E
Cell F
Cell G
Cell H
<div class="layout--three-columns-gutter bg-color-grey-lightest p-4 text-center">
  <div class="bg-color-grey-light p-4">Cell A</div>
  <div class="bg-color-grey-light p-4">Cell B</div>
  <div class="bg-color-grey-light p-4">Cell C</div>
  <div class="bg-color-grey-light p-4">Cell D</div>
  <div class="bg-color-grey-light p-4">Cell E</div>
  <div class="bg-color-grey-light p-4">Cell F</div>
  <div class="bg-color-grey-light p-4">Cell G</div>
  <div class="bg-color-grey-light p-4">Cell H</div>
  <div></div>
</div>
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-color-grey-lightest p-4 text-center">
  <div class="bg-color-grey-light p-4">Cell A</div>
  <div class="bg-color-grey-light p-4">Cell B</div>
  <div class="bg-color-grey-light p-4">Cell C</div>
  <div class="bg-color-grey-light p-4">Cell D</div>
  <div class="bg-color-grey-light p-4">Cell E</div>
  <div class="bg-color-grey-light p-4">Cell F</div>
  <div class="bg-color-grey-light p-4">Cell G</div>
  <div class="bg-color-grey-light p-4">Cell H</div>
  <div class="bg-color-grey-light p-4">Cell I</div>
  <div class="bg-color-grey-light p-4">Cell J</div>
  <div></div>
  <div></div>
</div>
Body
<div class="layout--home-body bg-color-grey-lightest p-4 text-center">
  <div class="bg-color-grey-light p-4">Body</div>
</div>
Topbar
Body
<div class="wrap">
  <article class="layout--topbar text-center">
    <header class="bg-color-blue-dark text-color-white p-4">Topbar</header>
    <div class="bg-color-grey-lightest p-4">
      <div>Body</div>
    </div>
  </article>
</div>
Sidebar
Map
<div class="layout--map screen-desktop:layout--sidebar text-center">
  <div class="layout--map__sidebar bg-color-grey-lightest p-4">Sidebar</div>
  <div class="layout--map__map bg-color-grey-light p-4">Map</div>
</div>