Lists

Jump to: Ordered List | Unordered List

Lists consist of related text content grouped together.

Ordered List

An ordered list is a grouping of related items that are in a specific order. Each styled ordered list item begins with a number.

Example

---

Best Practices

• An ordered list is used when there is an order or priority that needs to be displayed within a group of items.
• Use an unstyled ordered list to remove the list’s numbers but keep the spacing and margins of a list. A screen reader will still read the order of a list, even if it is unstyled.

HTML

<ol>
  <li>Art</li>
  <li>Biology</li>
  <li>Computer Science & Engineering</li>
  <li>Earth & Planetary Sciences</li>
  <li>Environmental Studies</li>
</ol>

CSS

ol {
  list-style: decimal;
  margin: 0 0 1em 0;
  padding-left: 1.5em;
  font-size: 1.2rem;
}

ol.unstyled {
  list-style: none;
}

ol.unstyled ol {
  list-style: none;
}

Unordered List

An unordered list is a grouping of related items that aren’t in a specific order. Each styled unordered list item begins with a bullet.

Example

---

Best Practices

• An unordered list is used when all list items are equal in importance.
• Use an unstyled unordered list to remove the list’s bullets but keep the spacing and margins of a list.

HTML

<ul>
  <li>Arts & Sciences</li>
  <li>Brown School</li>
  <li>Olin Business School</li>
  <li>Sam Fox School of Design & Visual Arts</li>
  <li>School of Medicine</li>
</ul>

CSS

ul {
  list-style: disc;
  margin: 0 0 1em 0;
  padding-left: 1.5em;
  font-size: 1.2rem;
}

ul.unstyled {
  list-style: none;
}

ul.unstyled ul {
  list-style: none;
}