Mozilla Protocol
  • 21.1.0

List Inline

We most often use lists for semantic structure (like in navigation or forms) and usually don’t want to display them as standard lists. It’s simpler to reset lists globally in CSS and only display them as lists in text when needed with the mzp-u-list-styled class.

<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>
  • Content: 
    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.
  • URL: /components/raw/list-inline/list-inline.md
  • Filesystem Path: components/01-utilities/list-inline/list-inline.md
  • Size: 268 Bytes