Typography

This is a normal paragraph element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor lacinia odio eu mollis. Duis hendrerit lacus vitae tortor imperdiet dictum. Praesent ut libero eget urna condimentum euismod. Sed egestas magna sit amet urna fringilla at faucibus nunc dictum.

Cras risus purus, tincidunt ac cursus non, faucibus sit amet leo. Example of a link. Duis at magna mauris. Nam dapibus volutpat orci quis fringilla. Sed elementum commodo tempus. Phasellus nisl neque, tristique at convallis sit amet, faucibus vel magna. Mauris risus nisl, suscipit vitae dignissim quis, condimentum id arcu.

 

Standard Heading Elements: (this is a h2 element)


This is a h1 element with a link

This is a h2 element with a link (same as h1 - without target)

This is a h3 element with a link

This is a h4 element with a link

This is a h5 element with a link

This is a h6 element with a link

 

 

Standard Colour Classes: (Colour classes can be applied to <span>, <p> or <div> elements)


Text Colour Classes

This is the 'red' colour class. This is a link within the class.

This is the 'black' colour class. This is a link within the class.

This is the 'grey-dark' colour class. This is a link within the class.

This is the 'grey' colour class. This is a link within the class.

This is the 'grey-light' colour class. This is a link within the class.

This is the 'white' colour class. This is a link within the class. (shown here with a 'bg-grey-dark' background class)

 

Background Colour Classes

This is the 'bg-red' colour class. (white text by default)

This is the 'bg-black' colour class. (white text by default)

This is the 'bg-grey-dark' colour class. (white text by default)

This is the 'bg-grey' colour class. (white text by default)

This is the 'bg-grey-light' colour class.

This is the 'bg-white' colour class.

 

 

Button Classes: (Can be applied to paragraph <p> or link <a href> elements)


Standalone Buttons:

(applied to paragraph element: <p>)

btn-red

btn-black

btn-grey-dark

btn-grey

btn-grey-light

btn-white

 

Inline Button Classes:

(Same as above, except applied to link element (<a href>) - in the 'Link' panel >> Advanced tab)

These button classes are applied btn-redbtn-red on the link (instead of the paragraph).

These button classes are applied btn-black on the link (instead of the paragraph).

These button classes are applied btn-grey-dark on the link (instead of the paragraph).

These button classes are applied btn-grey on the link (instead of the paragraph).

These button classes are applied btn-grey-light on the link (instead of the paragraph).

These button classes are applied btn-white on the link (instead of the paragraph).

 

Standalone Small Buttons:

(applied to paragraph element: <p>)

btn-sm-red

btn-sm-black

btn-sm-grey-dark

btn-sm-grey

btn-sm-grey-light

btn-sm-white

 

Inline Small Button Classes:

(Same as above, except applied to link element: a) - in the 'Link' panel > Advanced tab)

These button classes are applied btn-sm-redbtn-sm-grey on the link (instead of the parahraph).

These button classes are applied btn-sm-black on the link (instead of the parahraph).

These button classes are applied btn-sm-grey-dark on the link (instead of the parahraph).

These button classes are applied btn-sm-grey on the link (instead of the parahraph).

These button classes are applied btn-sm-grey-light on the link (instead of the parahraph).

These button classes are applied btn-sm-white on the link (instead of the parahraph).

 

 

Special Elements & Styles: (for specific purposes)


This shows a 'blockquote' element. Quote marks are generated automatically. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque in erat eget diam sodales molestie. Duis venenatis quam vitae semper lacinia. Duis tincidunt consectetur lacus, sit amet iaculis orci varius eu.

John Smith. This is a 'author' style. It should be applied to a separate paragraph element <p> within the 'blockquote' - like in this example...

This is a 'keyblock' style. It can contain other elements like a 'quoteblock' (above), bullet lists, etc.

This shows a 'blockquote' element inside a 'keyblock' style. You can only achieve this by using the 'Source Code Editor'. In code view, locate the 'blockquote' element. Wrap the 'blockquote' with a 'div' element (i.e. <div> ... </div>). Return to the normal WYSIWYG editor mode. Select the div that you just created and apply the 'keyblock' style (from the styles tab).

John Smith. This is a 'author' style. It should be applied to a separate paragraph element <p> within the 'blockquote' - like in this example...

This is a 'box-example' class. It can be applied to a paragraph <p> or a <div> element.
It's another great element for attracting attention to a specific block of content. This class is also used below to wrap each of the example tables (see below). 

This is called 'micetype'. It's for very tiny text.

This style is called 'instructions'. You might use this for inform users about an action they should take.

A 'jumplink' is intended for creating links to content lower down on the same page.

A bullet list with the 'jumplink' class applied:


This is a simple link with a 'jumplink' style applied.
Good for a single 'jumplink'.

A bullet list with the 'jumplink' class applied:


This is a simple link with a 'jumplink' style applied.
Good for a single 'jumplink'.

This is a 'highlight' class. (applied to a paragraph <p>)

This is an example of how you can use the 'highlight' class to 'highlight' certain words within a paragraph. To do this: select the words you want to highlight. Convert the selection to a 'span' element and apply the highlight class to the span element.

 

 

Image Classes: (These classes must be applied to the img element)


placeholder-283The first image here has a 'image-right' class applied. Text can flow all around it.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit consequat lorem non mollis. Duis tincidunt sem eu elit semper, quis fermentum augue faucibus. Sed nec fermentum ante, id viverra felis. Sed venenatis nibh tincidunt mi placerat, eu suscipit ipsum rhoncus. Quisque aliquam magna diam, at euismod magna vulputate id. Morbi ullamcorper magna nec fringilla fringilla. Quisque sed bibendum odio. Suspendisse venenatis sagittis arcu ut congue. Praesent porttitor tincidunt nisi, vitae eleifend diam vestibulum sed. Phasellus adipiscing quam eu nisi posuere luctus quis vitae lacus. Mauris nisi nisi, rutrum et est eu, convallis adipiscing magna. Nam eleifend scelerisque massa sit amet vestibulum. Nunc nec lacinia eros.


placeholder-283This image has a 'image-left' class applied. Text can flow all around it.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit consequat lorem non mollis. Duis tincidunt sem eu elit semper, quis fermentum augue faucibus. Sed nec fermentum ante, id viverra felis. Sed venenatis nibh tincidunt mi placerat, eu suscipit ipsum rhoncus. Quisque aliquam magna diam, at euismod magna vulputate id. Morbi ullamcorper magna nec fringilla fringilla. Quisque sed bibendum odio. Suspendisse venenatis sagittis arcu ut congue. Praesent porttitor tincidunt nisi, vitae eleifend diam vestibulum sed. Phasellus adipiscing quam eu nisi posuere luctus quis vitae lacus. Mauris nisi nisi, rutrum et est eu, convallis adipiscing magna. Nam eleifend scelerisque massa sit amet vestibulum. Nunc nec lacinia eros.


placeholder-283This image has a 'image-right-no-margin' class applied. It is positioned against the right edge of the site. Text can flow all around it but it has a bit of extra padding on the top of the image.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit consequat lorem non mollis. Duis tincidunt sem eu elit semper, quis fermentum augue faucibus. Sed nec fermentum ante, id viverra felis. Sed venenatis nibh tincidunt mi placerat, eu suscipit ipsum rhoncus. Quisque aliquam magna diam, at euismod magna vulputate id. Morbi ullamcorper magna nec fringilla fringilla. Quisque sed bibendum odio. Suspendisse venenatis sagittis arcu ut congue. Praesent porttitor tincidunt nisi, vitae eleifend diam vestibulum sed. Phasellus adipiscing quam eu nisi posuere luctus quis vitae lacus. Mauris nisi nisi, rutrum et est eu, convallis adipiscing magna. Nam eleifend scelerisque massa sit amet vestibulum. Nunc nec lacinia eros.


placeholder-283This image has a 'image-left-no-margin' class applied. It is positioned against the right edge of the site. Text can flow all around it but it has a bit of extra padding on the top of the image.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit consequat lorem non mollis. Duis tincidunt sem eu elit semper, quis fermentum augue faucibus. Sed nec fermentum ante, id viverra felis. Sed venenatis nibh tincidunt mi placerat, eu suscipit ipsum rhoncus. Quisque aliquam magna diam, at euismod magna vulputate id. Morbi ullamcorper magna nec fringilla fringilla. Quisque sed bibendum odio. Suspendisse venenatis sagittis arcu ut congue. Praesent porttitor tincidunt nisi, vitae eleifend diam vestibulum sed. Phasellus adipiscing quam eu nisi posuere luctus quis vitae lacus. Mauris nisi nisi, rutrum et est eu, convallis adipiscing magna. Nam eleifend scelerisque massa sit amet vestibulum. Nunc nec lacinia eros.


placeholder-990

This image has a 'image-full-no-margin' class applied. Text can't flow around it.
NOTE: This class could be applied to the paragraph element with the same result. This is the only image-specific css class that could be applied to it's container (i.e. a paragraph or <div>).

 

 

Messages & Warnings:


This is the 'success' class.

This is the 'warning'class.

This is the 'danger'class.

 

 

Tables:


The table below has no styling class applied. This is simply to demonstrate how ugly tables are.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

The table below has the basic 'table' class applied. Must apply the 'table' class to the table itself.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

The table below is used on the case study pages. It has a 'table-highlights' class applied.
Must apply the 'table-highlights' class to the table itself.

# First Name
1
  • Mark
  • Chevrons are applied automatically to list items within the 'table-highlights table'.
2
  • but you must turn your text item into a list element (to get a pretty chevron)
3 Larry - this item is not a list - (i.e. no chevron)

Optional table classes (in addition to the 'table' class above):

The table below has the 'table' and 'table-stripped' classes applied. Must apply all classes to the table itself.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

The table below has the 'table' and 'table-head' classes applied. Must apply all classes to the table itself.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

The table below has the 'table' and 'table-striped' and 'table-head' classes applied. Must apply all classes to the table itself.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

The table below has the 'table' and 'table-insideborders' classes applied. Must apply all classes to the table itself.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

The table below has the 'table' and 'table-striped' and 'table-head' and 'table-insideborders' classes applied. Must apply all classes to the table itself.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

 

 

Printing:


There are also 'printonly' and 'noprint' classes. When applied to an element, they either prevent the item from being printed or only appear when printed.

 

 

Alternative Text Sizes:


These really should not be used unless absolutely necessary. For headings, please use h1, h2, h3, h4, h5 or h6 elements. 

This text is 'size30' (3.0em).
This is an uppercase example.
The shows the line height.

This text is 'size28' (2.8em).
This is an uppercase example.
The shows the line height.

This text is 'size26' (2.6em).
This is an uppercase example.
The shows the line height.

This text is 'size24' (2.4em).
This is an uppercase example.
The shows the line height.

This text is 'size22' (2.2em).
This is an uppercase example.
The shows the line height.

This text is 'size20' (2.0em).
This is an uppercase example.
The shows the line height.

This text is 'size18' (1.8em).This is an uppercase example.
The shows the line height.

This text is 'size16' (1.6em).This is an uppercase example.
The shows the line height.

This text is 'size15' (1.5em).This is an uppercase example.
The shows the line height.

This text is 'size14' (1.4em).This is an uppercase example.
The shows the line height.

This text is 'size13' (1.3em).This is an uppercase example.
The shows the line height.

This text is 'size12' (1.2em).This is an uppercase example.
The shows the line height.

This text is 'size11' (1.1em).This is an uppercase example.
The shows the line height.

This text is 'size10' (1.0em).This is an uppercase example.
The shows the line height.

This text is 'size09' (0.9em).This is an uppercase example.
The shows the line height.

This text is 'size08' (0.8em).This is an uppercase example.
The shows the line height.

This text is 'size07' (0.7em).This is an uppercase example.
The shows the line height.