Lists

List Elements

We most frequently use lists for semantic structure and don’t actually want to display them as lists. It’s simpler to reset lists globally and only display them as lists in text when needed with the .mzp-u-list-styled class.

  1. List item
  2. List item
    1. Nested list
  • List item
  • List item
    • Nested list
Definition term
Definition text
Definition term
Definition text
  • Nested list
  • Nested list
Definition term
Definition text
Definition text
<ol class="mzp-u-list-styled">
  <li>List item</li>
  <li>List item
    <ol class="mzp-u-list-styled">
      <li>Nested list</li>
    </ol>
  </li>
</ol>

<ul class="mzp-u-list-styled">
  <li>List item</li>
  <li>List item
    <ul class="mzp-u-list-styled">
      <li>Nested list</li>
    </ul>
  </li>
</ul>

<dl class="mzp-u-list-styled">
  <dt>Definition term</dt>
  <dd>Definition text</dd>
  <dt>Definition term</dt>
  <dd>Definition text
    <ul class="mzp-u-list-styled">
      <li>Nested list</li>
      <li>Nested list</li>
    </ul>
  </dd>
  <dt>Definition term</dt>
  <dd>Definition text</dd>
  <dd>Definition text</dd>
</dl>

Inline Lists

A list of things that spreads across the page horizontally, wrapping to the next line when needed.

The list should be able to contain a variety of atoms (like buttons and cta links).

  1. List item
  2. List item
  3. List item that contains a cta link
  4. List item that contains a button
  5. List item
  6. List item
  7. List item
<ol class="mzp-c-inline-list">
  <li>List item</li>
  <li><a href="#">List item</a></li>
  <li>
    <a class="mzp-c-cta-link" href="#">List item that contains a cta link</a>
  </li>
  <li>
    <a class="mzp-c-button mzp-t-md" href="#">List item that contains a button</a>
  </li>
  <li><a href="#">List item</a></li>
  <li><a href="#">List item</a></li>
  <li><a href="#">List item</a></li>
</ol>