Skip UCSF navigation|About accessibility UCSF University of California, San Francisco
About UCSF
Search UCSF
UCSF Medical Center
End of UCSF navigation
Text
Overview |
Fonts |
Stylesheets |
Body Text |
Headings |
Lists

End of section-level navigation

School of Pharmacy•

UCSF School of Pharmacy

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>

  • Doonesbury
  • Garfield
  • Snoopy
  • Dilbert
  • Calvin and Hobbes
  • Cathy

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>

  • Doonesbury
  • Garfield
  • Snoopy
  • Dilbert
  • Calvin and Hobbes
  • Cathy

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