List
Easily create nice looking lists, which come in different styles.
# Usage
To apply this component, add the .uk-list class to an unordered or ordered list. The list will now display without any spacing or list-style.
<ul class="uk-list">
<li></li>
<li></li>
<li></li>
</ul>
<ul class="uk-list">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
# Style type modifiers
Add one of the following classes to set the marker of a list item.
| Class | Description |
|---|---|
.uk-list-disc | Use filled circle as marker. |
.uk-list-circle | Use a hollow circle as marker. |
.uk-list-square | Use a filled square as marker |
.uk-list-decimal | Use decimal numbers as marker. Beginning with 1. |
.uk-list-hyphen | Use a hyphen as marker |
<ul class="uk-list uk-list-disc">…</ul>
<div class="uk-child-width-expand@s" uk-grid>
<div>
<h4>Disc</h4>
<ul class="uk-list uk-list-disc">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
<div>
<h4>Circle</h4>
<ul class="uk-list uk-list-circle">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
<div>
<h4>Square</h4>
<ul class="uk-list uk-list-square">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
<div>
<h4>Decimal</h4>
<ul class="uk-list uk-list-decimal">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
<div>
<h4>Hyphen</h4>
<ul class="uk-list uk-list-hyphen">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
</div>
# Color modifiers
Add one of the following classes to set the marker color.
| Class | Description |
|---|---|
.uk-list-muted | Add this class to mute the marker. |
.uk-list-emphasis | Add this class to emphasize the marker. |
.uk-list-primary | Add this class to emphasize the marker with the primary color. |
.uk-list-secondary | Add this class to emphasize the marker with the secondary color. |
<ul class="uk-list uk-list-disc uk-list-primary">…</ul>
<div class="uk-child-width-expand@s" uk-grid>
<div>
<h4>Muted</h4>
<ul class="uk-list uk-list-disc uk-list-muted">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
<div>
<h4>Emphasis</h4>
<ul class="uk-list uk-list-disc uk-list-emphasis">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
<div>
<h4>Primary</h4>
<ul class="uk-list uk-list-disc uk-list-primary">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
<div>
<h4>Secondary</h4>
<ul class="uk-list uk-list-disc uk-list-secondary">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
</div>
Note The color modifiers don't work in Chrome and Edge because the ::marker pseudo-element is not supported yet. Vote this Chromium issue (opens new window) up, to give it more attention.
# Image bullet modifier
Add the .uk-list-bullet class to set a custom image bullet as marker of a list item. Mind, that it can not be combined with color modifiers.
<ul class="uk-list uk-list-bullet">…</ul>
<ul class="uk-list uk-list-bullet">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
# Divider modifier
Add the .uk-list-divider class to separate list items with lines.
<ul class="uk-list uk-list-divider">…</ul>
<ul class="uk-list uk-list-divider">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
# Striped modifier
Add zebra-striping to a list using the .uk-list-striped class.
<ul class="uk-list uk-list-striped">…</ul>
<ul class="uk-list uk-list-striped">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
# Size modifier
Add one of the following classes to increase or decrease the spacing between list items. You can combine this with any of the other list modifiers.
| Class | Description |
|---|---|
.uk-list-large | Increase the spacing between list items. |
.uk-list-collapse | Remove the spacing between list items. |
<ul class="uk-list uk-list-large">…</ul>
<h4>Large</h4>
<div class="uk-child-width-expand@s" uk-grid>
<div>
<ul class="uk-list uk-list-large">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
<div>
<ul class="uk-list uk-list-large uk-list-disc">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
<div>
<ul class="uk-list uk-list-large uk-list-divider">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
<div>
<ul class="uk-list uk-list-large uk-list-striped">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
</div>
<h4>Collapse</h4>
<div class="uk-child-width-expand@s" uk-grid>
<div>
<ul class="uk-list uk-list-collapse">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
<div>
<ul class="uk-list uk-list-collapse uk-list-disc">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
<div>
<ul class="uk-list uk-list-collapse uk-list-divider">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
<div>
<ul class="uk-list uk-list-collapse uk-list-striped">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
</div>