Lists

Showcasing MICL lists

  • Headline
  • Headline Supporting text
  • Headline 1 Supporting text that is long enough to fill up multiple lines
  • Headline 2 Supporting text that is long enough to fill up multiple lines
  • settings Headline more_horiz
  • person Headline Supporting text keyboard_arrow_right
  • 3 Headline
  • 17 Headline Supporting text
  • Headline 100+
  • Headline 1 Supporting text that is long enough to fill up multiple lines
  • Headline 2 Supporting text that is long enough to fill up multiple lines
  • Headline
  • Headline 1 Supporting text that is long enough to fill up multiple lines of text with words and sentences
  • Headline 2 Supporting text that is long enough to fill up multiple lines of text with words and sentences

Code example


<ul class="micl-list">
  <li class="micl-list-item-two">
    <span class="micl-list-item__avatar">17</span>
    <span class="micl-list-item__text">
      <span class="micl-list-item__headline">Headline</span>
      <span class="micl-list-item__supporting-text">Supporting text</span>
    </span>
  </li>
</ul>

<ul class="micl-list">
  <li class="micl-list-item-two" tabindex="0">
    <label>
      <span class="micl-list-item__thumbnail" style="background-image:url(card-holiday.webp)"></span>
      <span class="micl-list-item__text">
        <span class="micl-list-item__headline">Headline</span>
        <span class="micl-list-item__supporting-text">Supporting text</span>
      </span>
      <input type="checkbox" id="id0" class="micl-checkbox" value="v0" tabindex="-1">
    </label>
  </li>
</ul>