Skip to main content

Lists

Ordered, un-ordered, indented, Blaze has you covered when it comes to making lists.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
<ul class="c-list">
  <li class="c-list__item">Lorem ipsum dolor sit amet</li>
  <li class="c-list__item">Consectetur adipiscing elit</li>
  <li class="c-list__item">Nulla volutpat aliquam velit
    <ul class="c-list">
      <li class="c-list__item">Phasellus iaculis neque</li>
      <li class="c-list__item">Purus sodales ultricies</li>
      <li class="c-list__item">Vestibulum laoreet porttitor sem</li>
      <li class="c-list__item">Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li class="c-list__item">Faucibus porta lacus fringilla vel</li>
</ul>

Ordered

The .list--ordered modifier will apply correct numbering to ordered lists and nested lists.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
      1. Lorem ipsum dolor sit amet
      2. Consectetur adipiscing elit
    3. Vestibulum laoreet porttitor sem
    4. Ac tristique libero volutpat at
  4. Faucibus porta lacus fringilla vel
<ol class="c-list c-list--ordered">
  <li class="c-list__item">Lorem ipsum dolor sit amet</li>
  <li class="c-list__item">Consectetur adipiscing elit</li>
  <li class="c-list__item">Nulla volutpat aliquam velit
    <ol class="c-list c-list--ordered">
      <li class="c-list__item">Phasellus iaculis neque</li>
      <li class="c-list__item">Purus sodales ultricies
        <ol class="c-list c-list--ordered">
        <li class="c-list__item">Lorem ipsum dolor sit amet</li>
        <li class="c-list__item">Consectetur adipiscing elit</li>
        </ol>
      </li>
      <li class="c-list__item">Vestibulum laoreet porttitor sem</li>
      <li class="c-list__item">Ac tristique libero volutpat at</li>
    </ol>
  </li>
  <li class="c-list__item">Faucibus porta lacus fringilla vel</li>
</ol>

Un-styled

Applying .list--unstyled to a list will remove the bullet points.

You can remove bullet points on individual items by adding the .list__item--unstyled modifier.

  • This list is unstyled
  • Consectetur adipiscing elit
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • This is an unstyled item
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
<ul class="c-list c-list--unstyled">
  <li class="c-list__item">This list is unstyled</li>
  <li class="c-list__item">Consectetur adipiscing elit</li>
  <li class="c-list__item">Nulla volutpat aliquam velit
    <ul class="c-list">
      <li class="c-list__item">Phasellus iaculis neque</li>
      <li class="c-list__item">Purus sodales ultricies</li>
      <li class="c-list__item c-list__item--unstyled">This is an unstyled item</strong></li>
      <li class="c-list__item">Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li class="c-list__item">Faucibus porta lacus fringilla vel</li>
</ul>

Inline

To make your list items flow left to right apply the .list--inline modifier.

  • Lorem
  • ipsum
  • dolor
<ul class="c-list c-list--inline">
  <li class="c-list__item">Lorem</li>
  <li class="c-list__item">ipsum</li>
  <li class="c-list__item">dolor</li>
</ul>