Lists consist of related content grouped together and organized vertically.

Helper Classes

.ls-none - Useable on <ol> <ul> <li> elements, it will hide the default list-style-type.

Ordered List

  1. Level 1
  2. Level 1
    1. Level 2
    2. Level 2
  4. Level 1

Unordered List

  • Level 1
  • Level 1
    • Level 2
    • Level 2
  • Level 1

Horizontal List

A horizontal list is designed to have only one level. It can be used as a menu or breadcrumb for example.

  • Level 1
  • Level 1
  • Level 1

List

Lists present multiple line items vertically as a single continuous element.

Lists are made up of a continuous column of rows. Each row contains a tile. Primary actions fill the tile, and supplemental actions are represented by icons and text.

Lists are best suited for similar data types.

List hover effect

You are able to add a hover effect to a default-list by adding a hover class to it.
  • Hover me...
  • Hover me...

Single Item List

  • Single line item
  • Single line item
  • Single line item

Avatar List

Lists with Inputs

It is not recommended to use input fields in lists. However, if you need it once, use inline-block elements to seperate it.

  • Single line item
  • Description
  • Single line item