Lists

You can create an unordered list using the [list]. The li element defines the list item.

Simple List

  • List Item 1
  • List Item 2
  • List Item 3

markup

[list]
   [li]List Item 1[/li]
   [li]List Item 2[/li]
   [li]List Item 3[/li]
[/list]

You can create lists with different style variations. E.g Lists with alternative stripes, lists with icons etc.

Lists with stripes


  • List Item 1
  • List Item 2
  • List Item 3

markup

[list style="uk-list-striped"]
   [li]List Item 1[/li]
   [li]List Item 2[/li]
   [li]List Item 3[/li]
[/list]


Lists with icons

Adding icons to your list, makes them even look more outstanding. Check out the entire collection of icon fonts that you can use with lists here

  • Lorem ipsum dolor
  • consectetur adipisicing elit
  • sed do eiusmod tempor
  • Lorem ipsum dolor
  • consectetur adipisicing elit
  • sed do eiusmod tempor
  • Lorem ipsum dolor
  • consectetur adipisicing elit
  • sed do eiusmod tempor
  • Lorem ipsum dolor
  • consectetur adipisicing elit
  • sed do eiusmod tempor
  • Lorem ipsum dolor
  • consectetur adipisicing elit
  • sed do eiusmod tempor
  • Lorem ipsum dolor
  • consectetur adipisicing elit
  • sed do eiusmod tempor
  • Lorem ipsum dolor
  • consectetur adipisicing elit
  • sed do eiusmod tempor
  • Lorem ipsum dolor
  • consectetur adipisicing elit
  • sed do eiusmod tempor
  • Lorem ipsum dolor
  • consectetur adipisicing elit
  • sed do eiusmod tempor

markup

[list style="list-icons"]
   [li icon="icon-asterisk"]List Item 1[/li]
   [li icon="icon-asterisk"]List Item 2[/li]
   [li icon="icon-asterisk"]List Item 3[/li]
[/list]


Nested Lists

  • Lorem ipsum dolor
  • consectetur adipisicing elit
  • sed do eiusmod tempor
    • Lorem ipsum dolor
    • consectetur adipisicing elit
    • sed do eiusmod tempor
  • dolor adipisicing elit

markup

[list style="list-icons"]
   [li icon="icon-asterisk"]List Item 1[/li]
   [li icon="icon-asterisk"]List Item 2[/li]
      [nested_list]
         [li icon="icon-asterisk"]Child Item 1[/li]
         [li icon="icon-asterisk"]Child Item 2[/li]
      [/nested_list]
   [li icon="icon-asterisk"]List Item 3[/li]
[/list]