Standard lists
Standard ordered (<ol>) and unordered (<ul>) lists can be added to article content using the Zendesk article editor.
<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.
Definition lists
Use <dl> to wrap one or more combinations of <dt> and <dd> elements to create a description list.
<dl>
<dt>Description term</dt>
<dd>Description element</dd>
</dl>Custom styles
Unstyled list
Use .list-unstyled to remove the default styling from <ol> and <ul> elements.
<ul class="list-unstyled">
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>Our list style utilities provide additional control over the look-and-feel of lists.
Numbered list
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>Check list
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>Divider list
Use .divider-list to present list items in a horizontal list separated by a divider.
<ul class="list-divider">
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>The data-divider attribute allows you to override the divider applied before a given list item:
<ul class="list-divider">
<li>List item</li>
<li data-divider=">">List item</li>
<li data-divider="/">List item</li>
</ul>