List

Reset

Removes default styles from a <ul> or <ol> element.

  • Item 1
  • Item 2
  • Item 3
<ul class="u-listReset">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Inline

Displays items inline with separators.

This utility can also be used with responsive prefixes. This can be helpful when there's not space to display a list inline on smaller screens.

  • Inline
  • all
  • the
  • time
  • Inline
  • on
  • small
  • screens
  • and
  • larger
  • Inline
  • on
  • medium
  • screens
  • and
  • larger
  • Inline
  • on
  • large
  • screens
  • and
  • larger
<ul class="u-listInline u-padEnds1">
  <li>Inline</li>
  <li>all</li>
  <li>the</li>
  <li>time</li>
</ul>

<ul class="u-sm-listInline u-padEnds1 u-borderSilver u-borderTop">
  <li>Inline</li>
  <li>on</li>
  <li>small</li>
  <li>screens</li>
  <li>and</li>
  <li>larger</li>
</ul>

<ul class="u-md-listInline u-padEnds1 u-borderSilver u-borderTop">
  <li>Inline</li>
  <li>on</li>
  <li>medium</li>
  <li>screens</li>
  <li>and</li>
  <li>larger</li>
</ul>

<ul class="u-lg-listInline u-padEnds1 u-borderSilver u-borderTop">
  <li>Inline</li>
  <li>on</li>
  <li>large</li>
  <li>screens</li>
  <li>and</li>
  <li>larger</li>
</ul>