Lists

Lists are an effective way to visually highlight important information so that it can be more easily scanned and read. Before writing a list, it’s important to identify the best style needed for the information being presented.

Types

Bulleted list

Use a bulleted list when grouping similar items or short thoughts into “bite-size” chunks. Generally, the order or count of the items in a bullet list isn’t important. An exception to this may be a list of states, which naturally fits into an alphabetical order.

  • List item 1
  • List item 2
    • List item 2a
    • List item 2b
    • List item 2c
  • List item 3

HTML code snippet

<ul class="m-list">
    <li class="m-list_item">List item 1</li>
    <li class="m-list_item">
        List item 2
        <ul class="m-list">
            <li class="m-list_item">List item 2a</li>
            <li class="m-list_item">List item 2b</li>
            <li class="m-list_item">List item 2c</li>
        </ul>
    </li>
    <li class="m-list_item">List item 3</li>
</ul>

Specs

Default

  • Avenir Next Regular, 16px
  • Margin bottom (list item): 8px
  • Margin top (list): 10px
  • Margin bottom (list): 15px
  • Bullets are solid squares
  • Bullets are aligned flush with the left margin of the column of text they’re in

Nested

  • Bullets are open circles and flush left with the preceding line of text

Numbered list

When the order of information presented is important, use a numbered list. This could include chronological items, things presented in the order of importance, or a finite list of a counted number of items.

Less than 10 items is not indented.

  1. List item 1
  2. List item 2
  3. List item 3

More than 9 items is indented to align double digits. Inner lists are not indented, regardless of the number of items.

  1. List item 1
  2. List item 2
    1. Nested item 2-1
    2. Nested item 2-2
    3. Nested item 2-3
    4. Nested item 2-4
    5. Nested item 2-5
    6. Nested item 2-6
    7. Nested item 2-7
    8. Nested item 2-8
    9. Nested item 2-9
    10. Nested item 2-10
  3. List item 3
    1. Nested item 3-1
    2. Nested item 3-2
    3. Nested item 3-3
  4. List item 4
  5. List item 5
  6. List item 6
  7. List item 7
  8. List item 8
  9. List item 9
  10. List item 10

HTML code snippet

<p>Less than 10 items is not indented.</p>
<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ol>

<p>
  More than 9 items is indented to align double digits.
  Inner lists are not indented, regardless of the number of items.
</p>
<ol>
    <li>List item 1</li>
    <li>
        List item 2
        <ol>
              <li>Nested item 2-1</li>
              <li>Nested item 2-2</li>
              <li>Nested item 2-3</li>
              <li>Nested item 2-4</li>
              <li>Nested item 2-5</li>
              <li>Nested item 2-6</li>
              <li>Nested item 2-7</li>
              <li>Nested item 2-8</li>
              <li>Nested item 2-9</li>
              <li>Nested item 2-10</li>

        </ol>
    </li>
    <li>List item 3
        <ol>
              <li>Nested item 3-1</li>
              <li>Nested item 3-2</li>
              <li>Nested item 3-3</li>
        </ol>
    </li>
    <li>List item 4</li>
    <li>List item 5</li>
    <li>List item 6</li>
    <li>List item 7</li>
    <li>List item 8</li>
    <li>List item 9</li>
    <li>List item 10</li>
</ol>

Specs

Default

  • Avenir Next Regular, 16px
  • Margin bottom (list item): 8px
  • Margin top (list): 10px
  • Margin bottom (list): 15px
  • Numbers are right aligned to their associated period; all single-digit numbers fit inside the left margin

Nested

  • Depending on the content and use case, nested items may either appear as bullets — solid squares — that are flush left with the preceding line of text, or lower-cased letters, as shown in the example.

Variations

Unstyled list

Unstyled list removes bullets and other styling from a list.

  • List item 1
  • List item 2
  • List item 3

HTML code snippet

<ul class="m-list m-list__unstyled">
    <li class="m-list_item">List item 1</li>
    <li class="m-list_item">List item 2</li>
    <li class="m-list_item">List item 3</li>
</ul>

Horizontal list

A modifier for the list to make it show items horizontally.

  • List item 1
  • List item 2
  • List item 3

HTML code snippet

<ul class="m-list m-list__horizontal">
    <li class="m-list_item">List item 1</li>
    <li class="m-list_item">List item 2</li>
    <li class="m-list_item">List item 3</li>
</ul>

Link list

The link list modifier is intended to be used for lists where each item is a link. It converts to a finger-friendly link with a large tap area on smaller screens.

Spaced list

Spaced list adds extra padding to every element in a list.

  • List item 1
  • List item 2
  • List item 3

HTML code snippet

<ul class="m-list m-list__spaced">
    <li class="m-list_item">List item 1</li>
    <li class="m-list_item">List item 2</li>
    <li class="m-list_item">List item 3</li>
</ul>

Guidelines

Content guidelines

List items should:

  • Be capitalized
  • Avoid unnecessary repetition
  • Have a parallel structure
  • Start with an introductory clause or sentence
  • Use consistent punctuation

If the list items are complete sentences, the introductory clause should also be a complete sentence, followed by a colon. These list items should end with a period.

If the list items are a group of short fragments that each work to complete an introductory clause, the introductory clause should also be a short fragment, followed by a colon. These list items should end with no punctuation.

Edit page