List

List elements and components should be used whenever grouped info is presented on sites. We provide a number of list classes to adjust the styling as needed on your site.

Examples and Code

Select exampleDefaultSimple ListsNested Numbers

Open Full Example

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Open Full Example

<ul class="list-style--simple">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Open Full Example

<ol class="list-style--nested-numbers">
  <li>Item 1</li>
  <li>Item 2</li>
  <li> Subitem parent
    <ol class="list-style--nested-numbers">
      <li>Subitem 1</li>
      <li>Subitem 2</li>
    </ol>
  </li>
</ul>

Guidance

When to Use Lists

• For repeating content: Groups of articles, profiles, etc.
• For checklists
• For numerical listings

Usage Guidance

• Don’t use nonstandard bullets: Nonstandard bullet styles are not supported by cosmic and may not display correctly.

Accessibility Guidance

• Use lists for grouped data, and do not use lists for mere styling: Lists have a specific meaning to screenreaders. Data that is grouped should always be in a list if possible. List elements should not be used for styling elements if the items in that list are not grouped or related.
• Use the proper list type for your content: If the list has an order to it, be sure to use an ordered list (ol) element. If the list has no particular order to it, use an unordered list (ul) element.

Styles

Classname	Effect	Reason to Use
list-style--simple	List has no icons or padding	Use when needed for page’s design
list-style--nested-numbers	Roman Numeral numbered list with subnesting for chapters	Use for complex policy lists