Lists | Life Time | Core Design Guidelines

Unordered
Ordered
Definition
Centered
Grid
Inline

An unordered list does not have an order of importance or sequence.

Examples

An ordered list defines a specific sequence of items.

Examples

A definition list pairs a definition term with a definition description—both are required.

Examples

A centered list uses horizontal dividers between each list item. List items can be any length and this type of list is only one level deep.

Examples

This type of list is only one level deep and best used when there is an extensive list of items, like in-page navigation. It‘s similar to the centered list, but this list is one column at the xs breakpoint, two columns for the sm and md breakpoints, and three columns for the lg+ breakpoints.

Examples

An inline list places list items on a single line. Items will wrap as necessary.

Examples

Usage

Rules

Do not use lists solely for layout purposes
Do not try to replicate the look of a list with other elements—the semantics will be lost

Constraints

Unordered lists do not imply semantic hierarchy, although they may infer hierarchy simply from reading flow
Ordered lists indicate rank and order

Principle

Use a list to organize, order, or in the case of a definition list, to group terms and definitions.

Accessibility

Screen readers are not consistent in how they read definition lists, therefore it is not recommended to use them for FAQs or similar where the question/answer relationship may not be maintained

Class Names

list-bulleted Modifier	Use `.list-bulleted` on a `<ul>` to use a disc as a bullet
list-dashed Modifier	Use `.list-dashed` on a `<ul>` to use a dash as a bullet
list-unstyled Modifier	Use `.list-unstyled` on a `<ul>` to remove the default list style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well if they should also be unstyled.
list-ordered Modifier	Use `.list-ordered` on a `<ol>` to allow for a nested ordered lists. Ordered lists take advantage of the `counter-increment` attribute to generate the list numbers.
dl-horizontal Modifier	Use `.dl-horizontal` on a `<dl>` to place the `<dt>` to the left of its corresponding `<dd>`. The `<dl>` must be wrapped in either `.container` or `.container-fluid` container. Use column classes on both the `<dt>` and `<dd>`. Note that you probably want all of the `<dt>`‘s to have matching column classes, and the same applies where the `<dd>`‘s should have matching classes.
list-centered Modifier	Use `.list-centered` on a `<ul>` to center a list and use horizontal dividers
list-centered-grid Modifier	Use `.list-centered-grid` on a `<ul>` to match the style of `.list-centered`, but leverage the grid so that list items flow and wrap left-to-right in a normal reader flow at the sm breakpoint and up.
list-inline Modifier	Use `.list-inline` on a `<ul>` to place all list items on a single line with some basic margin between
small Modifier	Use `.small` on a `<ul>` to use smaller text (14px)
micro Modifier	Use `.micro` on a `<ul>` to use micro text (13px) for legal or references

Last updated April 6, 2018
Authorable - Yes
Core - Lists