menu

Lists

Ordered & unordered lists

Bulleted list

   
<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>
 
  • List item 1
  • List item 2
  • List item 3

Alphabetic list


<ol class="alpha">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>
 
  1. List item 1
  2. List item 2
  3. List item 3

Numbered list


<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>
 
  1. List item 1
  2. List item 2
  3. List item 3

Roman numeral list


<ol class="roman">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>
 
  1. List item 1
  2. List item 2
  3. List item 3

Other list options

Adding space between all list items

When there is a lot of text in each list item, the list can benefit from more spacing. To do this, use the class extraspace.


<ol class="extraspace">
  <li>item in list</li>
</ol>
 
  1. List Item 1 contains more than just one line of text which can make it difficult to read.
    1. Sub item 1
    2. Sub item 2
    3. Sub item 3
  2. List Item 2 contains more than just one line of text which can make it difficult to read.
  3. List Item 3 contains more than just one line of text which can make it difficult to read.
 

Adding space between first level list items only

In the above example, extra space is added between all list items. If you only want extraspace on the first level list items, and regular space on the other list items, use the class extraspace2.


<ul class="extraspace2">
  <li>item in list</li>
</ul>
 
  • List Item 1 contains more than just one line of text which can make it difficult to read.
    • Sub item 1
    • Sub item 2
    • Sub item 3
  • List Item 2 contains more than just one line of text which can make it difficult to read.
  • List Item 3 contains more than just one line of text which can make it difficult to read.
 

Turning off indentation

In some cases, like small or narrow boxes, you may want to use a list, but not have it indented. To acheive this, use the class noindent.

Note: This class is not recommended for lists with 100 or more items, as the point number will be truncated in some browsers.


<ul class="noindent">
  <li>item in list</li>
</ul>
 
  • List item 1
  • List item 2
  • List item 3
 

Turning off bullets

In some cases you may want to use a list, but not have bullets. To achieve this, use the class nobullet.

Note that if you want nested lists to have no bullets, you must also apply nobullet to the nested <ul> tags.

If you do not want the list to be indented from the margin, use the noindent class as well.


<ul class="nobullet">
  <li>List item 1</li>
  <li>List item 2
    <ul class="nobullet">
    <li>blah</li>
    <li>blah</li>
    <li>blah</li>
  </ul></li>
  <li>List item 3</li>
</ul>
 
  • List item 1
  • List item 2
    • blah
    • blah
    • blah
  • List item 3

With 'noindent' also applied:


<ul class="nobullet noindent">
  <li>List item 1</li>
  <li>List item 2
    <ul>
    <li>blah</li>
    <li>blah</li>
    <li>blah</li>
  </ul></li>
  <li>List item 3</li>
</ul>
 
  • List item 1
  • List item 2
    • blah
    • blah
    • blah
  • List item 3
 

Long lists of links can be overwhelming if all the links are underlined. If it is obvious that the primary purpose of the list is navigation, the class linklist can be used to display a list of links without the underline.

Link lists align with the left margin and are not indented. The class will only work on bulleted lists.


<ul class="linklist">
  <li><a href="#">item in list</a></li>
</ul>
 
 

Creating a list of icons

Certain icons (see table below) can be formatted in a horizontal or vertical list – useful for linking to common tools and services.

Available icons and their class names
Icon Class name
horus or isis horus or isis
wattle wattle
mail mail
books lib
computer is
date dates
calendar timetable
3people alliance
Certificate and magnifying glass Programs and courses

Vertical icon list

<ul class="iconlist">
  <li>
    <a href="http://wattle.anu.edu.au/" class="wattle">Wattle</a>
  </li>
  <li>
    <a href="http://anulib.anu.edu.au" class="lib">Library</a>
  </li>
  <li>
    <a href="https://outlook.com/owa/anu.edu.au" class="mail">ANU Email</a>
  </li>
</ul>
 

Horizontal icon list

<ul class="iconlist iconlist_h">
  <li>
    <a href="http://wattle.anu.edu.au/" class="wattle">Wattle</a>
  </li>
  <li>
    <a href="http://anulib.anu.edu.au" class="lib">Library</a>
  </li>
  <li>
    <a href="https://outlook.com/owa/anu.edu.au" class="mail">ANU Email</a>
  </li>
</ul>
 
 

Creating a hanging indent

Lists can be used to create a hanging indent – usually used for bibliographies. On the hanging indent style, the bullet points are removed.

The class will only work on bulleted <ul> lists.

           
<ul class="hangindent small">
  <li>Anstey, K.J., Bielak, A.M.M., Birrell, C.L., Browning, C.J., Burns, R.A., Byles, J., et al. (accepted 2011/02/07). Understanding ageing in older Australians: The contribution of the DYNOPTA project to the evidence base and policy. <em>Australasian Journal on Ageing</em>.
  </li>
</ul>  
 
  • Anstey, K.J., Bielak, A.M.M., Birrell, C.L., Browning, C.J., Burns, R.A., Byles, J., et al. (accepted 2011/02/07). Understanding ageing in older Australians: The contribution of the DYNOPTA project to the evidence base and policy. Australasian Journal on Ageing.

Updated:  7 June 2021/ Responsible Officer:  Director Marketing/ Page Contact:  Webstyle