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 »

Nulla ullamcorper nisi a purus elementum rhoncus. Mauris vel est eros. Proin dapibus ornare ligula, et varius velit. Nullam facilisis neque tortor, id euismod velit malesuada non. Nullam arcu odio, adipiscing quis velit id, dictum pretium mauris. Morbi hendrerit sed est nec hendrerit. Nullam molestie dignissim lacinia. Cras faucibus semper nisl quis pharetra.

Nulla ullamcorper nisi a purus elementum rhoncus. Mauris vel est eros. Proin dapibus ornare ligula, et varius velit. Nullam facilisis neque tortor, id euismod velit malesuada non. Nullam arcu odio, adipiscing quis velit id, dictum pretium mauris. Morbi hendrerit sed est nec hendrerit. Nullam molestie dignissim lacinia. Cras faucibus semper nisl quis pharetra.

Nulla ullamcorper nisi a purus elementum rhoncus. Mauris vel est eros. Proin dapibus ornare ligula, et varius velit. Nullam facilisis neque tortor, id euismod velit malesuada non. Nullam arcu odio, adipiscing quis velit id, dictum pretium mauris. Morbi hendrerit sed est nec hendrerit. Nullam molestie dignissim lacinia. Cras faucibus semper nisl quis pharetra.

Nulla ullamcorper nisi a purus elementum rhoncus. Mauris vel est eros. Proin dapibus ornare ligula, et varius velit. Nullam facilisis neque tortor, id euismod velit malesuada non. Nullam arcu odio, adipiscing quis velit id, dictum pretium mauris. Morbi hendrerit sed est nec hendrerit. Nullam molestie dignissim lacinia. Cras faucibus semper nisl quis pharetra.

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 »

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

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 »

 

Table 1: Lorem ipsum dolor sit amet
Nullam mollis scelerisque tortor tbl-uni
(overides college colours)
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-uni
(overides college colours)
Nullam mollis scelerisque tortor
Nullam mollis scelerisque tortor

Nullam mollis scelerisque tortor, per conubia nostra.

Per inceptos hymenaeos.

Aliquam adipiscing.

Nullam mollis scelerisque tortor
Head 1 Head 2
Cell 1 contents Cell 2 contents
Cell 3 contents Cell 4 contents
Head 1 Head 2
Cell 1 contents Cell 2 contents
Cell 3 contents Cell 4 contents
Head 1 Head 2
Cell 1 contents Cell 2 contents
Cell 3 contents Cell 4 contents

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

Pull quotes

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

  • 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

 

Updated:  14 October 2015/ Responsible Officer:  Director Marketing/ Page Contact:  Webstyle