Lists

Global variables:

$list-item-inline-padding: 5px

Unordered

A list of items in which the order does not explicitly matter.

  • ...
  • ...
    • ...

Ordered

A list of items in which the order does explicitly matter.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor sem
    4. Vestibulum laoreet porttitor sem
      • Phasellus iaculis neque
      • Purus sodales ultricies
      • Vestibulum laoreet porttitor sem
      • Ac tristique libero volutpat at
    5. Ac tristique libero volutpat at
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
  1. ...
  2. ...
    1. ...

Unstyled

Use modifier class _unstyled_ to remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor sem
    4. Vestibulum laoreet porttitor sem
      • Phasellus iaculis neque
      • Purus sodales ultricies
      • Vestibulum laoreet porttitor sem
      • Ac tristique libero volutpat at
    5. Ac tristique libero volutpat at
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
  1. ...
  2. ...
    1. ...

Horizontal

Use modifier class _horizontal_ to place all list items on a single line with display: inline-block and some light padding.

  1. Lorem
  2. Consectetur
  3. Integer
  4. Facilisis
  5. Nulla
  6. Faucibus
  7. Aenean
  8. Eget
  1. Lorem
  2. Consectetur
  3. Integer
  4. Facilisis
  5. Nulla
  6. Faucibus
  7. Aenean
  8. Eget

Description

A list of terms with their associated descriptions.

Description lists
A description list is perfect for defining terms.
Description lists
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Description lists
A description list is perfect for defining terms.
Description lists
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.

Horizontal

Use modifier class _horizontal_ to make terms and descriptions in <dl> line up side-by-side. Responsive.

Description lists
A description list is perfect for defining terms.
Description lists with very-very-very long title
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Description lists
A description list is perfect for defining terms.
Description lists with very-very-very long title
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.