Elements

All the independent design elements that are used to build our components and modules.

Headings

Default headings

Primary page heading

Secondary heading

Third heading

Fourth heading

Fifth heading
Sixth heading

Linked headings

Primary page heading

Secondary heading

Third heading

Fourth heading

Fifth heading
Sixth heading

Dual Headings

Primary page heading Sub heading

Secondary heading Sub heading

Markup example:

<h1>Primary page heading <span>Sub heading</span></h1>

Heading groups

Mini heading

Main heading

Mini heading

Main heading

Markup example:

<div class="hgroup">
  <h2>Primary page heading</h2>
  <h1>Primary page heading</h1>
</div>

To top

Paragraphs

This is a lead paragraph. It is emphasised to bring readers into an article. Let’s add a sexy & character. Sed posuere consectetur est at lobortis. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui.

Here are some paragraphs. This is the meat of our content and where we most of our typographic decisions live. Look inside the following paragraphs for examples of links, bold text, and italics. Here is a foonote reference*

Donec id elit HTML non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

* Here is some fine print. It can be used for the little stuff, like this footnote.

Primary page heading

Donec id elit HTML non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Secondary heading

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Third heading

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Fourth heading

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Fifth heading

Donec id elit HTML non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Sixth heading

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

To top

Quotes

This is some text with an inline quote inside of it.

This is a blockquote. We use this when quoting others or displaying testimonials.

Source Name in Publication

To top

Reverse text

Add a reverse class to any element to invert the colours of the text and its background.

To top

Lists

  • Unordered list item
  • Unordered list item
  • Unordered list item
  • Unordered list item
    • Unordered list item
    • Unordered list item
    • Unordered list item
  • Unordered list item
  • Unordered list item
  • Unordered list item
  1. Ordered list item
  2. Ordered list item
  3. Ordered list item
  4. Ordered list item
  5. Ordered list item
  6. Ordered list item
  7. Ordered list item
Definition title
Definition description. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Donec id elit non mi porta gravida at eget metus.
Definition title
Definition description. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Donec id elit non mi porta gravida at eget metus.
Definition title
Definition description. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Donec id elit non mi porta gravida at eget metus.

To top

Borders & rules

Dark rule

Light rule

Red rule

White rule

To top

Misc

Time stamp

Price

$100.00

More links

Read more >

VCard

Company name 123 West Chester Street Vancouver, BC V7B 0B4 Canada

Phone 1 (888) 555-5555

To top

Text Inputs

HTML5 Special fields

Checks & Radios

Checkboxes

Radios

Selects

File uploads

Controls

Checkbox option buttons

Markup example:

    <div class="field option-buttons js-options">
      <label for="cb1"><input type="checkbox" name="check-button" value="1" id="cb1" />Item 1</label>
      <label for="cb2"><input type="checkbox" name="check-button" value="2" id="cb2" />Item 2</label>
      <label for="cb3"><input type="checkbox" name="check-button" value="3" id="cb3" />Item 3</label>
    </div>

Radio option buttons

Markup example:

    <div class="field option-buttons js-options">
      <label for="rb1"><input type="radio" name="radio-button" value="1" id="rb1" />Item 1</label>
      <label for="rb2"><input type="radio" name="radio-button" value="2" id="rb2" />Item 2</label>
      <label for="rb3"><input type="radio" name="radio-button" value="3" id="rb3" />Item 3</label>
    </div>

Checkbox pill buttons

Markup example:

    <div class="field pill-buttons js-options">
      <label for="cp1"><input type="checkbox" name="check-button" value="1" id="cp1" />Item 1</label>
      <label for="cp2"><input type="checkbox" name="check-button" value="2" id="cp2" />Item 2</label>
      <label for="cp3"><input type="checkbox" name="check-button" value="3" id="cp3" />Item 3</label>
    </div>

Radio pill buttons

Markup example:

    <div class="field pill-buttons js-options">
      <label for="rp1"><input type="radio" name="radio-button" value="1" id="rp1" />Item 1</label>
      <label for="rp2"><input type="radio" name="radio-button" value="2" id="rp2" />Item 2</label>
      <label for="rp3"><input type="radio" name="radio-button" value="3" id="rp3" />Item 3</label>
    </div>

Switch

Markup example:

    <div class="field switch">
      <input id="x" name="switch-x" type="radio" checked />
      <label for="x">Off</label>
      <input id="y" name="switch-x" type="radio" />
      <label for="y">On</label>
    </div>

To top

Buttons

Button link
Red button
Blue button
Disabled button
Small button link
Large button link
Button group Button group Button group

To top