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.

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

Quisque eget diam

Donec pulvinar

Maecenas vestibulum dui at orci. Maecenas justo erat, sodales vitae, ullamcorper in, aliquet sed, dui. Vestibulum luctus, nisl ut dignissim semper.

» nullu at dolar

Nullam mollis

Curabitur consequat felis. Suspendisse turpis. Aenean justo ipsum:

  • Hendrerit vel, congue in, nunc
  • Praesent metus odio
  • Sed turpis urna, blandit adipiscing
  • Sed turpis urna, blandit
  • Tristique quis, ante

Dates & times »

Events

Week
1
2013

Tristique quis, ante Sed turpis urna, blandit adipiscing

Phasellus rutrum congue nunc. Maecenas congue. Nunc accumsan, tellus a auctor nonummy, lacus pede venenatis sem, eu condimentum leo ipsum et risus.

10.00 am
15
January

Adipiscing id, tempor vel hendrerit vel, congue in, nunc

Morbi vel justo id erat viverra faucibus. Curabitur consequat felis. Suspendisse turpis. Aenean justo ipsum, vulputate non, pretium at, eleifend ut, neque. Sed turpis urna, blandit adipiscing, hendrerit vel, congue in, nunc.

Divider lines »


 
 
 
 
 
 

Error messages »

Error message

Error

Warning message

Warning

Information message

Information

Success message

Success

Forms »

 

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 table 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

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:  6 November 2017/ Responsible Officer:  Director Marketing/ Page Contact:  Webstyle