Basic Grid

The grid below shows a combination of nested, reversed, and gutterless grids. Each integer represents the high-level grid item you are looking at, and each decimal represents the grid item’s level of nesting (if any), e.g. Grid 2.3 represents the third nested grid inside of the second major grid.

1.1

1.2

1.3

2.1

2.2

2.3

Reverse Grid

3.1

3.2

3.3

Full Grid

4.1

4.2

4.3

4.4

Auto Sizing

5.1

5.2

5.3

Push

6.1

6.2

Responsive Grid

The grid below shows a combination of nested, fully-responsive grids using breakpoint-specific classes.

1.1

1.2

1.3

2.1

2.2

2.3

2.4

2.5

3.0

4.0

Colors

$black
$gray-dark
$gray
$gray-light
$white
$primary
$secondary
$tertiary

Typography

h1.Heading 1

h2.Heading 2

h3.Heading 3

h4.Heading 4

h5.Heading 5

h6.Heading 6

Unordered List

list item 1
list item 1
- list item 2
- list item 2
  - list item 3
  - list item 3
- list item 2
- list item 2
list item 1
list item 1

Ordered List

list item 1
list item 1
1. list item 2
2. list item 2
  1. list item 3
  2. list item 3
3. list item 2
4. list item 2
list item 1
list item 1

Definition List

Description name: Description value
Description name: Description value; Description value
Description name
Description name: Description value

Table

Table Heading 1	Table Heading 2	Table Heading 3	Table Heading 3	Table Heading 4
Table Footer 1	Table Footer 2	Table Footer 3	Table Footer 3	Table Footer 4
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5

Sample Content Block

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Some sort of famous witty quote marked up with a <blockquote> and a child <p> element.

Superscript item^sup
Subscript item_sub
Small text for fine print.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

Style Guide