Typography

Page Headings

.h1 Heading Bold Small

.h2 Heading Bold Small

.h3 Heading Bold Small

.h4 Heading Bold Small

Paragraph

Regualr Text, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu volutpat erat. Donec ut sem magna. Suspendisse potenti. Phasellus cursus nec leo sed scelerisque. Sed sed suscipit justo, sed fermentum erat. Nullam lobortis mi lacinia, finibus tellus ac, blandit metus. Ut ex dui, malesuada sit amet nulla eu, consectetur molestie tortor. Duis euismod at augue ac malesuada. Nullam sagittis, est faucibus vestibulum mattis, dui dolor aliquam orci, vitae suscipit erat mi ac dui. Bold small Italicized Colored Underlined.

Lead Text, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu volutpat erat. Donec ut sem magna. Suspendisse potenti. Phasellus cursus nec leo sed scelerisque. Sed sed suscipit justo, sed fermentum erat. Nullam lobortis mi lacinia, finibus tellus ac, blandit metus. Ut ex dui, malesuada sit amet nulla eu, consectetur molestie tortor. Duis euismod at augue ac malesuada. Nullam sagittis, est faucibus vestibulum mattis, dui dolor aliquam orci, vitae suscipit erat mi ac dui. Bold small Italicized Colored Underlined

Quiet Text, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu volutpat erat. Donec ut sem magna. Suspendisse potenti. Phasellus cursus nec leo sed scelerisque. Sed sed suscipit justo, sed fermentum erat. Nullam lobortis mi lacinia, finibus tellus ac, blandit metus. Ut ex dui, malesuada sit amet nulla eu, consectetur molestie tortor. Duis euismod at augue ac malesuada. Nullam sagittis, est faucibus vestibulum mattis, dui dolor aliquam orci, vitae suscipit erat mi ac dui. Bold small Italicized Colored Underlined

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

Lowercased text.

Uppercased text.

Capitalized text.

Ellipsis text. This is longer text so that it shows.

Misc

attr

Un Ordered

  • Item 1
  • Item 2
    • Item 2.1
    • Item 2.2
  • Item 3

Ordered

  1. Item 1
  2. Item 2
    • Item 2.1
    • Item 2.2
  3. Item 3

Inline

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
Optional table caption.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Breadcrumbs

Buttons

Styled Buttons

Button Group

Notes:

Used mostly in calculators, and information selections where we want a tighter interface.

Forms

Example block-level help text here.

Nav Bars / Tabs

Pills Stacked

Breadcrumbs

Colour and Depth

Color

$go-orange #ff5a00
$go-orange-light #ff7700
$go-orange-dark #ff5a00
$go-blue #239fc4
$go-blue-light #46b2d2
$go-blue-dark #239fc4
$go-green #91c356
$go-green-light #78aa3c
$go-green-dark #78aa3c
$grey-11 #111111
$grey-22 #222222
$grey-33 #333333
$grey-44 #444444
$grey-55 #555555
$grey-66 #666666
$grey-77 #777777
$grey-88 #888888
$grey-99 #999999
$grey-aa #aaaaaa
$grey-bb #bbbbbb
$grey-cc #cccccc
$grey-dd #dddddd
$grey-ee #eeeeee
$grey-f5 #f5f5f5

Notes:

Representing SCSS Variable colours and not CSS classes that apply colours.

Shadow/Depth

Backgrounds

#239fc4
#239fc4

Notes:

Representing SCSS Variable colours and not CSS classes that apply colours.

Media

Responsive Video

Notes:

Alternatively there is a 4b3 class that can be used .embed-responsive-4by3

Responsive Helpers & Utilities

Structure

m-15

m-30

m-45

m-l-15

m-t-15

m-b-45

p-15

p-30

p-45

p-l-15

p-t-15

p-b-45

Borders

Cells / Cards

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis, lacus quis euismod vulputate, purus libero lobortis nunc, at porta metus orci vel justo.

Integer et tortor tristique, pellentesque metus a, venenatis lacus. Aliquam mattis porta nibh, lobortis gravida neque pharetra sed.

.card-no-padding

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis, lacus quis euismod vulputate, purus libero lobortis nunc, at porta metus orci vel justo.

Integer et tortor tristique, pellentesque metus a, venenatis lacus. Aliquam mattis porta nibh, lobortis gravida neque pharetra sed.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis, lacus quis euismod vulputate, purus libero lobortis nunc, at porta metus orci vel justo.

Integer et tortor tristique, pellentesque metus a, venenatis lacus. Aliquam mattis porta nibh, lobortis gravida neque pharetra sed.