List

Easily create nice looking lists, which come in different styles.

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>

- 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 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>

Disc
- List item 1
- List item 2
- List item 3
Circle
- List item 1
- List item 2
- List item 3
Square
- List item 1
- List item 2
- List item 3
Decimal
- List item 1
- List item 2
- List item 3
Hyphen
- List item 1
- List item 2
- List item 3

<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>

Muted
- List item 1
- List item 2
- List item 3
Emphasis
- List item 1
- List item 2
- List item 3
Primary
- List item 1
- List item 2
- List item 3
Secondary
- List item 1
- List item 2
- List item 3

<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 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>

- 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>

- 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>

- 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>

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>

Large
- List item 1
- List item 2
- List item 3
- List item 1
- List item 2
- List item 3
- List item 1
- List item 2
- List item 3
- List item 1
- List item 2
- List item 3
Collapse
- List item 1
- List item 2
- List item 3
- List item 1
- List item 2
- List item 3
- List item 1
- List item 2
- List item 3
- List item 1
- List item 2
- List item 3

<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>