Skip to main content

List

The list component provides a consistent way to deal with lists of information. Two list types are supported: unordered lists and ordered lists.

Example

Bulleted
  • 6th Gen Intel Core i7, 256GB SSD, 8GB RAM / dGPU
  • 13.5-inch PixelSense touchscreen display
  • Surface Pen included
  • Windows 10 Pro
Ordered
  1. 6th Gen Intel Core i7, 256GB SSD, 8GB RAM / dGPU
  2. 13.5-inch PixelSense touchscreen display
  3. Surface Pen included
  4. Windows 10 Pro
Different list styles on a default theme

Best practices

Use lists when you need to display content collections, particularly when they are text-heavy.

Use the unordered list for a collection of related items that have no special order or sequence. List items are typically bulleted.

Use the ordered list to put your items in a decimal numbered list. The numbering starts at 1 with the first list item and is incremented by 1 for each successive ordered list item.

Do

  • Introduce a list with a heading or with a sentence or fragment ending with a colon.
  • Begin each entry in a bulleted or numbered list with an initial capital letter, where possible.
  • End each list entry with a period if all entries are complete sentences. If one or more of the entries contains both a fragment and a complete sentence that offers additional information, end each entry with a period. If the entries all complete the introductory sentence or fragment, end each entry with the appropriate terminal punctuation.
  • If the list entry is a word, phrase, or sentence fragment, do not use terminal punctuation.
  • Consecutive lists on a page should be separated by a heading for each successive list.
  • Use multi-column lists when it benefits the user to see more list items at a glance rather than having to scroll to see more list items.
  • You can use the start property to set the starting value of an ordered list, if needed.

Don’t

  • Do not use a list if the content is not primarily text.
  • Do not use the HTML type attribute to change the numbering or bullet style of the list.

Also known as

Bullet list
Ordered list
Structured list

Related

Paragraph
Table

Accessibility

  • No special requirements.

Options

  • Ordered: To create an ordered list component, use an ordered list element and assign it with the class c-list.
  • Unordered: To create an unordered list component, use an unordered list element and assign it with the class c-list.
  • Bare: Add the class f-bare to get an unordered list without bullets. You can use f-bare in combination with f-lean.
  • Lean: Add the class f-lean to tighten the vertical spacing between list items. You can use f-lean in combination with f-bare.

Specifications

  • Lists can be configured using 1 to 6 columns.
  • Multi-column lists are to stack at viewport 2 to 3 (i.e. stack-2 to stack-3).

Development

  • Schema definition: The list schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Default Unordered list

  • List item
  • List item
  • List item
  • List item
<ul class="c-list">
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ul>

Default Ordered list

  1. List item
  2. List item
  3. List item
  4. List item
<ol class="c-list">
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ol>

Unordered list with bare option

  • List item
  • List item
  • List item
  • List item
<ul class="c-list f-bare">
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ul>

Unordered list with bare and lean options

  • List item
  • List item
  • List item
  • List item
<ul class="c-list f-bare f-lean">
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ul>