menu
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>
- List item 1
- List item 2
- List item 3
Numbered list
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
- List item 1
- List item 2
- 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>
- List item 1
- List item 2
- 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>
- 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.
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
Formatting links as a list
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.
| Icon | Class name |
|---|---|
 |
horus or isis |
 |
wattle |
 |
admin |
 |
|
 |
lib |
 |
is |
 |
dates |
 |
timetable |
 |
alliance |
 |
Programs and courses |
Vertical icon list
<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
<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.
