Style guide

A style guide document is a way of curating brand and code consistency. By maintaining the primary elements of a website on a single page, it’s possible see how modular components can be reused and changes to those elements will affect the site overall.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Special article heading one (.article-special)

Special article heading two (.article-special02)

Headings with Text

Heading 1

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Block Elements

Paragraphs and Images

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.

Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.

Boxout and Blockquote

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

"This is a blockquote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl."

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

This is a Boxout. Important information that you want to highlight goes in here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Figure-Caption

Details-Summary

The summary element example

The details example text. It may be styled differently based on what browser or operating system you are using.

Text Elements

The a element and external a element examples

The abbr element and an abbr element with title examples

The ACRONYM element example

The b element example

The cite element example

The code element example

The data element example

The ~~del element~~ example

The dfn element and dfn element with title examples

The em element example

The i element example

The ins element example

The kbd element example

The mark element example

The q element example

The q element inside a q element example

The ~~s element~~ example

The samp element example

The small element example

The span element example

The strong element example

The _{sub element} example

The ^{sup element} example

The time element example

The u element example

The var element example

Additional Text Classes

The .author class

The .smallprint class

The .summary class

The .citation class

The .byline class

The .byline-02 class

A submenu item - uses the .sub-links class
An active submenu item - uses the .sub-links-active class

Monospace / Preformatted

Code block wrapped in "pre" and "code" tags

// Loop through Divs using Javascript.
        var divs = document.querySelectorAll('div'), i;

        for (i = 0; i < divs.length; ++i) {
          divs[i].style.color = "green";
        }

Monospace Text wrapped in "pre" tags

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Icon links & buttons

Colour

$fountain-blue

$black

$grey

$light-grey-01

$light-grey-02

$light-grey-03

Form Elements

Text Field:

Disabled Text Field:

Readonly Text Field:

Text Area:

Search box:

Style guide

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Special article heading one (.article-special)

Special article heading two (.article-special02)

Sharing header

Headings with Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Block Elements

Paragraphs and Images

Boxout and Blockquote

Figure-Caption

Details-Summary

Text Elements

Additional Text Classes

The .author class

Monospace / Preformatted

Icon links & buttons

Colour

Form Elements