Colours

$green
$blue
$pink
$yellow
$green-light
$blue-light
$pink-light
$yellow-light

Headings

Heading 1
Heading line 2

Heading 2
Heading line 2

Heading 3
Heading line 2

Heading 4
Heading line 2

Heading 5
Heading line 2

Bold headings

Heading 1
Heading line 2

Heading 2
Heading line 2

Heading 3
Heading line 2

Heading 4
Heading line 2

Heading 5
Heading line 2

Mixed headings

Heading 1
Heading line 2

Heading 2
Heading line 2

Heading 3
Heading line 2

Heading 4
Heading line 2

Heading 5
Heading line 2

Link styles

A link within content or a title linking to article. This will be underlined without a chevron.

Sidebar links

Text elements

The a element defines a hyperlink.

The strong element gives text strong importance, and is typically displayed in bold.

The b element represents a span of text stylistically different from normal text, without conveying any special importance or relevance.

The em element marks text that has stress emphasis.

The i element represents a range of text that is set off from the normal text for some reason.

The s element renders text with a line through it.

The mark element represents highlighted text.

The small element makes the text font size one size smaller.

The sub element defines a span of text that should be displayed lower than the main span of text. E.g. H20.

The sup element defines a span of text that should be displayed higher than the main span of text. E.g. TrademarkTM

The abbr element represents an abbreviation, e.g. HTML.

Lead paragraph

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.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

Horizontal rule


Blockquotes

So you do have a plan? Yeah, Mr. White! Yeah, science!

— Jesse Pinkman, Breaking Bad

Ordered list

  1. Ordered list item
    1. Sublist item
    2. Another sublist item
  2. Another order list item

Unordered list

  • Unordered list item
    • Sublist item
    • Another sublist item
  • Another unordered list item

Definition list

This is a term
Lorem ipsum dolor sit amet, consectetur adipisicing elit
This is a term
Lorem ipsum dolor sit amet, consectetur adipisicing elit
This is a term
Lorem ipsum dolor sit amet, consectetur adipisicing elit
This is a term
Lorem ipsum dolor sit amet, consectetur adipisicing elit

Image + caption

Example image

Placeholder image with caption.

Tables

Film IMDB Score Director
The Shawshank Redemption 9.2 Frank Darabont
The Godfather 9.2 Francis Ford Coppola
The Godfather: Part II 9.1 Francis Ford Coppola
The Dark Knight 9.0 Christopher Nolan
Pulp Fiction 9.0 Quentin Tarantino

Basic grid

.sm-col.sm-col-2
.sm-col.sm-col-2
.sm-col.sm-col-2
.sm-col.sm-col-2
.sm-col.sm-col-2
.sm-col.sm-col-2
.sm-col-6.md-col-3.lg-col-9
.sm-col-6.md-col-3.lg-col-9
.sm-col-6.col-right
.sm-col-6.

Grid with gutters

.px2
.px2