Pre-Heading

Heading 1

Heading 2

Heading 3

Heading 4

Paragraph Large

Paragraph

Paragraph Small

List item 1
List item 2
List item 3
List item 4

Buttons

Primary CTA Secondary CTA Tertiary Button

Primary Small CTA Primary Tiny CTA Secondary Small CTA

Buttons — Inverted

Primary Secondary Tertiary

Primary Small Primary Tiny Secondary Small

Block Quote

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
~ Some Body, Somewhere. 1999

Elements in context

This standard paragraph features HTML elements in context. This is an example of a link and these are some of the most common inline styles such as strong and emphasis. This is strong and emphasis and emphasis and strong to check fonts. It also shows examples of _sub text and ^sup text. Here we can see some inline code. This is the ABBR element. This is the b element. This is the code element. This is the ~~del~~ element. This is the dfn element. This is the em element. This is the i element. This is the ins element. This is the kbd element. This is the mark element. This is the samp element. This is the small element. This is the var element.

This is a H1 heading that is quite long to check the wrapping and line-height

This first paragraph has ‘paragraph lead’ global style applied and should demonstrate visual hierarchy. The following paragraphs are simply to show the heading tags in context so use.

This is a H2 heading that is quite long to check the wrapping and line-height

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 H3 heading that is quite long to check the wrapping and line-height

Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

This paragraph has an ‘paragraph small’ global style applied and should demonstrate visual hierarchy. The following paragraphs are simply to show the heading tags in context so use Lorem Ipsum filler text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus.

This is a H4 heading

I like to keep typography simple and limit headings to four sizes, so <H5> & <H6> often get styled the same as <H4>.

This is a H5 heading

This is a H6 heading

H1 with small text and a link

H2 with small text and a link

H3 with small text and a link

H4 with small text and a link

H5 with small text and a link

H6 with small text and a link

Colours

Primary Brand Darker

Primary Brand Dark

Primary Brand

Primary Brand Light

Secondary Brand Dark

Secondary Brand

Secondary Brand Light

Tertiary Brand

Surface Primary
Text Inverted

Text Primary

Text Secondary
Border Primary

Border Secondary

Style Guide