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 #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

Unordered List Anatomy Image
  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

Unordered List Specs Image

Code

Ordered List

Anatomy

Ordered List Anatomy Image
  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

Ordered List Specs Image

Code

Definitions List

Anatomy

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

Specs

Definitions List Specs Image

Code