List
Easily create nice looking lists, which come in different styles.
Table of contents
-
Usage -
Style type modifiers -
Color modifiers -
Image bullet modifier -
Divider modifier -
Striped modifier -
Accessibility
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.
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 |
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. |
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.
Divider modifier
Add the .uk-list-divider class to separate list items with lines.
Striped modifier
Add zebra-striping to a list using the .uk-list-striped class.
Accessibility
Set the appropriate WAI-ARIA roles, states and properties to the List component.
- If a
<div>element is used, set thelistrole to the list, and thelistitemrole to the list items.
Support
Franken UI is an independent project free for everyone. Help support it and
expand its component library.