Large (Desktop): 1170px 12 columns 70px - 11 gutters at 30px

Default (Desktop & Landscape Tablet): 980px 12 columns 60px - 11 gutters at 20px

Tablet (Portrait): 768px 12 columns 42px - 11 gutters at 20px

Smart Phone: 320px 1 columns 280px - 2 gutters at 20px

Typography

Heading 1 (40px)

Heading 2 (30px)

Heading 3 (24px)

Heading 4 (20px)

Arial Font

This is a intro paragraph. Morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vesibulum tortor quam, feugiat vitae, ulricies eget, tempor sit amet, ante. This is a link.

$intro-text #3c3c3c Arial 18px

$link-color #1989d1

Donec ut interdum massa, ut tincidunt nisi. Mauris dictum ipsum nec ante blandit, at egestas ligula dignissim. Donec ut interdum massa, ut tincidunt nisi. Mauris dictum ipsum nec ante blandit, at egestas ligula dignissim.

$normal-text #1a1a1a Arial 15px

Line break bold .line-bold

Line Break .line-break

Line Break Dashed .line-break.dashed

• List Item 1
• List Item 1
  • List Item 2.1
  • List Item 2.2
• List Item 3

Bulleted List

1. List Item 1
2. List Item 2
   1. List Item 2.1
   2. List Item 2.2
3. List Item 3

Numbered List

This is a quote

Quote Author

Block quote

Icons

Breadcrumbs

Tooltips

Pagination

Display results

Load more results pagination

Forms

Basic form fields and labels

Form inline error styles

Toggle panels

Toggle panels add class .accordion to collapsible to make it accrodion

Tables & wells

Wells .well .well.your-color

Colour pallete