UIkit List

UIkit list component creates a nice looking list with different predefined styles.

Steps To Create UIkIT List Component

Add .uk-list class to the unordered i.e <ul> or ordered i.e <ol> element base class to create UIkit list component.

Example

PHP
JSON
Jquery

General Syntax

      <ul class="uk-list">
  <li>List Item</li>
</ul>

Try it now

Source Code

     <ul class="uk-list">
  <li>PHP</li>
  <li>JSON</li>
  <li>Jquery</li>
</ul>

Try it now

Source Code : Output

The above source code result will be:

  PHP
JSON
Jquery

UIkit List Style Modifier

Followings are the predefined classes that are applied on the list to create different styles of lists. These predefined classes are:

.uk-list-disc- It uses a filled circle as a marker.
.uk-list-circle- It uses a hollow circle as a marker.
.uk-list-square - It uses a filled square as a marker.
.uk-list-decimal - It uses decimal numbers as markers. Beginning with 1.
.uk-list-hyphen - It uses .uk-list-hyphen Use a hyphen as marker.

General Syntax

      <ul class="uk-list uk-list-disc"></ul>
<ul class="uk-list uk-list-circle"></ul>
<ul class="uk-list uk-list-square"></ul>
<ul class="uk-list uk-list-decimal"></ul>
<ul class="uk-list uk-list-hyphen"></ul>

Try it now

Source Code

     <div class="uk-container">
  <ul class="uk-list uk-list-disc">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
</div>

Try it now

Source Code : Output

The above source code result will be:

  List item 1
List item 2
List item 3

UIkit List Component Color modifiers

Add one of the following classes to set the marker color.

.uk-list-muted:Used to mute the marker.
.uk-list-emphasis:Used to emphasize the marker.
.uk-list-primary:Used to emphasize the marker with the primary color.
.uk-list-secondary:Used to emphasize the marker with the secondary color.

Example

Primary List

List item 1
List item 2
List item 3

General Syntax

      <ul class="uk-list uk-list-disc uk-list-primary">...</ul>

Try it now

Source Code

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

Try it now

Source Code : Output

The above source code result will be:

    Muted
    List item 1
List item 2
List item 3

  

UiKit Image Bullet Modifier

Add the .uk-list-bullet class to set a custom image bullet as a marker of a list item. Please keep in mind that, it can not be combined with color modifiers.

Example

List item 1
List item 2
List item 3

General Syntax

      <ul class="uk-list uk-list-bullet">...</ul>

Try it now

Source Code

     <ul class="uk-list uk-list-bullet">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>

Try it now

Source Code : Output

The above source code result will be:

  List item 1
List item 2
List item 3

Divider Modifier

Add the .uk-list-divider class to separate list items with lines.

Example

List item 1
List item 2
List item 3

General Syntax

      <ul class="uk-list uk-list-divider"></ul>

Try it now

Source Code

     <ul class="uk-list uk-list-divider">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

Try it now

Source Code : Output

The above source code result will be:

  List item 1
List item 2
List item 3

UIkit Striped Modifier

To create a striped modifier, add the .uk-list-striped class to the list container base class.

Example

List item 1
List item 2
List item 3

General Syntax

      <ul class="uk-list uk-list-striped">...</ul>

Try it now

Source Code

     <ul class="uk-list uk-list-striped">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>

Try it now

Source Code : Output

The above source code result will be:

  List item 1
List item 2
List item 3

UIkit Size Modifier

To increase or decrease the space between list items add .uk-list-large and .uk-list-collapse correspondingly.

General Syntax

      <ul class="uk-list uk-list-large">...</ul>

Try it now

Source Code

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

Try it now

Source Code : Output

The above source code result will be:

    List item 1
List item 2
List item 3

  

UIkit List

Steps To Create UIkIT List Component

Example

UIkit List Style Modifier

UIkit List Component Color modifiers

Example

Primary List

Muted

UiKit Image Bullet Modifier

Example

Divider Modifier

Example

UIkit Striped Modifier

Example

UIkit Size Modifier

Web Tutorials