Lists

<div class="list">
  <a href="#" class="list__item">
    <div class="list__content">
      Single line text...
    </div>
  </a>
  <a href="#" class="list__item">
    <div class="list__content">
      Single line text...
    </div>
  </a>
  <a href="#" class="list__item">
    <div class="list__content">
      Single line text...
    </div>
  </a>
</div>
<div class="list">
  <a href="#" class="list__item list__item--align-center">
    <div class="list__avatar">
      <img src="/images/avatar.svg" alt="">
    </div>
    <div class="list__content list__content--text-overflow">
      <h4 class="list__primary-text">Primary text Primary text Primary text Primary text Primary text Primary text Primary text Primary text Primary text </h4>
      <p class="list__secondary-text">Secondary text Secondary text Secondary text Secondary text Secondary text Secondary text Secondary text Secondary text </p>
    </div>
    <div class="list__icon">
      <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
    </div>
  </a>
  <a href="#" class="list__item list__item--align-center">
    <div class="list__avatar">
      <img src="/images/avatar.svg" alt="">
    </div>
    <div class="list__content list__content--text-overflow">
      <h4 class="list__primary-text">Primary text Primary text Primary text Primary text Primary text Primary text Primary text Primary text Primary text </h4>
      <p class="list__secondary-text">Secondary text Secondary text Secondary text Secondary text Secondary text Secondary text Secondary text Secondary text </p>
    </div>
    <div class="list__icon">
      <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
    </div>
  </a>
  <a href="#" class="list__item list__item--align-center">
    <div class="list__avatar">
      <img src="/images/avatar.svg" alt="">
    </div>
    <div class="list__content list__content--text-overflow">
      <h4 class="list__primary-text">Primary text Primary text Primary text Primary text Primary text Primary text Primary text Primary text Primary text </h4>
      <p class="list__secondary-text">Secondary text Secondary text Secondary text Secondary text Secondary text Secondary text Secondary text Secondary text </p>
    </div>
    <div class="list__icon">
      <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
    </div>
  </a>
</div>
<div class="list">
  <a href="#lists" class="list__item">
    <div class="list__icon">
      <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
    </div>
    <div class="list__content">
      Item
    </div>
  </a>
  <a href="#lists" class="list__item">
    <div class="list__icon">
      <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
    </div>
    <div class="list__content">
      Item
    </div>
  </a>
  <a href="#lists" class="list__item">
    <div class="list__icon">
      <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
    </div>
    <div class="list__content">
      Item
    </div>
  </a>
</div>