Layouts | ACCESS NYC Patterns

Columns

Source: src/elements/layouts/layouts-columns

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>

Rows

Source: src/elements/layouts/layouts-rows

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>

Gutter

Source: src/elements/layouts/layouts-gutter

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>

Columns with Gutter

Source: src/elements/layouts/layouts-columns-gutter

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>

Two Columns with Gutter

Source: src/elements/layouts/layouts-two-columns-gutter

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>

Three Columns with Gutter

Source: src/elements/layouts/layouts-three-columns-gutter

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>

Four Columns with Gutter

Source: src/elements/layouts/layouts-four-columns-gutter

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>

Sidebar

Source: src/elements/layouts/layouts-sidebar

Content

<div class="screen-tablet:layout--sidebar layout--rows text-center">
  <aside class="bg-color-grey-light p-4">Sidebar</aside>
  <article class="layout--topbar__body bg-color-grey-lightest p-4">Content</article>
</div>

Sidebar Small

Source: src/elements/layouts/layouts-sidebar-small

Content

<div class="screen-tablet:layout--sidebar-small layout--rows text-center">
  <aside class="bg-color-grey-light p-4">Sidebar</aside>
  <article class="bg-color-grey-lightest p-4">Content</article>
</div>

Sidebar with Gutter

Source: src/elements/layouts/layouts-sidebar-gutter

Content

<div class="screen-tablet:layout--sidebar-gutter layout--gutter bg-color-grey-lightest text-center p-4">
  <aside class="bg-color-grey-light p-4">Sidebar</aside>
  <article class="bg-color-grey-light p-4">Content</article>
</div>

Sidebar Small with Gutter

Source: src/elements/layouts/layouts-sidebar-small-gutter

Content

<div class="screen-tablet:layout--sidebar-small-gutter layout--gutter bg-color-grey-lightest text-center p-4">
  <aside class="bg-color-grey-light p-4">Sidebar</aside>
  <article class="bg-color-grey-light p-4">Content</article>
</div>

Home Body

Source: src/elements/layouts/layouts-home-body

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

Source: src/elements/layouts/layouts-topbar

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>

Map

Source: src/elements/layouts/layouts-map

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>