Style Guide
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
- Name: White Slug: 'white' Value: '#FFFFFF'
- Name: Black Slug: 'black' Value: '#000000'
- Name: Grey Slug: 'grey' Value: '#696969'
- Name: Beige Primary Slug: 'beige-primary' Value: '#F4EDE5'
- Name: Beige Secondary Slug: 'beige-secondary' Value: '#EFE7DC'
- Name: Light Blue Slug: 'light-blue' Value: '#D3EBFB'
- Name: Dark Blue Slug: 'dark-blue' Value: '#243438'
- Name: Red Slug: 'red' Value: '#FF5C4D'
- Name: Yellow Slug: 'yellow' Value: '#FFFD00'
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
- list item 2
- list item 2
- list item 3
- list item 3
- list item 2
- 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 itemsup
- Subscript itemsub
- 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.