Lists

Display a single list of items in a quick, scannable format

The UCLA brands dictates that lists are ordered with numbers or bullets in #2774AE which is the “$ucla-blue” variable. Examples can be found here.

Usage

Usability Guidance

• Front-load the first two words of your headlines for easy eye scanning.
• Progressively disclose lists with more than several dozen items with a ‘more’ link or button.

Accessibility Requirements

• Use the <li> element for more than text-only lists. It’s a critical component in web accessibility. It tells non-sighted users if they’re about to browse a few items of content or hundreds. Any list of content such as news articles, calendar events, academic programs, etc. should be wrapped in <li> to communicate how many items belong in that list.

Unordered List

Anatomy

1. Tier 1 List Item (required)
2. Bullet Icon (required)
3. List Item Text (required)
4. List Item Link (optional)
5. Tier 2 List Item (optional)

Specs

Code

<ul class="ucla-list--bulleted">
  <li>Unordered List Item</li>
  <li>Unordered List Item
</ul>

<!-- Unordered List Body Paragrapgh-->
<ul class="ucla-list--bulleted">
  <li>Unordered List Item. A series of sentences together which make a paragraph. Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito.</li>
  <li>Unordered List Item. A series of sentences together which make a paragraph. Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito.</li>
</ul>

<!-- Multi Level Unordered List -->
<ul class="ucla-list--bulleted">
  <li>Unordered List Item</li>
  <li>Unordered List Item
    <ul class="ucla-list--bulleted">
      <li>Unordered List Item</li>
      <li>Unordered List Item</li>
      <li>Unordered List Item</li>
    </ul>
  </li>
  <li>Unordered List Item</li>
</ul>

Ordered List

Anatomy

1. Tier 1 List Item (required)
2. Order Number (required)
3. List Item Text (required)
4. List Item Link (optional)
5. Tier 2 List Item (optional)

Specs

Code

<ol class="ucla-list--numbered">
  <li>Ordered List Item 1</li>
  <li>Ordered List Item 2</li>
  <li>Ordered List Item 3</li>
  <li>Ordered List Item 4</li>
  <li>Ordered List Item 5</li>
  <li>Ordered List Item 6</li>
  <li>Ordered List Item 7</li>
  <li>Ordered List Item 8</li>
  <li>Ordered List Item 9</li>
  <li>Ordered List Item 10</li>
</ol>

<!-- Multi Level Ordered List -->
<ol class="ucla-list--numbered">
  <li>Ordered List Item 1</li>
  <li>Ordered List Item 2
    <ol class="ucla-list--numbered">
      <li>Ordered List Item 2.1</li>
      <li>Ordered List Item 2.2</li>
      <li>Ordered List Item 2.3</li>
    </ol>
  </li>
  <li>Ordered List Item 3</li>
  <li>Ordered List Item 4</li>
</ol>

Definitions List

Anatomy

1. List Item (required)
2. Definition Text (required)
3. Description Text (required)

Specs

Code