Skip to Content

Lists

Lists can be very useful in displaying content in a structural way. The following are some examples of how lists can be used on the Swinburne Website


Basic Bulleted list

  • List item 3
  • List item 3
  • List item 3
<ul>

<li>List item 3</li>

  <li>List item 3</li>

  <li>List item 3</li>

</ul>

<ul class="bulletpoints">

  <li><a href="#">List item link 1</a></li>

  <li><a href="#">List item link 2</a></li>

  <li><a href="#">List item link 3</a></li>

</ul>

Download Document List

The Basic Structure for this list is as follows: 

<ul class="downloadable-documents">

   <li>

   <img src="http://www.swinburne.edu.au/images/icons/icon-pdf.gif" 

   alt="PDF Document" width="32" height="32" />

   <div>

  	<h3><a href="#">Coversheet Applications</a></h3>

  	<p>To be completed in full .</p>

   </div>

   </li>

</ul>

Add class="alt" to the li tag to make every second document have a grey background 
<li class="alt">

Other images can be used:

HTML Document 
<img src="http://www.swinburne.edu.au/images/icons/icon-html.gif" alt="html document" 
  width="32" height="32" />
Word Document 
<img src="http://www.swinburne.edu.au/images/icons/icon-doc.gif" alt="Word Document" 
  width="32" height="32" />
Excel Document 
<img src="http://www.swinburne.edu.au/images/icons/icon-xls.gif" alt="Excel Document" 
  width="32" height="32" />
Power point Document 
<img src="http://www.swinburne.edu.au/images/icons/icon-ppt.gif" alt="Powerpoint Document" 
  width="32" height="32" />

<ul class="first-level-menu">
   <li><a href="#"><strong>Link 1</strong> 
    	<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span></a></li>
	
    <li><a href="#"><strong>Link 2</strong> 
    	<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span></a></li>
  	
    <li><a href="#"><strong>Link 3</strong> 
    	<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span></a></li>
  	
    <li><a href="#"><strong>Link 4</strong> 
    	<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span></a></li>
</ul>

Floated Bulleted Lists

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Fusce rutrum libero dictum odio

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Fusce rutrum libero dictum odio

<div class="bullet-points flow-right">
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
	<ul>
		<li><a href="#">Fusce  rutrum libero dictum odio</a></li>
		<li><a href="#">Donec faucibus mi et ante</a></li>
		<li><a href="#">fermentum non</a></li>
		<li>Nam tincidunt interdum tellus</li>
		<li>Lorem ipsum dolor sit amet</li>
	</ul>
	<p>Fusce  rutrum libero dictum odio</p>
</div>


To float left, change the div to the following

<div class="bullet-points flow-left">

Podcast Listing


<ul class="podcast-episodes">
 	<li>
 		<img src="http://www.swinburne.edu.au/images/icons/podcast-preview.jpg"
        	alt="Podcast picture" width="54" height="54" /> 
    	<div>  
    		<h3><a href="#">Podcast title</a></h3>
        	<p>Some text to describe the content of this podcast with a 
        	<a href="#">random link</a> and other text.</p>
        	<dl>
        		<dt>Running time:</dt>
                	<dd>6 mins 21 secs</dd>  
            		<dt>Viewing options:</dt>
            		<dd>
   				<ul>
                			<li><a href="#">Windows Media</a></li>
                    			<li><a href="#">Quicktime</a></li>
                    			<li><a href="#">More download/viewing options</a></li>
                		</ul>  
            		</dd>
       		</dl>
    	</div>
	</li>
</ul>

Add class="alt" to the li tag to make every second document have a grey background 
<li class="alt">

Event Listings

Titles:
What is Research? Designing A Research Project
Presenter:
Professor John Smith
Brief Description:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend egestas nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam tincidunt interdum tellus.

  • Random
  • Bullet
  • Points
Date:
Tuesday, February 12 2008, 3:00pm
Venue:
AGSE 207
Status:
Refer to contact person
Links:
View Full Details
Titles:
What is Research? Designing A Research Project
Presenter:
Professor John Smith
Brief Description:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend egestas nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam tincidunt interdum tellus.

  • Random
  • Bullet
  • Points
Date:
Tuesday, February 12 2008, 3:00pm
Venue:
AGSE 207
Status:
Refer to contact person
Links:
View Full Details

<dl class="event-details">
	<dt>Titles:</dt>
    <dd><strong>What is Research? Designing A Research Project</strong></dd>
    <dt>Presenter:</dt>  
    <dd>Professor John Smith</dd>
    <dt>Brief Description:</dt>
    <dd>
    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend  egestas nisi. Pellentesque 
        habitant morbi tristique senectus et netus  et malesuada fames ac turpis egestas. Nam tincidunt 
        interdum tellus.</p>
        <ul>
           <li>Random</li>
            <li>Bullet</li>  
            <li>Points</li>
        </ul>
   </dd>
   <dt>Date:</dt>
   <dd>Tuesday, February 12 2008, 3:00pm</dd>
   <dt>Venue:</dt>
   <dd>AGSE 207</dd> 
   <dt>Status:</dt>
   <dd>Refer to contact person</dd>
   <dt>Links:</dt>
   <dd><a href="#">View Full Details</a></dd>
</dl>

Add class="alt" to the li tag to make every second document have a grey background 
<dl class="event-details alt">
Back to Top