Icon List

v0.0.1

List with icons before every list item. Uses 24x24px Icons.

Default #

Celiac sriracha intelligentsia artisan
Celiac sriracha intelligentsia artisan
Celiac sriracha intelligentsia artisan

<!-- Icon List  -->
<ul class="vi-icon-list">
  <li class="vi-icon-list__item">
    <div class="vi-icon-list__icon">
      <!-- Icon file-doc  -->
      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="file-doc" width="24" height="24"><path d="M6.1 16.2h-5v-10h5v-5h17.1V23H6.1v-6.8zm1 0V22h15.1V2.1H7.1v4h12.1v10c0 .1-12.1.1-12.1.1zm-3.7-2.9h1.5c1.1 0 2.3-.6 2.3-2.1 0-1.6-1.2-2.1-2.3-2.1H3.4v4.2zm.8-.6V9.8h.6c.8 0 1.7.3 1.7 1.5 0 1.1-.9 1.5-1.7 1.5h-.6v-.1zm3.6-1.5c0 1.3 1 2.2 2.3 2.2s2.3-.9 2.3-2.2c0-1.4-1-2.2-2.3-2.2s-2.3.8-2.3 2.2zm.8 0c0-.9.6-1.6 1.5-1.6s1.5.7 1.5 1.6c0 .9-.6 1.6-1.5 1.6s-1.5-.7-1.5-1.6zm8.1-1.6c-.3-.4-1-.6-1.5-.6-1.3 0-2.3.9-2.3 2.2s.9 2.2 2.3 2.2c.7 0 1.3-.3 1.6-.7l-.6-.4c-.2.3-.6.5-1 .5-.9 0-1.4-.6-1.4-1.6 0-.9.6-1.6 1.5-1.6.3 0 .7.1 1 .4l.4-.4z"></path></svg>
    </div>
    <div class="vi-icon-list__content">
      Celiac sriracha intelligentsia artisan
    </div>
  </li>
  <li class="vi-icon-list__item">
    <div class="vi-icon-list__icon">
      <!-- Icon file-doc  -->
      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="file-doc" width="24" height="24"><path d="M6.1 16.2h-5v-10h5v-5h17.1V23H6.1v-6.8zm1 0V22h15.1V2.1H7.1v4h12.1v10c0 .1-12.1.1-12.1.1zm-3.7-2.9h1.5c1.1 0 2.3-.6 2.3-2.1 0-1.6-1.2-2.1-2.3-2.1H3.4v4.2zm.8-.6V9.8h.6c.8 0 1.7.3 1.7 1.5 0 1.1-.9 1.5-1.7 1.5h-.6v-.1zm3.6-1.5c0 1.3 1 2.2 2.3 2.2s2.3-.9 2.3-2.2c0-1.4-1-2.2-2.3-2.2s-2.3.8-2.3 2.2zm.8 0c0-.9.6-1.6 1.5-1.6s1.5.7 1.5 1.6c0 .9-.6 1.6-1.5 1.6s-1.5-.7-1.5-1.6zm8.1-1.6c-.3-.4-1-.6-1.5-.6-1.3 0-2.3.9-2.3 2.2s.9 2.2 2.3 2.2c.7 0 1.3-.3 1.6-.7l-.6-.4c-.2.3-.6.5-1 .5-.9 0-1.4-.6-1.4-1.6 0-.9.6-1.6 1.5-1.6.3 0 .7.1 1 .4l.4-.4z"></path></svg>
    </div>
    <div class="vi-icon-list__content">
      Celiac sriracha intelligentsia artisan
    </div>
  </li>
  <li class="vi-icon-list__item">
    <div class="vi-icon-list__icon">
      <!-- Icon file-doc  -->
      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="file-doc" width="24" height="24"><path d="M6.1 16.2h-5v-10h5v-5h17.1V23H6.1v-6.8zm1 0V22h15.1V2.1H7.1v4h12.1v10c0 .1-12.1.1-12.1.1zm-3.7-2.9h1.5c1.1 0 2.3-.6 2.3-2.1 0-1.6-1.2-2.1-2.3-2.1H3.4v4.2zm.8-.6V9.8h.6c.8 0 1.7.3 1.7 1.5 0 1.1-.9 1.5-1.7 1.5h-.6v-.1zm3.6-1.5c0 1.3 1 2.2 2.3 2.2s2.3-.9 2.3-2.2c0-1.4-1-2.2-2.3-2.2s-2.3.8-2.3 2.2zm.8 0c0-.9.6-1.6 1.5-1.6s1.5.7 1.5 1.6c0 .9-.6 1.6-1.5 1.6s-1.5-.7-1.5-1.6zm8.1-1.6c-.3-.4-1-.6-1.5-.6-1.3 0-2.3.9-2.3 2.2s.9 2.2 2.3 2.2c.7 0 1.3-.3 1.6-.7l-.6-.4c-.2.3-.6.5-1 .5-.9 0-1.4-.6-1.4-1.6 0-.9.6-1.6 1.5-1.6.3 0 .7.1 1 .4l.4-.4z"></path></svg>
    </div>
    <div class="vi-icon-list__content">
      Celiac sriracha intelligentsia artisan
    </div>
  </li>
</ul>

Two columns #

The list can have two columns on larger devices, use modifier --columns-2.

Lomo sartorial pop-up readymade yr thundercats
Lomo sartorial pop-up readymade yr thundercats
Lomo sartorial pop-up readymade yr thundercats
Lomo sartorial pop-up readymade yr thundercats
Lomo sartorial pop-up readymade yr thundercats
Lomo sartorial pop-up readymade yr thundercats
Lomo sartorial pop-up readymade yr thundercats

<!-- Icon List  -->
<ul class="vi-icon-list vi-icon-list--columns-2">
  <li class="vi-icon-list__item">
    <div class="vi-icon-list__icon">
      <!-- Icon file-doc  -->
      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="file-doc" width="24" height="24"><path d="M6.1 16.2h-5v-10h5v-5h17.1V23H6.1v-6.8zm1 0V22h15.1V2.1H7.1v4h12.1v10c0 .1-12.1.1-12.1.1zm-3.7-2.9h1.5c1.1 0 2.3-.6 2.3-2.1 0-1.6-1.2-2.1-2.3-2.1H3.4v4.2zm.8-.6V9.8h.6c.8 0 1.7.3 1.7 1.5 0 1.1-.9 1.5-1.7 1.5h-.6v-.1zm3.6-1.5c0 1.3 1 2.2 2.3 2.2s2.3-.9 2.3-2.2c0-1.4-1-2.2-2.3-2.2s-2.3.8-2.3 2.2zm.8 0c0-.9.6-1.6 1.5-1.6s1.5.7 1.5 1.6c0 .9-.6 1.6-1.5 1.6s-1.5-.7-1.5-1.6zm8.1-1.6c-.3-.4-1-.6-1.5-.6-1.3 0-2.3.9-2.3 2.2s.9 2.2 2.3 2.2c.7 0 1.3-.3 1.6-.7l-.6-.4c-.2.3-.6.5-1 .5-.9 0-1.4-.6-1.4-1.6 0-.9.6-1.6 1.5-1.6.3 0 .7.1 1 .4l.4-.4z"></path></svg>
    </div>
    <div class="vi-icon-list__content">
      Lomo sartorial pop-up readymade yr thundercats
    </div>
  </li>
  <li class="vi-icon-list__item">
    <div class="vi-icon-list__icon">
      <!-- Icon file-doc  -->
      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="file-doc" width="24" height="24"><path d="M6.1 16.2h-5v-10h5v-5h17.1V23H6.1v-6.8zm1 0V22h15.1V2.1H7.1v4h12.1v10c0 .1-12.1.1-12.1.1zm-3.7-2.9h1.5c1.1 0 2.3-.6 2.3-2.1 0-1.6-1.2-2.1-2.3-2.1H3.4v4.2zm.8-.6V9.8h.6c.8 0 1.7.3 1.7 1.5 0 1.1-.9 1.5-1.7 1.5h-.6v-.1zm3.6-1.5c0 1.3 1 2.2 2.3 2.2s2.3-.9 2.3-2.2c0-1.4-1-2.2-2.3-2.2s-2.3.8-2.3 2.2zm.8 0c0-.9.6-1.6 1.5-1.6s1.5.7 1.5 1.6c0 .9-.6 1.6-1.5 1.6s-1.5-.7-1.5-1.6zm8.1-1.6c-.3-.4-1-.6-1.5-.6-1.3 0-2.3.9-2.3 2.2s.9 2.2 2.3 2.2c.7 0 1.3-.3 1.6-.7l-.6-.4c-.2.3-.6.5-1 .5-.9 0-1.4-.6-1.4-1.6 0-.9.6-1.6 1.5-1.6.3 0 .7.1 1 .4l.4-.4z"></path></svg>
    </div>
    <div class="vi-icon-list__content">
      Lomo sartorial pop-up readymade yr thundercats
    </div>
  </li>
  <li class="vi-icon-list__item">
    <div class="vi-icon-list__icon">
      <!-- Icon file-doc  -->
      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="file-doc" width="24" height="24"><path d="M6.1 16.2h-5v-10h5v-5h17.1V23H6.1v-6.8zm1 0V22h15.1V2.1H7.1v4h12.1v10c0 .1-12.1.1-12.1.1zm-3.7-2.9h1.5c1.1 0 2.3-.6 2.3-2.1 0-1.6-1.2-2.1-2.3-2.1H3.4v4.2zm.8-.6V9.8h.6c.8 0 1.7.3 1.7 1.5 0 1.1-.9 1.5-1.7 1.5h-.6v-.1zm3.6-1.5c0 1.3 1 2.2 2.3 2.2s2.3-.9 2.3-2.2c0-1.4-1-2.2-2.3-2.2s-2.3.8-2.3 2.2zm.8 0c0-.9.6-1.6 1.5-1.6s1.5.7 1.5 1.6c0 .9-.6 1.6-1.5 1.6s-1.5-.7-1.5-1.6zm8.1-1.6c-.3-.4-1-.6-1.5-.6-1.3 0-2.3.9-2.3 2.2s.9 2.2 2.3 2.2c.7 0 1.3-.3 1.6-.7l-.6-.4c-.2.3-.6.5-1 .5-.9 0-1.4-.6-1.4-1.6 0-.9.6-1.6 1.5-1.6.3 0 .7.1 1 .4l.4-.4z"></path></svg>
    </div>
    <div class="vi-icon-list__content">
      Lomo sartorial pop-up readymade yr thundercats
    </div>
  </li>
  <li class="vi-icon-list__item">
    <div class="vi-icon-list__icon">
      <!-- Icon file-doc  -->
      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="file-doc" width="24" height="24"><path d="M6.1 16.2h-5v-10h5v-5h17.1V23H6.1v-6.8zm1 0V22h15.1V2.1H7.1v4h12.1v10c0 .1-12.1.1-12.1.1zm-3.7-2.9h1.5c1.1 0 2.3-.6 2.3-2.1 0-1.6-1.2-2.1-2.3-2.1H3.4v4.2zm.8-.6V9.8h.6c.8 0 1.7.3 1.7 1.5 0 1.1-.9 1.5-1.7 1.5h-.6v-.1zm3.6-1.5c0 1.3 1 2.2 2.3 2.2s2.3-.9 2.3-2.2c0-1.4-1-2.2-2.3-2.2s-2.3.8-2.3 2.2zm.8 0c0-.9.6-1.6 1.5-1.6s1.5.7 1.5 1.6c0 .9-.6 1.6-1.5 1.6s-1.5-.7-1.5-1.6zm8.1-1.6c-.3-.4-1-.6-1.5-.6-1.3 0-2.3.9-2.3 2.2s.9 2.2 2.3 2.2c.7 0 1.3-.3 1.6-.7l-.6-.4c-.2.3-.6.5-1 .5-.9 0-1.4-.6-1.4-1.6 0-.9.6-1.6 1.5-1.6.3 0 .7.1 1 .4l.4-.4z"></path></svg>
    </div>
    <div class="vi-icon-list__content">
      Lomo sartorial pop-up readymade yr thundercats
    </div>
  </li>
  <li class="vi-icon-list__item">
    <div class="vi-icon-list__icon">
      <!-- Icon file-doc  -->
      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="file-doc" width="24" height="24"><path d="M6.1 16.2h-5v-10h5v-5h17.1V23H6.1v-6.8zm1 0V22h15.1V2.1H7.1v4h12.1v10c0 .1-12.1.1-12.1.1zm-3.7-2.9h1.5c1.1 0 2.3-.6 2.3-2.1 0-1.6-1.2-2.1-2.3-2.1H3.4v4.2zm.8-.6V9.8h.6c.8 0 1.7.3 1.7 1.5 0 1.1-.9 1.5-1.7 1.5h-.6v-.1zm3.6-1.5c0 1.3 1 2.2 2.3 2.2s2.3-.9 2.3-2.2c0-1.4-1-2.2-2.3-2.2s-2.3.8-2.3 2.2zm.8 0c0-.9.6-1.6 1.5-1.6s1.5.7 1.5 1.6c0 .9-.6 1.6-1.5 1.6s-1.5-.7-1.5-1.6zm8.1-1.6c-.3-.4-1-.6-1.5-.6-1.3 0-2.3.9-2.3 2.2s.9 2.2 2.3 2.2c.7 0 1.3-.3 1.6-.7l-.6-.4c-.2.3-.6.5-1 .5-.9 0-1.4-.6-1.4-1.6 0-.9.6-1.6 1.5-1.6.3 0 .7.1 1 .4l.4-.4z"></path></svg>
    </div>
    <div class="vi-icon-list__content">
      Lomo sartorial pop-up readymade yr thundercats
    </div>
  </li>
  <li class="vi-icon-list__item">
    <div class="vi-icon-list__icon">
      <!-- Icon file-doc  -->
      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="file-doc" width="24" height="24"><path d="M6.1 16.2h-5v-10h5v-5h17.1V23H6.1v-6.8zm1 0V22h15.1V2.1H7.1v4h12.1v10c0 .1-12.1.1-12.1.1zm-3.7-2.9h1.5c1.1 0 2.3-.6 2.3-2.1 0-1.6-1.2-2.1-2.3-2.1H3.4v4.2zm.8-.6V9.8h.6c.8 0 1.7.3 1.7 1.5 0 1.1-.9 1.5-1.7 1.5h-.6v-.1zm3.6-1.5c0 1.3 1 2.2 2.3 2.2s2.3-.9 2.3-2.2c0-1.4-1-2.2-2.3-2.2s-2.3.8-2.3 2.2zm.8 0c0-.9.6-1.6 1.5-1.6s1.5.7 1.5 1.6c0 .9-.6 1.6-1.5 1.6s-1.5-.7-1.5-1.6zm8.1-1.6c-.3-.4-1-.6-1.5-.6-1.3 0-2.3.9-2.3 2.2s.9 2.2 2.3 2.2c.7 0 1.3-.3 1.6-.7l-.6-.4c-.2.3-.6.5-1 .5-.9 0-1.4-.6-1.4-1.6 0-.9.6-1.6 1.5-1.6.3 0 .7.1 1 .4l.4-.4z"></path></svg>
    </div>
    <div class="vi-icon-list__content">
      Lomo sartorial pop-up readymade yr thundercats
    </div>
  </li>
  <li class="vi-icon-list__item">
    <div class="vi-icon-list__icon">
      <!-- Icon file-doc  -->
      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="file-doc" width="24" height="24"><path d="M6.1 16.2h-5v-10h5v-5h17.1V23H6.1v-6.8zm1 0V22h15.1V2.1H7.1v4h12.1v10c0 .1-12.1.1-12.1.1zm-3.7-2.9h1.5c1.1 0 2.3-.6 2.3-2.1 0-1.6-1.2-2.1-2.3-2.1H3.4v4.2zm.8-.6V9.8h.6c.8 0 1.7.3 1.7 1.5 0 1.1-.9 1.5-1.7 1.5h-.6v-.1zm3.6-1.5c0 1.3 1 2.2 2.3 2.2s2.3-.9 2.3-2.2c0-1.4-1-2.2-2.3-2.2s-2.3.8-2.3 2.2zm.8 0c0-.9.6-1.6 1.5-1.6s1.5.7 1.5 1.6c0 .9-.6 1.6-1.5 1.6s-1.5-.7-1.5-1.6zm8.1-1.6c-.3-.4-1-.6-1.5-.6-1.3 0-2.3.9-2.3 2.2s.9 2.2 2.3 2.2c.7 0 1.3-.3 1.6-.7l-.6-.4c-.2.3-.6.5-1 .5-.9 0-1.4-.6-1.4-1.6 0-.9.6-1.6 1.5-1.6.3 0 .7.1 1 .4l.4-.4z"></path></svg>
    </div>
    <div class="vi-icon-list__content">
      Lomo sartorial pop-up readymade yr thundercats
    </div>
  </li>
</ul>

Links #

Links must have class vi-icon-list__link.

<!-- Icon List  -->
<ul class="vi-icon-list">
  <li class="vi-icon-list__item">
    <div class="vi-icon-list__icon">
      <!-- Icon file-doc  -->
      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="file-doc" width="24" height="24"><path d="M6.1 16.2h-5v-10h5v-5h17.1V23H6.1v-6.8zm1 0V22h15.1V2.1H7.1v4h12.1v10c0 .1-12.1.1-12.1.1zm-3.7-2.9h1.5c1.1 0 2.3-.6 2.3-2.1 0-1.6-1.2-2.1-2.3-2.1H3.4v4.2zm.8-.6V9.8h.6c.8 0 1.7.3 1.7 1.5 0 1.1-.9 1.5-1.7 1.5h-.6v-.1zm3.6-1.5c0 1.3 1 2.2 2.3 2.2s2.3-.9 2.3-2.2c0-1.4-1-2.2-2.3-2.2s-2.3.8-2.3 2.2zm.8 0c0-.9.6-1.6 1.5-1.6s1.5.7 1.5 1.6c0 .9-.6 1.6-1.5 1.6s-1.5-.7-1.5-1.6zm8.1-1.6c-.3-.4-1-.6-1.5-.6-1.3 0-2.3.9-2.3 2.2s.9 2.2 2.3 2.2c.7 0 1.3-.3 1.6-.7l-.6-.4c-.2.3-.6.5-1 .5-.9 0-1.4-.6-1.4-1.6 0-.9.6-1.6 1.5-1.6.3 0 .7.1 1 .4l.4-.4z"></path></svg>
    </div>
    <div class="vi-icon-list__content">
      <a class="vi-icon-list__link" href="#">Roof viral yuccie loko drinking</a>
    </div>
  </li>
  <li class="vi-icon-list__item">
    <div class="vi-icon-list__icon">
      <!-- Icon file-doc  -->
      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="file-doc" width="24" height="24"><path d="M6.1 16.2h-5v-10h5v-5h17.1V23H6.1v-6.8zm1 0V22h15.1V2.1H7.1v4h12.1v10c0 .1-12.1.1-12.1.1zm-3.7-2.9h1.5c1.1 0 2.3-.6 2.3-2.1 0-1.6-1.2-2.1-2.3-2.1H3.4v4.2zm.8-.6V9.8h.6c.8 0 1.7.3 1.7 1.5 0 1.1-.9 1.5-1.7 1.5h-.6v-.1zm3.6-1.5c0 1.3 1 2.2 2.3 2.2s2.3-.9 2.3-2.2c0-1.4-1-2.2-2.3-2.2s-2.3.8-2.3 2.2zm.8 0c0-.9.6-1.6 1.5-1.6s1.5.7 1.5 1.6c0 .9-.6 1.6-1.5 1.6s-1.5-.7-1.5-1.6zm8.1-1.6c-.3-.4-1-.6-1.5-.6-1.3 0-2.3.9-2.3 2.2s.9 2.2 2.3 2.2c.7 0 1.3-.3 1.6-.7l-.6-.4c-.2.3-.6.5-1 .5-.9 0-1.4-.6-1.4-1.6 0-.9.6-1.6 1.5-1.6.3 0 .7.1 1 .4l.4-.4z"></path></svg>
    </div>
    <div class="vi-icon-list__content">
      <a class="vi-icon-list__link" href="#">Roof viral yuccie loko drinking</a>
    </div>
  </li>
  <li class="vi-icon-list__item">
    <div class="vi-icon-list__icon">
      <!-- Icon file-doc  -->
      <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="file-doc" width="24" height="24"><path d="M6.1 16.2h-5v-10h5v-5h17.1V23H6.1v-6.8zm1 0V22h15.1V2.1H7.1v4h12.1v10c0 .1-12.1.1-12.1.1zm-3.7-2.9h1.5c1.1 0 2.3-.6 2.3-2.1 0-1.6-1.2-2.1-2.3-2.1H3.4v4.2zm.8-.6V9.8h.6c.8 0 1.7.3 1.7 1.5 0 1.1-.9 1.5-1.7 1.5h-.6v-.1zm3.6-1.5c0 1.3 1 2.2 2.3 2.2s2.3-.9 2.3-2.2c0-1.4-1-2.2-2.3-2.2s-2.3.8-2.3 2.2zm.8 0c0-.9.6-1.6 1.5-1.6s1.5.7 1.5 1.6c0 .9-.6 1.6-1.5 1.6s-1.5-.7-1.5-1.6zm8.1-1.6c-.3-.4-1-.6-1.5-.6-1.3 0-2.3.9-2.3 2.2s.9 2.2 2.3 2.2c.7 0 1.3-.3 1.6-.7l-.6-.4c-.2.3-.6.5-1 .5-.9 0-1.4-.6-1.4-1.6 0-.9.6-1.6 1.5-1.6.3 0 .7.1 1 .4l.4-.4z"></path></svg>
    </div>
    <div class="vi-icon-list__content">
      <a class="vi-icon-list__link" href="#">Roof viral yuccie loko drinking</a>
    </div>
  </li>
</ul>

Color #

Icons inherit color by default.

Links need modifier --inherit to inherit the color.

<div style="color:purple">
  <!-- Icon List  -->
  <ul class="vi-icon-list">
    <li class="vi-icon-list__item">
      <div class="vi-icon-list__icon">
        <!-- Icon file-doc  -->
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="file-doc" width="24" height="24"><path d="M6.1 16.2h-5v-10h5v-5h17.1V23H6.1v-6.8zm1 0V22h15.1V2.1H7.1v4h12.1v10c0 .1-12.1.1-12.1.1zm-3.7-2.9h1.5c1.1 0 2.3-.6 2.3-2.1 0-1.6-1.2-2.1-2.3-2.1H3.4v4.2zm.8-.6V9.8h.6c.8 0 1.7.3 1.7 1.5 0 1.1-.9 1.5-1.7 1.5h-.6v-.1zm3.6-1.5c0 1.3 1 2.2 2.3 2.2s2.3-.9 2.3-2.2c0-1.4-1-2.2-2.3-2.2s-2.3.8-2.3 2.2zm.8 0c0-.9.6-1.6 1.5-1.6s1.5.7 1.5 1.6c0 .9-.6 1.6-1.5 1.6s-1.5-.7-1.5-1.6zm8.1-1.6c-.3-.4-1-.6-1.5-.6-1.3 0-2.3.9-2.3 2.2s.9 2.2 2.3 2.2c.7 0 1.3-.3 1.6-.7l-.6-.4c-.2.3-.6.5-1 .5-.9 0-1.4-.6-1.4-1.6 0-.9.6-1.6 1.5-1.6.3 0 .7.1 1 .4l.4-.4z"></path></svg>
      </div>
      <div class="vi-icon-list__content">
        <a class="vi-icon-list__link vi-icon-list__link--inherit" href="#">Austin yolo sartorial master normcore</a>
      </div>
    </li>
    <li class="vi-icon-list__item">
      <div class="vi-icon-list__icon">
        <!-- Icon file-doc  -->
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="file-doc" width="24" height="24"><path d="M6.1 16.2h-5v-10h5v-5h17.1V23H6.1v-6.8zm1 0V22h15.1V2.1H7.1v4h12.1v10c0 .1-12.1.1-12.1.1zm-3.7-2.9h1.5c1.1 0 2.3-.6 2.3-2.1 0-1.6-1.2-2.1-2.3-2.1H3.4v4.2zm.8-.6V9.8h.6c.8 0 1.7.3 1.7 1.5 0 1.1-.9 1.5-1.7 1.5h-.6v-.1zm3.6-1.5c0 1.3 1 2.2 2.3 2.2s2.3-.9 2.3-2.2c0-1.4-1-2.2-2.3-2.2s-2.3.8-2.3 2.2zm.8 0c0-.9.6-1.6 1.5-1.6s1.5.7 1.5 1.6c0 .9-.6 1.6-1.5 1.6s-1.5-.7-1.5-1.6zm8.1-1.6c-.3-.4-1-.6-1.5-.6-1.3 0-2.3.9-2.3 2.2s.9 2.2 2.3 2.2c.7 0 1.3-.3 1.6-.7l-.6-.4c-.2.3-.6.5-1 .5-.9 0-1.4-.6-1.4-1.6 0-.9.6-1.6 1.5-1.6.3 0 .7.1 1 .4l.4-.4z"></path></svg>
      </div>
      <div class="vi-icon-list__content">
        <a class="vi-icon-list__link vi-icon-list__link--inherit" href="#">Austin yolo sartorial master normcore</a>
      </div>
    </li>
    <li class="vi-icon-list__item">
      <div class="vi-icon-list__icon">
        <!-- Icon file-doc  -->
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="file-doc" width="24" height="24"><path d="M6.1 16.2h-5v-10h5v-5h17.1V23H6.1v-6.8zm1 0V22h15.1V2.1H7.1v4h12.1v10c0 .1-12.1.1-12.1.1zm-3.7-2.9h1.5c1.1 0 2.3-.6 2.3-2.1 0-1.6-1.2-2.1-2.3-2.1H3.4v4.2zm.8-.6V9.8h.6c.8 0 1.7.3 1.7 1.5 0 1.1-.9 1.5-1.7 1.5h-.6v-.1zm3.6-1.5c0 1.3 1 2.2 2.3 2.2s2.3-.9 2.3-2.2c0-1.4-1-2.2-2.3-2.2s-2.3.8-2.3 2.2zm.8 0c0-.9.6-1.6 1.5-1.6s1.5.7 1.5 1.6c0 .9-.6 1.6-1.5 1.6s-1.5-.7-1.5-1.6zm8.1-1.6c-.3-.4-1-.6-1.5-.6-1.3 0-2.3.9-2.3 2.2s.9 2.2 2.3 2.2c.7 0 1.3-.3 1.6-.7l-.6-.4c-.2.3-.6.5-1 .5-.9 0-1.4-.6-1.4-1.6 0-.9.6-1.6 1.5-1.6.3 0 .7.1 1 .4l.4-.4z"></path></svg>
      </div>
      <div class="vi-icon-list__content">
        <a class="vi-icon-list__link vi-icon-list__link--inherit" href="#">Austin yolo sartorial master normcore</a>
      </div>
    </li>
  </ul>
</div>

Within typesystem #

The icons and text respect the typesystem.

Readymade banjo plaid viral mustache chillwave
Readymade banjo plaid viral mustache chillwave
Readymade banjo plaid viral mustache chillwave

<div class="vi-typesystem vi-typesystem--inversed">
  <!-- Icon List  -->
  <ul class="vi-icon-list">
    <li class="vi-icon-list__item">
      <div class="vi-icon-list__icon">
        <!-- Icon file-doc  -->
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="file-doc" width="24" height="24"><path d="M6.1 16.2h-5v-10h5v-5h17.1V23H6.1v-6.8zm1 0V22h15.1V2.1H7.1v4h12.1v10c0 .1-12.1.1-12.1.1zm-3.7-2.9h1.5c1.1 0 2.3-.6 2.3-2.1 0-1.6-1.2-2.1-2.3-2.1H3.4v4.2zm.8-.6V9.8h.6c.8 0 1.7.3 1.7 1.5 0 1.1-.9 1.5-1.7 1.5h-.6v-.1zm3.6-1.5c0 1.3 1 2.2 2.3 2.2s2.3-.9 2.3-2.2c0-1.4-1-2.2-2.3-2.2s-2.3.8-2.3 2.2zm.8 0c0-.9.6-1.6 1.5-1.6s1.5.7 1.5 1.6c0 .9-.6 1.6-1.5 1.6s-1.5-.7-1.5-1.6zm8.1-1.6c-.3-.4-1-.6-1.5-.6-1.3 0-2.3.9-2.3 2.2s.9 2.2 2.3 2.2c.7 0 1.3-.3 1.6-.7l-.6-.4c-.2.3-.6.5-1 .5-.9 0-1.4-.6-1.4-1.6 0-.9.6-1.6 1.5-1.6.3 0 .7.1 1 .4l.4-.4z"></path></svg>
      </div>
      <div class="vi-icon-list__content">
        Readymade banjo plaid viral mustache chillwave
      </div>
    </li>
    <li class="vi-icon-list__item">
      <div class="vi-icon-list__icon">
        <!-- Icon file-doc  -->
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="file-doc" width="24" height="24"><path d="M6.1 16.2h-5v-10h5v-5h17.1V23H6.1v-6.8zm1 0V22h15.1V2.1H7.1v4h12.1v10c0 .1-12.1.1-12.1.1zm-3.7-2.9h1.5c1.1 0 2.3-.6 2.3-2.1 0-1.6-1.2-2.1-2.3-2.1H3.4v4.2zm.8-.6V9.8h.6c.8 0 1.7.3 1.7 1.5 0 1.1-.9 1.5-1.7 1.5h-.6v-.1zm3.6-1.5c0 1.3 1 2.2 2.3 2.2s2.3-.9 2.3-2.2c0-1.4-1-2.2-2.3-2.2s-2.3.8-2.3 2.2zm.8 0c0-.9.6-1.6 1.5-1.6s1.5.7 1.5 1.6c0 .9-.6 1.6-1.5 1.6s-1.5-.7-1.5-1.6zm8.1-1.6c-.3-.4-1-.6-1.5-.6-1.3 0-2.3.9-2.3 2.2s.9 2.2 2.3 2.2c.7 0 1.3-.3 1.6-.7l-.6-.4c-.2.3-.6.5-1 .5-.9 0-1.4-.6-1.4-1.6 0-.9.6-1.6 1.5-1.6.3 0 .7.1 1 .4l.4-.4z"></path></svg>
      </div>
      <div class="vi-icon-list__content">
        Readymade banjo plaid viral mustache chillwave
      </div>
    </li>
    <li class="vi-icon-list__item">
      <div class="vi-icon-list__icon">
        <!-- Icon file-doc  -->
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="file-doc" width="24" height="24"><path d="M6.1 16.2h-5v-10h5v-5h17.1V23H6.1v-6.8zm1 0V22h15.1V2.1H7.1v4h12.1v10c0 .1-12.1.1-12.1.1zm-3.7-2.9h1.5c1.1 0 2.3-.6 2.3-2.1 0-1.6-1.2-2.1-2.3-2.1H3.4v4.2zm.8-.6V9.8h.6c.8 0 1.7.3 1.7 1.5 0 1.1-.9 1.5-1.7 1.5h-.6v-.1zm3.6-1.5c0 1.3 1 2.2 2.3 2.2s2.3-.9 2.3-2.2c0-1.4-1-2.2-2.3-2.2s-2.3.8-2.3 2.2zm.8 0c0-.9.6-1.6 1.5-1.6s1.5.7 1.5 1.6c0 .9-.6 1.6-1.5 1.6s-1.5-.7-1.5-1.6zm8.1-1.6c-.3-.4-1-.6-1.5-.6-1.3 0-2.3.9-2.3 2.2s.9 2.2 2.3 2.2c.7 0 1.3-.3 1.6-.7l-.6-.4c-.2.3-.6.5-1 .5-.9 0-1.4-.6-1.4-1.6 0-.9.6-1.6 1.5-1.6.3 0 .7.1 1 .4l.4-.4z"></path></svg>
      </div>
      <div class="vi-icon-list__content">
        Readymade banjo plaid viral mustache chillwave
      </div>
    </li>
  </ul>
  <hr>
  <!-- Icon List  -->
  <ul class="vi-icon-list">
    <li class="vi-icon-list__item">
      <div class="vi-icon-list__icon">
        <!-- Icon file-doc  -->
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="file-doc" width="24" height="24"><path d="M6.1 16.2h-5v-10h5v-5h17.1V23H6.1v-6.8zm1 0V22h15.1V2.1H7.1v4h12.1v10c0 .1-12.1.1-12.1.1zm-3.7-2.9h1.5c1.1 0 2.3-.6 2.3-2.1 0-1.6-1.2-2.1-2.3-2.1H3.4v4.2zm.8-.6V9.8h.6c.8 0 1.7.3 1.7 1.5 0 1.1-.9 1.5-1.7 1.5h-.6v-.1zm3.6-1.5c0 1.3 1 2.2 2.3 2.2s2.3-.9 2.3-2.2c0-1.4-1-2.2-2.3-2.2s-2.3.8-2.3 2.2zm.8 0c0-.9.6-1.6 1.5-1.6s1.5.7 1.5 1.6c0 .9-.6 1.6-1.5 1.6s-1.5-.7-1.5-1.6zm8.1-1.6c-.3-.4-1-.6-1.5-.6-1.3 0-2.3.9-2.3 2.2s.9 2.2 2.3 2.2c.7 0 1.3-.3 1.6-.7l-.6-.4c-.2.3-.6.5-1 .5-.9 0-1.4-.6-1.4-1.6 0-.9.6-1.6 1.5-1.6.3 0 .7.1 1 .4l.4-.4z"></path></svg>
      </div>
      <div class="vi-icon-list__content">
        <a class="vi-icon-list__link" href="#">Disrupt keffiyeh readymade butcher kombucha</a>
      </div>
    </li>
    <li class="vi-icon-list__item">
      <div class="vi-icon-list__icon">
        <!-- Icon file-doc  -->
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="file-doc" width="24" height="24"><path d="M6.1 16.2h-5v-10h5v-5h17.1V23H6.1v-6.8zm1 0V22h15.1V2.1H7.1v4h12.1v10c0 .1-12.1.1-12.1.1zm-3.7-2.9h1.5c1.1 0 2.3-.6 2.3-2.1 0-1.6-1.2-2.1-2.3-2.1H3.4v4.2zm.8-.6V9.8h.6c.8 0 1.7.3 1.7 1.5 0 1.1-.9 1.5-1.7 1.5h-.6v-.1zm3.6-1.5c0 1.3 1 2.2 2.3 2.2s2.3-.9 2.3-2.2c0-1.4-1-2.2-2.3-2.2s-2.3.8-2.3 2.2zm.8 0c0-.9.6-1.6 1.5-1.6s1.5.7 1.5 1.6c0 .9-.6 1.6-1.5 1.6s-1.5-.7-1.5-1.6zm8.1-1.6c-.3-.4-1-.6-1.5-.6-1.3 0-2.3.9-2.3 2.2s.9 2.2 2.3 2.2c.7 0 1.3-.3 1.6-.7l-.6-.4c-.2.3-.6.5-1 .5-.9 0-1.4-.6-1.4-1.6 0-.9.6-1.6 1.5-1.6.3 0 .7.1 1 .4l.4-.4z"></path></svg>
      </div>
      <div class="vi-icon-list__content">
        <a class="vi-icon-list__link" href="#">Disrupt keffiyeh readymade butcher kombucha</a>
      </div>
    </li>
    <li class="vi-icon-list__item">
      <div class="vi-icon-list__icon">
        <!-- Icon file-doc  -->
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="file-doc" width="24" height="24"><path d="M6.1 16.2h-5v-10h5v-5h17.1V23H6.1v-6.8zm1 0V22h15.1V2.1H7.1v4h12.1v10c0 .1-12.1.1-12.1.1zm-3.7-2.9h1.5c1.1 0 2.3-.6 2.3-2.1 0-1.6-1.2-2.1-2.3-2.1H3.4v4.2zm.8-.6V9.8h.6c.8 0 1.7.3 1.7 1.5 0 1.1-.9 1.5-1.7 1.5h-.6v-.1zm3.6-1.5c0 1.3 1 2.2 2.3 2.2s2.3-.9 2.3-2.2c0-1.4-1-2.2-2.3-2.2s-2.3.8-2.3 2.2zm.8 0c0-.9.6-1.6 1.5-1.6s1.5.7 1.5 1.6c0 .9-.6 1.6-1.5 1.6s-1.5-.7-1.5-1.6zm8.1-1.6c-.3-.4-1-.6-1.5-.6-1.3 0-2.3.9-2.3 2.2s.9 2.2 2.3 2.2c.7 0 1.3-.3 1.6-.7l-.6-.4c-.2.3-.6.5-1 .5-.9 0-1.4-.6-1.4-1.6 0-.9.6-1.6 1.5-1.6.3 0 .7.1 1 .4l.4-.4z"></path></svg>
      </div>
      <div class="vi-icon-list__content">
        <a class="vi-icon-list__link" href="#">Disrupt keffiyeh readymade butcher kombucha</a>
      </div>
    </li>
  </ul>
</div>

Stylesheets #

The following stylesheets are required to display this component.

Usage documentation #

Usage documentation can be found here.

Usage Documentation

Changelog #

Changelog

Changed

  Underline links on hover


Added

  19 Feb 2025 - feat(icon-list): add support for two-column layout on larger devices
  RTL support
  Initial draft