Font size classes
      
  .text-sz-10
  .text-sz-12
  .text-sz-14
  .text-sz-16
  .text-sz-18
  .text-sz-20
  .text-sz-24
  .text-sz-32
  .text-sz-40
  .text-sz-48
  .text-sz-56
  .text-sz-64
Font colour classes
      
  .g-color-jet
  .g-color-white
  .g-color-snow
  .g-color-blue
  .g-color-green
  .g-color-yellow
  .g-color-razzmatazz
Background colour classes
      
  .g-bg-color-jet
  .g-bg-color-white
  .g-bg-color-snow
  .g-bg-color-blue
  .g-bg-color-green
  .g-bg-color-yellow
  .g-bg-color-razzmatazz
Text helper classes
      
  .text--p
  .text--line-through
  .text--underline
  .text--italic
  .text--bold
  .text--quote
  .text--centered
  .text--right
  .text--tertiary
  .text--uppercase
  .text--capitalize
List classess
      
  .list--blue
  .list--green
  .list--yellow
  .list--razzmatazz
Headlines

H1 Headline

H2 Headline

H3 Headline

H4 Headline

H5 Headline
H6 Headline
Headlines Content Sample

H1 Headline

Use this mark-up to ensure that all the elements are styled in your project.

H2 Headline

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum optio veniam doloremque ratione reiciendis, culpa eius illo ullam libero possimus eum repellat iste, praesentium molestias ducimus consequuntur debitis sit deleniti?

H3 Headline

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem autem illo nostrum delectus, blanditiis! Ipsam nisi labore repellat ut quo provident voluptatum tempora, suscipit quod? Voluptatem minus quam perferendis vitae.

H4 Headline

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, possimus? Earum magnam aliquam dolorum pariatur, nemo amet neque commodi quibusdam ea dignissimos, culpa? Doloremque, voluptas? Sit est animi, reprehenderit ab!

H5 Headline

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic atque minima minus voluptates error mollitia similique aliquam provident eveniet nesciunt accusamus possimus culpa suscipit facere assumenda libero, debitis reprehenderit eum.

H6 Headline

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic atque minima minus voluptates error mollitia similique aliquam provident eveniet nesciunt accusamus possimus culpa suscipit facere assumenda libero, debitis reprehenderit eum.

blockquote

Broadly, an employer's obligations are to provide a safe and healthy workplace for employees

Subscript / Superscript

Healthy workplace for 102 employees and 210 employeers

Mark Broadly, an employer's obligations are to provide a safe and healthy workplace for employees
Typography

This is a small text paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet distinctio adipisci omnis provident? Praesentium libero non nulla iusto, perspiciatis consectetur explicabo aliquid quisquam voluptatum reprehenderit magnam, commodi esse facere. Voluptatem.

* Terms & conditions. 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.

Regular paragraph: As the leading transport fuel supplier and convenience retailer in the country, we're also the only integrated oil refining and marketing company listed on the Australian Securities Exchange. At Caltex, our business value chain features the very best operational excellence in supply, refining, logistics and marketing.

Let's start with a really nice example of a hyperlink.

Here we have some bold text using the <strong> tag and this is some more bold text using the <b> tag

Now we have some emphasised text using the <em> tag and some more emphasised text using the <i> tag, cool?

Lets use the <s> tag to put a strike through the text. We could also use the <del> tag to mark text as deleted or use the <ins> tag to show that something has been added.

Here we have some highlighted text, pretty neat.

Here we use the <q> tag to show a short quote: Here's a short quote.

We could also use the <small> tag to make some text smaller than the rest of the paragraph.

We have the <sub> tag, which allows us to put some subtext to text. We also have the <sup> for putting superscripts to words.

Who can forget the underline tag?

Inline Links
default hyperlink dark hyperlink dark hyperlink external

Links in paragraph block

default hyperlink

dark hyperlink

dark hyperlink external

Lists
Ordered lists
  1. Ordered item
  2. Ordered item
  3. Ordered item
  4. Ordered item
  1. Ordered item
  2. Ordered item
  3. Ordered item
  4. Ordered item
Unordered lists
  • Unordered item 1
  • Unordered item 2
  • Unordered item 3
  • Unordered item 4
  • Unordered item 1
  • Unordered item 2
  • Unordered item 3
  • Unordered item 4
  • Unordered item 1
  • Unordered item 2
  • Unordered item 3
  • Unordered item 4
  • Unordered item 1
  • Unordered item 2
  • Unordered item 3
  • Unordered item 4
  • Unordered item 1
  • Unordered item 2
  • Unordered item 3
  • Unordered item 4
Tables

Width 100%, .table--unstyled class

Heading 1 Heading 2 Heading 3 Heading 4
Table cell content 1 Table cell content 2 Table cell content 3 Table cell content 4
Table cell content 1 Table cell content 2 Table cell content 3 Table cell content 4
Table cell content 1 Table cell content 2 Table cell content 3 Table cell content 4
Table foot 1 Table foot 2 Table foot 3 Table foot 4
Tables

With, .table-wrapper class

NSW

 Heading 1 Heading 2 Heading 3
Table head Table head Table head Table head Table head Table head
Table cell content 1 Table cell content 2 Table cell content 3 Table cell content 4 Table cell content 2 Table cell content 3 Table cell content 4
Table cell content 1 Table cell content 2 Table cell content 3 Table cell content 4 Table cell content 2 Table cell content 3 Table cell content 4
Table cell content 1 Table cell content 2 Table cell content 3 Table cell content 4 Table cell content 2 Table cell content 3 Table cell content 4
Table foot 1 Table foot 2 Table foot 3 Table foot 4 Table foot 2 Table foot 3 Table foot 4
Lists
Horizontal Rule