Creating lists

Lists feature regularly in help center articles and our themes offer different list styles that you can apply to your content.

Standard numbered (Add numbered list button) and bulleted list (Add bulleted list button) can be created using the Zendesk article editor toolbar.

<ol>
  <li>Lorem ipsum dolor sit amet, adipiscing elit.</li>
  <li>Nulla vitae elit libero, a pharetra augue.
    <ul>
      <li>Donec id elit non mi porta gravida at eget metus.</li>
      <li>Quisque fringilla elit quis purus consectetur.</li>
    </ul>
  </li>
</ol>
<ul>
  <li>Lorem ipsum dolor sit amet, adipiscing elit.</li>
  <li>Nulla vitae elit libero, a pharetra augue.
    <ul>
      <li>Donec id elit non mi porta gravida at eget metus.</li>
      <li>Quisque fringilla elit quis purus consectetur.</li>
    </ul>
  </li>
</ul>

Use .list-item to add additional space around each list item.

<ul>
  <li class="list-item">Lorem ipsum dolor sit amet, adipiscing elit.</li>
  <li class="list-item">Nulla vitae elit libero, a pharetra augue.
    <ul>
      <li class="list-item">Donec id elit non mi porta gravida at eget metus.</li>
      <li class="list-item">Quisque fringilla elit quis purus consectetur.</li>
    </ul>
  </li>
</ul>

Our margin utilities can also be used to control the spacing between list items.

Use .list-number to apply a custom numbered style to a list.

<ol class="list-number">
  <li class="list-item">List item</li>
  <li class="list-item">List item</li>
  <li class="list-item">List item</li>
</ol>

Use .list-check to apply a custom checklist style to a list.

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

For more examples refer to our Lists and List groups element pages.

Questions or feedback about this article? Let us know