Lists

Ordered / Unordered Lists

Unordered lists should have no list marker, while ordered lists should have decimal number markers.

To use a list header, copy the .list-header CSS from the codepen below and apply the class to a header tag above the list.

Unordered List:

List Header

  • example 1
  • example 2
  • example 3

Ordered List:

List Header

  1. numbered example
  2. numbered example
  3. numbered example

See the Pen Lists by Tyson Foster (@Foster-Design-System) on CodePen.

Side-By-Side Lists:

To have multiple lists side by side, place them into a div with the .list-container class from the codepen below, and put each column into a separate div like in the example below. To have multiple lists in one column, simply put them both in the same .list-column div.

Example 1 Header

  • Example 1-1
  • Example 1-2
  • Example 1-3
  • Example 1-4
  • Example 1-5
  • Example 1-6

Example 2 Header

  • Example 2-1
  • Example 2-2
  • Example 2-3

Example 3 Header

  • Example 3-1
  • Example 3-2
  • Example 3-3

See the Pen Untitled by Tyson Foster (@Foster-Design-System) on CodePen.

Lists of Links:

To use a list of links, copy the HTML and CSS from the codepen below and replace the href attribute and link text as needed

See the Pen List of Links by Tyson Foster (@Foster-Design-System) on CodePen.