@navinc/base-react-components/src/three-col-layout.readme.md

Nav's Pattern Library

# ThreeColumnLayout

## Usage

```
import React from 'react'
import styled from 'styled-components'
import { Header, Copy, Link } from '@navinc/base-react-components'
import ColLayout from '../../common/components/column-layout'

const Nav = styled.nav`
  position: sticky;
  top: 24px;
  display: grid;
  grid-gap: 24px;
`
const Main = styled(ColLayout.Most).attrs(() => ({ as: 'section' }))``

export default () => (
  <ColLayout>
    <ColLayout.All size='xl' as={Header}>
      Page Header
    </ColLayout.All>
    <Nav>
      <Link to='/home'>Home</Link>
      <Link to='/report-history'>Report history</Link>
      <Link to='/alerts'>Alerts</Link>
      <Link to='/financing'>Financing</Link>
      <Link to='/credit-cards'>Credit cards</Link>
      <Link to='/learn'>Learn</Link>
    </Nav>
    <Main>
      <Copy>All the goings on.</Copy>
      <br />
      <Copy>
        Bacon ipsum dolor amet ground round short loin landjaeger, tri-tip
        meatloaf shoulder sausage. Sirloin spare ribs kevin pig corned beef
        capicola short loin hamburger. Pork belly sausage strip steak, salami
        ground round pork chop boudin ham rump shankle jowl ham hock. T-bone
        salami drumstick prosciutto shankle andouille ball tip rump boudin.
        Doner jowl landjaeger kevin sausage prosciutto chuck pastrami short loin
        burgdoggen shank. Pastrami biltong ball tip, picanha fatback sausage
        prosciutto shoulder venison frankfurter brisket bresaola. Corned beef
        cupim brisket hamburger pork loin buffalo rump swine.
      </Copy>
    </Main>
  </ColLayout>
)

```

## Child designations

Child elements can be thought of as falling into one of three conceptual designations. `Some`, `Most`, and `All`. The `ThreeColumnLayout` component exposes helpers for these concepts in the form of `ThreeColumnLayout.Some`, `ThreeColumnLayout.Most`, and `ThreeColumnLayout.All`.

### Some

The `Some` Component allows content to span only one column, regardless of how many columns are available. This is the default designation for children and so it is not usually necessary to use this component explicitly.

### Most

The `Most` Component allows content to span two columns when three columns are available. Otherwise, it acts the same as `Some` spanning only one column.

### All

The `All` Component allows content to span all columns available.

## Columns

### One Column

At screen widths less the 744px, all children of the ColLayout component stack in a single column

| Column 1 |
| -------- |
| Some     |
| Most     |
| All      |

### Two Columns

At a screen width 744px, the layout breaks into two equal size columns. Any content designated as `All` spans both columns. `Some` and `Most` sized content span only a single column. Each column may reach a maximum width of 492px when the screen reaches the next threshold.

| Column 1 | Column 2 |
| -------- | -------- |
| Some     |          |
| Most     |          |
| All      | All      |

### Three Columns

At a screen width of 1104px, the layout breaks into three equal columns. `Some` components span one column, `Most` components span two columns, and `All` components span all three columns.

| Column 1 | Column 2 | Column 3 |
| -------- | -------- | -------- |
| Some     |          |          |
| Most     | Most     |          |
| All      | All      | All      |