Skip UCSF navigation|About accessibility UCSF University of California, San Francisco
About UCSF
Search UCSF
UCSF Medical Center
End of UCSF navigation
Skip breadcrumbs navigationUCSF which contains School of Pharmacy which contains Information for Web Developers which contains Web Developer's Guide which contains Step 8: Build your site which contains Style Guide which contains Visual Design which contains Text which contains Lists
School of Pharmacy•
Text
Overview |
Fonts |
Stylesheets |
Body Text |
Headings |
Lists

End of section-level navigation

Lists

Use ol and ul tags to create ordered (numbered) and unordered (unnumbered) lists.

Ordered List

<ol>
<li>Doonesbury</li>
<li>Garfield</li>
<li>Snoopy</li>
<li>Dilbert</li>
<li>Calvin and Hobbes</li>
<li>Cathy</li>
</ol>

  1. Doonesbury
  2. Garfield
  3. Snoopy
  4. Dilbert
  5. Calvin and Hobbes
  6. Cathy

Unordered List

<ul>
<li>Doonesbury</li>
<li>Garfield</li>
<li>Snoopy</li>
<li>Dilbert</li>
<li>Calvin and Hobbes</li>
<li>Cathy</li>
</ul>

Unordered List With Bullets

Use the bullet class on a ul tag to create a list with bullets.

<ul class="bullet">
<li>Doonesbury</li>
<li>Garfield</li>
<li>Snoopy</li>
<li>Dilbert</li>
<li>Calvin and Hobbes</li>
<li>Cathy</li>
</ul>

Our bullet list uses round circles that match one of our standard colors. Do not use other bullet types.

Nested Lists

On occasion, you may need to nest one list within another. For an example of coding a nested list, view the source code for Admissions Steps. Nested lists can be tricky to get the right result. If you need assistance, contact us.

Go To: Text or Visual Design or Style Guide