Mozilla Protocol
  • 19.1.0

Lists: Inline

Occasionally you may want a list of things that spreads across the page horizontally, wrapping to the next line when needed. This could be used for supplemental navigation, a list of sponsor logos, anything where you need a group of things in a row with some spacing.

<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 with a cta link</a></li>
    <li><a class="mzp-c-button mzp-t-md" href="#">List item with 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>