Easily create nice looking lists, which come in different styles.
To apply this component, add the .z-list class to an unordered or ordered list. The list will now display without any spacing or list-style.
<ul class="z-list">
<li></li>
<li></li>
<li></li>
</ul>Add one of the following classes to set the marker of a list item.
| Class | Description |
|---|---|
.z-list-disc | Use a filled circle as a marker. |
.z-list-circle | Use a hollow circle as marker. |
.z-list-square | Use a filled square as marker |
.z-list-decimal | Use decimal numbers as marker. Beginning with 1. |
.z-list-hyphen | Use a hyphen as marker |
<ul class="z-list z-list-disc">
…
</ul>Add the .z-list-divider class to separate list items with lines.
<ul class="z-list z-list-divider">
…
</ul>Add zebra-striping to a list using the .z-list-striped class.
<ul class="z-list z-list-striped">
…
</ul>Set the appropriate WAI-ARIA roles, states and properties to the List component.
<div> element is used, set the list role to the list, and the listitem role to the list items.<div class="z-list" role="list">
<div role="listitem">List item 1</div>
<div role="listitem">List item 2</div>
<div role="listitem">List item 3</div>
</div>