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>
Copy to clipboard
-
- List item 1
- List item 2
- List item 3
-
<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 a filled circle as a 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>
Copy to clipboard
-
-
<div class="uk-child-width-expand@s" uk-grid> <div> <h4 class="uk-h4 uk-margin">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 class="uk-h4 uk-margin">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 class="uk-h4 uk-margin">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 class="uk-h4 uk-margin">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 class="uk-h4 uk-margin">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-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>
Copy to clipboard
-
-
<div class="uk-child-width-expand@s" uk-grid> <div> <h4 class="uk-h4 uk-margin">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 class="uk-h4 uk-margin">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 class="uk-h4 uk-margin">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>
Image bullet modifier
Add the .uk-list-bullet
class to set a custom image bullet as a marker of a list item. Mind, that it can not be combined with color modifiers.
<ul class="uk-list uk-list-bullet">
…
</ul>
Copy to clipboard
-
- List item 1
- List item 2
- List item 3
-
<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>
Copy to clipboard
-
- List item 1
- List item 2
- List item 3
-
<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>
Copy to clipboard
-
- List item 1
- List item 2
- List item 3
-
<ul class="uk-list uk-list-striped"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul>
Accessibility
Set the appropriate WAI-ARIA roles, states and properties to the List component.
- If a
<div>
element is used, set thelist
role to the list, and thelistitem
role to the list items.
<div class="uk-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>
- On This Page
- Usage
- Style type modifiers
- Color modifiers
- Image bullet modifier
- Divider modifier
- Striped modifier
- Accessibility
Support
Franken UI is an independent project free for everyone. Help
support it and expand its component library.