Lists present multiple line items in a vertical arrangement as a single continuous element.


Tile content

List tiles present collections of related content in a consistent format, using hierarchy to enhance readability by prioritizing a consistent type or set of content. This helps users to more easily find the most important information within the collection of content.

Single line list (click to see the ink effect) Single line list with icons

Tile actions

The majority of space on a list tile should be dedicated to the primary action.

Because actions are not distinguishing elements of list tiles, place supplemental actions on the right side of the tile.

Sometimes the primary action is an action button. You can place them in front.


Dividers group and separate content within lists and page layouts. The divider is a thin rule, lightweight yet sufficient to distinguish content visually and spatially.

Inset dividers

Inset dividers subdivide related content, such as phone numbers from email addresses from street addresses in a contact detail.

Inset dividers should be used in conjunction with anchoring elements such as icons or avatars aligned with the Title Key Line


Easy sorting

Creating a sortable list is really easy. You only have to add data-sortable="true" to your code and you can start dragging.

Todo Lists

Use the sortable list in combination with the styled checkboxes to create the perfect todo list.

Todo list

Nestable Lists

The nestable list plugin is also included. You can use the button classes to style it the way you like.

  1. Item 1
  2. Item 2
  3. Item 3
    1. Item 4
    2. Item 5
    3. Item 6
    4. Item 7
  1. Item 8
  2. Item 9
  3. Item 10
  4. Item 11
    1. Item 12
    2. Item 13
    3. Item 14
Nestable Lists
Chat with Ann Laurens
  • Yes, it is indeed very beautiful. 10:03 pm
  • Did you see the changes? 10:02 pm
  • I just arrived at work, it was quite busy. 06:44pm
    I will take look in a minute. 06:45pm
  • The colors are much better now.
    The colors are brighter than before. I have already sent an example. This will make it look sharper. Mon
  • Are the colors of the logo already adapted? Last week