Style sampler

This style sampler shows you how elements from the ANU web style guide will look in the content area of a page.

You can see the code by inspecting the relevant element, or by selecting the heading to open a Web Style Guide page with further detail.

Please avoid using inline styles or creating custom style sheets. Let us know if you are having difficulty applying a style, or if you would like a new style created, so that we can improve ANU web style for everyone.

View a different colour scheme

Colours »

Heading 2

Heading 3

Nulla ullamcorper nisi a purus elementum rhoncus. Mauris vel est eros. Proin dapibus ornare ligula, et varius velit. Nullam arcu odio, adipiscing quis velit id, dictum pretium mauris.

Heading 2

Heading 3

Nulla ullamcorper nisi a purus elementum rhoncus. Mauris vel est eros. Proin dapibus ornare ligula, et varius velit. Nullam arcu odio, adipiscing quis velit id, dictum pretium mauris.

Heading 2

Heading 3

Nulla ullamcorper nisi a purus elementum rhoncus. Mauris vel est eros. Proin dapibus ornare ligula, et varius velit. Nullam arcu odio, adipiscing quis velit id, dictum pretium mauris.

Heading 2

Heading 3

Nulla ullamcorper nisi a purus elementum rhoncus. Mauris vel est eros. Proin dapibus ornare ligula, et varius velit. Nullam arcu odio, adipiscing quis velit id, dictum pretium mauris.

Heading 2

Heading 3

Nulla ullamcorper nisi a purus elementum rhoncus. Mauris vel est eros. Proin dapibus ornare ligula, et varius velit. Nullam arcu odio, adipiscing quis velit id, dictum pretium mauris.

Heading 2

Heading 3

Nulla ullamcorper nisi a purus elementum rhoncus. Mauris vel est eros. Proin dapibus ornare ligula, et varius velit. Nullam arcu odio, adipiscing quis velit id, dictum pretium mauris.

Heading 2

Heading 3

Nulla ullamcorper nisi a purus elementum rhoncus. Mauris vel est eros. Proin dapibus ornare ligula, et varius velit. Nullam arcu odio, adipiscing quis velit id, dictum pretium mauris.

Heading 2

Heading 3

Nulla ullamcorper nisi a purus elementum rhoncus. Mauris vel est eros. Proin dapibus ornare ligula, et varius velit. Nullam arcu odio, adipiscing quis velit id, dictum pretium mauris.

Heading 2

Heading 3

Nulla ullamcorper nisi a purus elementum rhoncus. Mauris vel est eros. Proin dapibus ornare ligula, et varius velit. Nullam arcu odio, adipiscing quis velit id, dictum pretium mauris.

Heading 2

Heading 3

Nulla ullamcorper nisi a purus elementum rhoncus. Mauris vel est eros. Proin dapibus ornare ligula, et varius velit. Nullam arcu odio, adipiscing quis velit id, dictum pretium mauris.

Alignment »

An image floated left. Quisque eget diam. Donec pulvinar, pede in posuere elementum, elit augue elementum pede, sed varius lectus risus sed erat. Etiam velit urna, elementum id, rhoncus rutrum, vulputate vel, dolor. Curabitur a nulla sed justo mollis.

An image floated right. Quisque eget diam. Donec pulvinar, pede in posuere elementum, elit augue elementum pede, sed varius lectus risus sed erat. Etiam velit urna, elementum id, rhoncus rutrum, vulputate vel, dolor. Curabitur a nulla sed justo mollis.

Borders »

Standard border. Curabitur porta, eros ac nonummy euismod, lectus elit suscipit augue, sit amet ornare wisi diam non velit.

Medium border. Fusce blandit hendrerit ante. Nunc placerat. Nam euismod.

Thick border. Fusce blandit hendrerit ante. Nunc placerat. Nam euismod.

Sed turpis urna, blandit adipiscing, hendrerit vel, congue in, nunc.

Suspendisse libero magna, sagittis nec, egestas a, mollis et, nulla. Nullam nec dui. Nulla facilisi.

Curabitur turpis tellus, faucibus quis, consequat vel.

Suspendisse turpis. Aenean justo ipsum, vulputate non, pretium at, eleifend ut, neque

Divider lines »


 
 
 
 
 
 

Error messages »

Error message

Error

Warning message

Warning

Information message

Information

Success message

Success

Lists »

Bulleted

  • List item 1
  • List item 2
  • List item 3

No bullet

  • List item 1
  • List item 2
  • List item 3

No indent

  • List item 1
  • List item 2
  • List item 3

Alphabetic

  1. List item 1
  2. List item 2
  3. List item 3

Roman numeral

  1. List item 1
  2. List item 2
  3. List item 3

Extra space

  • List item 1
  • List item 2
  • List item 3

Link list

Hanging indent

People placeholder images »

John Smith
Research Fellow
john.smith@anu.edu.au

John Smith
Research Fellow
john.smith@anu.edu.au

Spacing »

Padding

Padding top

Padding right

Padding bottom

Padding left

Padding removed

Line height reduced

Margin

Margin top

Margin right

Margin bottom

Margin left

Margin removed

Margin all

Tables »

 

Nullam mollis scelerisque tortor tbl-row-bdr Nullam mollis scelerisque tortor
Nullam mollis scelerisque tortor

Nullam mollis scelerisque tortor, per conubia nostra.

Per inceptos hymenaeos.

Aliquam adipiscing.

Nullam mollis scelerisque tortor
Nullam mollis scelerisque tortor Nullam mollis scelerisque tortor, per conubia nostra, per inceptos hymenaeos. Aliquam adipiscing. Nullam mollis scelerisque tortor
Nullam mollis scelerisque tortor

Nullam mollis scelerisque tortor, per conubia nostra.

Per inceptos hymenaeos.

Aliquam adipiscing.

Nullam mollis scelerisque tortor
Nullam mollis scelerisque tortor tbl-col-bdr Nullam mollis scelerisque tortor
Nullam mollis scelerisque tortor

Nullam mollis scelerisque tortor, per conubia nostra.

Per inceptos hymenaeos.

Aliquam adipiscing.

Nullam mollis scelerisque tortor
Nullam mollis scelerisque tortor Nullam mollis scelerisque tortor, per conubia nostra, per inceptos hymenaeos. Aliquam adipiscing. Nullam mollis scelerisque tortor
Nullam mollis scelerisque tortor

Nullam mollis scelerisque tortor, per conubia nostra.

Per inceptos hymenaeos.

Aliquam adipiscing.

Nullam mollis scelerisque tortor
Nullam mollis scelerisque tortor tbl-cell-bdr Nullam mollis scelerisque tortor
Nullam mollis scelerisque tortor

Nullam mollis scelerisque tortor, per conubia nostra.

Per inceptos hymenaeos.

Aliquam adipiscing.

Nullam mollis scelerisque tortor
Nullam mollis scelerisque tortor Nullam mollis scelerisque tortor, per conubia nostra, per inceptos hymenaeos. Aliquam adipiscing. Nullam mollis scelerisque tortor
Nullam mollis scelerisque tortor

Nullam mollis scelerisque tortor, per conubia nostra.

Per inceptos hymenaeos.

Aliquam adipiscing.

Nullam mollis scelerisque tortor

Typography »

Text and inline styles

  • Small text
  • Large text
  • Bold text
  • Uppercase
  • An example of Sub text
  • An example of Super text

Alignment

Left align

Centre align

Right align

  • 1 Title - <h1>

    • 1.1 Section - <h2>

    • 1.2 Section - <h2>

      • 1.2.1 Subsection - <h3>

    • 1.3 Section - <h2>

 

Header uni

Header grey

Header college

 

Pullquotes

This is an example of a pullquote. The text is larger than regular text, centred, and contained in quotation marks.

This is an example of a big pullquote. The text is much larger than regular text, centred, and contained in large quotation marks.

Updated:  29 August 2018/ Responsible Officer:  Director Marketing/ Page Contact:  Webstyle