Fork me on GitHub

Lists

Required files

SCSS files required: _components.lists.scss

Default list style

The default styling for ordered and unordered lists at the base font size

  1. In non lacus facilisis, sodales mi sed, ultrices nibh. Maecenas non dolor tincidunt, pharetra leo sit amet, consequat elit. Nulla ac magna ultricies, suscipit nisl vitae, luctus nulla.
  2. Etiam tincidunt magna in arcu accumsan consequat. Vivamus blandit massa gravida augue semper volutpat. Duis quis aliquet ligula, quis varius elit. Quisque consequat purus tincidunt tempus dapibus.
  3. Donec accumsan placerat metus, eu pretium diam semper sagittis. Aliquam nec ligula massa. Praesent ac massa velit. Sed laoreet lectus ac nibh finibus varius. Aenean pulvinar malesuada nulla id finibus.
  • In non lacus facilisis, sodales mi sed, ultrices nibh. Maecenas non dolor tincidunt, pharetra leo sit amet, consequat elit. Nulla ac magna ultricies, suscipit nisl vitae, luctus nulla.
  • Donec accumsan placerat metus, eu pretium diam semper sagittis. Aliquam nec ligula massa. Praesent ac massa velit. Sed laoreet lectus ac nibh finibus varius. Aenean pulvinar malesuada nulla id finibus.
    • Etiam tincidunt magna in arcu accumsan consequat. Vivamus blandit massa gravida augue semper volutpat.
    • Sed sagittis cursus semper. Aenean feugiat, nisl quis scelerisque rhoncus, orci elit consequat arcu.
  • Etiam tincidunt magna in arcu accumsan consequat. Vivamus blandit massa gravida augue semper volutpat. Duis quis aliquet ligula, quis varius elit. Quisque consequat purus tincidunt tempus dapibus.

Remove list style

Add the class .list--no-style to remove list bullets and spacing

  • In non lacus facilisis
  • Donec accumsan placerat metus
  • Etiam tincidunt magna

List with tightened space on left

Add the class .list--spacing-left-sm to tighten up spacing on the left

Useful for scenarios with less space to use, such as tooltips or cards

  • In non lacus facilisis
  • Donec accumsan placerat metus
  • Etiam tincidunt magna
  1. In non lacus facilisis
  2. Donec accumsan placerat metus
  3. Etiam tincidunt magna

List inline

Add the class .list--inline

Inline lists are useful for various elements such as text, images and icons

Modifying classes are available for gutter sizes:

  • .list--inline--gutter-xxs
  • .list--inline--gutter-xs
  • .list--inline--gutter-sm
  • .list--inline--gutter-md
  • .list--inline--gutter-lg
  • .list--inline--gutter-xl
  • .list--inline--gutter-xxl

Inline list default

  • In non lacus facilisis
  • Donec accumsan placerat metus
  • Etiam tincidunt magna
  • Quisque consequat purus
  • Aliquam nec ligula massa
  • Nulla ac magna ultricies
  • Sed laoreet lectus ac nibh finibus
  • Eu pretium diam semper

Inline list extra large gutter