List with illustrations

<ul class="ecl-list-illustration ecl-list-illustration--zebra">
  <li class="ecl-list-illustration__item">
    <picture class="ecl-picture ecl-list-illustration__picture"><img class="ecl-list-illustration__image"
        src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg" alt="Image alternative text" />
    </picture>
    <div class="ecl-list-illustration__detail">
      <div class="ecl-list-illustration__title-container">
        <div class="ecl-list-illustration__value">3.2 million</div>
        <div class="ecl-list-illustration__title">List with illustration item 1</div>
      </div>
      <div class="ecl-list-illustration__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
        eleifend quam leo, at malesuada ex viverra vitae. Nullam id felis eu lorem condimentum rutrum vitae ut felis.
        Nam ultricies, metus vel aliquam euismod, lacus dolor sodales neque, in laoreet tellus erat posuere purus. Fusce
        sit amet sem dui. In nec lacinia eros.</div>
    </div>
  </li>
  <li class="ecl-list-illustration__item">
    <picture class="ecl-picture ecl-list-illustration__picture"><img class="ecl-list-illustration__image"
        src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg" alt="Image alternative text" />
    </picture>
    <div class="ecl-list-illustration__detail">
      <div class="ecl-list-illustration__title-container">
        <div class="ecl-list-illustration__value">3.2 million</div>
        <div class="ecl-list-illustration__title">List with illustration item 2</div>
      </div>
      <div class="ecl-list-illustration__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
        eleifend quam leo, at malesuada ex viverra vitae. Nullam id felis eu lorem condimentum rutrum vitae ut felis.
        Nam ultricies, metus vel aliquam euismod, lacus dolor sodales neque, in laoreet tellus erat posuere purus. Fusce
        sit amet sem dui. In nec lacinia eros.</div>
    </div>
  </li>
  <li class="ecl-list-illustration__item">
    <picture class="ecl-picture ecl-list-illustration__picture"><img class="ecl-list-illustration__image"
        src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg" alt="Image alternative text" />
    </picture>
    <div class="ecl-list-illustration__detail">
      <div class="ecl-list-illustration__title-container">
        <div class="ecl-list-illustration__value">3.2 million</div>
        <div class="ecl-list-illustration__title">List with illustration item 3</div>
      </div>
      <div class="ecl-list-illustration__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
        eleifend quam leo, at malesuada ex viverra vitae. Nullam id felis eu lorem condimentum rutrum vitae ut felis.
        Nam ultricies, metus vel aliquam euismod, lacus dolor sodales neque, in laoreet tellus erat posuere purus. Fusce
        sit amet sem dui. In nec lacinia eros.</div>
    </div>
  </li>
  <li class="ecl-list-illustration__item">
    <picture class="ecl-picture ecl-list-illustration__picture"><img class="ecl-list-illustration__image"
        src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg" alt="Image alternative text" />
    </picture>
    <div class="ecl-list-illustration__detail">
      <div class="ecl-list-illustration__title-container">
        <div class="ecl-list-illustration__value">3.2 million</div>
        <div class="ecl-list-illustration__title">List with illustration item 4</div>
      </div>
      <div class="ecl-list-illustration__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
        eleifend quam leo, at malesuada ex viverra vitae. Nullam id felis eu lorem condimentum rutrum vitae ut felis.
        Nam ultricies, metus vel aliquam euismod, lacus dolor sodales neque, in laoreet tellus erat posuere purus. Fusce
        sit amet sem dui. In nec lacinia eros.</div>
    </div>
  </li>
</ul>

<ul class="ecl-list-illustration ecl-list-illustration--zebra">
  <li class="ecl-list-illustration__item">
    <picture class="ecl-picture ecl-list-illustration__picture ecl-list-illustration__picture--square"><img
        class="ecl-list-illustration__image ecl-list-illustration__image--square ecl-list-illustration__image--m"
        src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg" alt="Image alternative text" />
    </picture>
    <div class="ecl-list-illustration__detail">
      <div class="ecl-list-illustration__title-container">
        <div class="ecl-list-illustration__value">3.2 million</div>
        <div class="ecl-list-illustration__title">List with illustration item 1</div>
      </div>
      <div class="ecl-list-illustration__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
        eleifend quam leo, at malesuada ex viverra vitae. Nullam id felis eu lorem condimentum rutrum vitae ut felis.
        Nam ultricies, metus vel aliquam euismod, lacus dolor sodales neque, in laoreet tellus erat posuere purus. Fusce
        sit amet sem dui. In nec lacinia eros.</div>
    </div>
  </li>
  <li class="ecl-list-illustration__item">
    <picture class="ecl-picture ecl-list-illustration__picture ecl-list-illustration__picture--square"><img
        class="ecl-list-illustration__image ecl-list-illustration__image--square ecl-list-illustration__image--m"
        src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg" alt="Image alternative text" />
    </picture>
    <div class="ecl-list-illustration__detail">
      <div class="ecl-list-illustration__title-container">
        <div class="ecl-list-illustration__value">3.2 million</div>
        <div class="ecl-list-illustration__title">List with illustration item 2</div>
      </div>
      <div class="ecl-list-illustration__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
        eleifend quam leo, at malesuada ex viverra vitae. Nullam id felis eu lorem condimentum rutrum vitae ut felis.
        Nam ultricies, metus vel aliquam euismod, lacus dolor sodales neque, in laoreet tellus erat posuere purus. Fusce
        sit amet sem dui. In nec lacinia eros.</div>
    </div>
  </li>
  <li class="ecl-list-illustration__item">
    <picture class="ecl-picture ecl-list-illustration__picture ecl-list-illustration__picture--square"><img
        class="ecl-list-illustration__image ecl-list-illustration__image--square ecl-list-illustration__image--m"
        src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg" alt="Image alternative text" />
    </picture>
    <div class="ecl-list-illustration__detail">
      <div class="ecl-list-illustration__title-container">
        <div class="ecl-list-illustration__value">3.2 million</div>
        <div class="ecl-list-illustration__title">List with illustration item 3</div>
      </div>
      <div class="ecl-list-illustration__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
        eleifend quam leo, at malesuada ex viverra vitae. Nullam id felis eu lorem condimentum rutrum vitae ut felis.
        Nam ultricies, metus vel aliquam euismod, lacus dolor sodales neque, in laoreet tellus erat posuere purus. Fusce
        sit amet sem dui. In nec lacinia eros.</div>
    </div>
  </li>
  <li class="ecl-list-illustration__item">
    <picture class="ecl-picture ecl-list-illustration__picture ecl-list-illustration__picture--square"><img
        class="ecl-list-illustration__image ecl-list-illustration__image--square ecl-list-illustration__image--m"
        src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg" alt="Image alternative text" />
    </picture>
    <div class="ecl-list-illustration__detail">
      <div class="ecl-list-illustration__title-container">
        <div class="ecl-list-illustration__value">3.2 million</div>
        <div class="ecl-list-illustration__title">List with illustration item 4</div>
      </div>
      <div class="ecl-list-illustration__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
        eleifend quam leo, at malesuada ex viverra vitae. Nullam id felis eu lorem condimentum rutrum vitae ut felis.
        Nam ultricies, metus vel aliquam euismod, lacus dolor sodales neque, in laoreet tellus erat posuere purus. Fusce
        sit amet sem dui. In nec lacinia eros.</div>
    </div>
  </li>
</ul>

<ul class="ecl-list-illustration ecl-list-illustration--zebra">
  <li class="ecl-list-illustration__item">
    <div class="ecl-list-illustration__detail">
      <div class="ecl-list-illustration__title-container"><svg class="ecl-icon ecl-icon--l ecl-list-illustration__icon"
          focusable="false" aria-hidden="true">
          <use xlink:href="/dist/media/icons.e3d8f25c.svg#regulation"></use>
        </svg>
        <div class="ecl-list-illustration__value">3.2 million</div>
        <div class="ecl-list-illustration__title">List with illustration item 1</div>
      </div>
      <div class="ecl-list-illustration__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
        eleifend quam leo, at malesuada ex viverra vitae. Nullam id felis eu lorem condimentum rutrum vitae ut felis.
        Nam ultricies, metus vel aliquam euismod, lacus dolor sodales neque, in laoreet tellus erat posuere purus. Fusce
        sit amet sem dui. In nec lacinia eros.</div>
    </div>
  </li>
  <li class="ecl-list-illustration__item">
    <div class="ecl-list-illustration__detail">
      <div class="ecl-list-illustration__title-container"><svg class="ecl-icon ecl-icon--l ecl-list-illustration__icon"
          focusable="false" aria-hidden="true">
          <use xlink:href="/dist/media/icons.e3d8f25c.svg#regulation"></use>
        </svg>
        <div class="ecl-list-illustration__value">3.2 million</div>
        <div class="ecl-list-illustration__title">List with illustration item 2</div>
      </div>
      <div class="ecl-list-illustration__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
        eleifend quam leo, at malesuada ex viverra vitae. Nullam id felis eu lorem condimentum rutrum vitae ut felis.
        Nam ultricies, metus vel aliquam euismod, lacus dolor sodales neque, in laoreet tellus erat posuere purus. Fusce
        sit amet sem dui. In nec lacinia eros.</div>
    </div>
  </li>
  <li class="ecl-list-illustration__item">
    <div class="ecl-list-illustration__detail">
      <div class="ecl-list-illustration__title-container"><svg class="ecl-icon ecl-icon--l ecl-list-illustration__icon"
          focusable="false" aria-hidden="true">
          <use xlink:href="/dist/media/icons.e3d8f25c.svg#regulation"></use>
        </svg>
        <div class="ecl-list-illustration__value">3.2 million</div>
        <div class="ecl-list-illustration__title">List with illustration item 3</div>
      </div>
      <div class="ecl-list-illustration__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
        eleifend quam leo, at malesuada ex viverra vitae. Nullam id felis eu lorem condimentum rutrum vitae ut felis.
        Nam ultricies, metus vel aliquam euismod, lacus dolor sodales neque, in laoreet tellus erat posuere purus. Fusce
        sit amet sem dui. In nec lacinia eros.</div>
    </div>
  </li>
  <li class="ecl-list-illustration__item">
    <div class="ecl-list-illustration__detail">
      <div class="ecl-list-illustration__title-container"><svg class="ecl-icon ecl-icon--l ecl-list-illustration__icon"
          focusable="false" aria-hidden="true">
          <use xlink:href="/dist/media/icons.e3d8f25c.svg#regulation"></use>
        </svg>
        <div class="ecl-list-illustration__value">3.2 million</div>
        <div class="ecl-list-illustration__title">List with illustration item 4</div>
      </div>
      <div class="ecl-list-illustration__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
        eleifend quam leo, at malesuada ex viverra vitae. Nullam id felis eu lorem condimentum rutrum vitae ut felis.
        Nam ultricies, metus vel aliquam euismod, lacus dolor sodales neque, in laoreet tellus erat posuere purus. Fusce
        sit amet sem dui. In nec lacinia eros.</div>
    </div>
  </li>
</ul>

<ul class="ecl-list-illustration ecl-list-illustration--col-3">
  <li class="ecl-list-illustration__item">
    <picture class="ecl-picture ecl-list-illustration__picture"><img class="ecl-list-illustration__image"
        src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg" alt="Image alternative text" />
    </picture>
    <div class="ecl-list-illustration__detail">
      <div class="ecl-list-illustration__title-container">
        <div class="ecl-list-illustration__value">3.2 million</div>
        <div class="ecl-list-illustration__title">List with illustration item 1</div>
      </div>
      <div class="ecl-list-illustration__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
        eleifend quam leo, at malesuada ex viverra vitae. Nullam id felis eu lorem condimentum rutrum vitae ut felis.
        Nam ultricies, metus vel aliquam euismod, lacus dolor sodales neque, in laoreet tellus erat posuere purus. Fusce
        sit amet sem dui. In nec lacinia eros.</div>
    </div>
  </li>
  <li class="ecl-list-illustration__item">
    <picture class="ecl-picture ecl-list-illustration__picture"><img class="ecl-list-illustration__image"
        src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg" alt="Image alternative text" />
    </picture>
    <div class="ecl-list-illustration__detail">
      <div class="ecl-list-illustration__title-container">
        <div class="ecl-list-illustration__value">3.2 million</div>
        <div class="ecl-list-illustration__title">List with illustration item 2</div>
      </div>
      <div class="ecl-list-illustration__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
        eleifend quam leo, at malesuada ex viverra vitae. Nullam id felis eu lorem condimentum rutrum vitae ut felis.
        Nam ultricies, metus vel aliquam euismod, lacus dolor sodales neque, in laoreet tellus erat posuere purus. Fusce
        sit amet sem dui. In nec lacinia eros.</div>
    </div>
  </li>
  <li class="ecl-list-illustration__item">
    <picture class="ecl-picture ecl-list-illustration__picture"><img class="ecl-list-illustration__image"
        src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg" alt="Image alternative text" />
    </picture>
    <div class="ecl-list-illustration__detail">
      <div class="ecl-list-illustration__title-container">
        <div class="ecl-list-illustration__value">3.2 million</div>
        <div class="ecl-list-illustration__title">List with illustration item 3</div>
      </div>
      <div class="ecl-list-illustration__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
        eleifend quam leo, at malesuada ex viverra vitae. Nullam id felis eu lorem condimentum rutrum vitae ut felis.
        Nam ultricies, metus vel aliquam euismod, lacus dolor sodales neque, in laoreet tellus erat posuere purus. Fusce
        sit amet sem dui. In nec lacinia eros.</div>
    </div>
  </li>
  <li class="ecl-list-illustration__item">
    <picture class="ecl-picture ecl-list-illustration__picture"><img class="ecl-list-illustration__image"
        src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg" alt="Image alternative text" />
    </picture>
    <div class="ecl-list-illustration__detail">
      <div class="ecl-list-illustration__title-container">
        <div class="ecl-list-illustration__value">3.2 million</div>
        <div class="ecl-list-illustration__title">List with illustration item 4</div>
      </div>
      <div class="ecl-list-illustration__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
        eleifend quam leo, at malesuada ex viverra vitae. Nullam id felis eu lorem condimentum rutrum vitae ut felis.
        Nam ultricies, metus vel aliquam euismod, lacus dolor sodales neque, in laoreet tellus erat posuere purus. Fusce
        sit amet sem dui. In nec lacinia eros.</div>
    </div>
  </li>
</ul>

<ul class="ecl-list-illustration ecl-list-illustration--col-3">
  <li class="ecl-list-illustration__item">
    <picture class="ecl-picture ecl-list-illustration__picture ecl-list-illustration__picture--square"><img
        class="ecl-list-illustration__image ecl-list-illustration__image--square ecl-list-illustration__image--m"
        src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg" alt="Image alternative text" />
    </picture>
    <div class="ecl-list-illustration__detail">
      <div class="ecl-list-illustration__title-container">
        <div class="ecl-list-illustration__value">3.2 million</div>
        <div class="ecl-list-illustration__title">List with illustration item 1</div>
      </div>
      <div class="ecl-list-illustration__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
        eleifend quam leo, at malesuada ex viverra vitae. Nullam id felis eu lorem condimentum rutrum vitae ut felis.
        Nam ultricies, metus vel aliquam euismod, lacus dolor sodales neque, in laoreet tellus erat posuere purus. Fusce
        sit amet sem dui. In nec lacinia eros.</div>
    </div>
  </li>
  <li class="ecl-list-illustration__item">
    <picture class="ecl-picture ecl-list-illustration__picture ecl-list-illustration__picture--square"><img
        class="ecl-list-illustration__image ecl-list-illustration__image--square ecl-list-illustration__image--m"
        src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg" alt="Image alternative text" />
    </picture>
    <div class="ecl-list-illustration__detail">
      <div class="ecl-list-illustration__title-container">
        <div class="ecl-list-illustration__value">3.2 million</div>
        <div class="ecl-list-illustration__title">List with illustration item 2</div>
      </div>
      <div class="ecl-list-illustration__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
        eleifend quam leo, at malesuada ex viverra vitae. Nullam id felis eu lorem condimentum rutrum vitae ut felis.
        Nam ultricies, metus vel aliquam euismod, lacus dolor sodales neque, in laoreet tellus erat posuere purus. Fusce
        sit amet sem dui. In nec lacinia eros.</div>
    </div>
  </li>
  <li class="ecl-list-illustration__item">
    <picture class="ecl-picture ecl-list-illustration__picture ecl-list-illustration__picture--square"><img
        class="ecl-list-illustration__image ecl-list-illustration__image--square ecl-list-illustration__image--m"
        src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg" alt="Image alternative text" />
    </picture>
    <div class="ecl-list-illustration__detail">
      <div class="ecl-list-illustration__title-container">
        <div class="ecl-list-illustration__value">3.2 million</div>
        <div class="ecl-list-illustration__title">List with illustration item 3</div>
      </div>
      <div class="ecl-list-illustration__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
        eleifend quam leo, at malesuada ex viverra vitae. Nullam id felis eu lorem condimentum rutrum vitae ut felis.
        Nam ultricies, metus vel aliquam euismod, lacus dolor sodales neque, in laoreet tellus erat posuere purus. Fusce
        sit amet sem dui. In nec lacinia eros.</div>
    </div>
  </li>
  <li class="ecl-list-illustration__item">
    <picture class="ecl-picture ecl-list-illustration__picture ecl-list-illustration__picture--square"><img
        class="ecl-list-illustration__image ecl-list-illustration__image--square ecl-list-illustration__image--m"
        src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg" alt="Image alternative text" />
    </picture>
    <div class="ecl-list-illustration__detail">
      <div class="ecl-list-illustration__title-container">
        <div class="ecl-list-illustration__value">3.2 million</div>
        <div class="ecl-list-illustration__title">List with illustration item 4</div>
      </div>
      <div class="ecl-list-illustration__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
        eleifend quam leo, at malesuada ex viverra vitae. Nullam id felis eu lorem condimentum rutrum vitae ut felis.
        Nam ultricies, metus vel aliquam euismod, lacus dolor sodales neque, in laoreet tellus erat posuere purus. Fusce
        sit amet sem dui. In nec lacinia eros.</div>
    </div>
  </li>
</ul>

<ul class="ecl-list-illustration ecl-list-illustration--col-3">
  <li class="ecl-list-illustration__item">
    <div class="ecl-list-illustration__detail">
      <div class="ecl-list-illustration__title-container"><svg class="ecl-icon ecl-icon--l ecl-list-illustration__icon"
          focusable="false" aria-hidden="true">
          <use xlink:href="/dist/media/icons.e3d8f25c.svg#regulation"></use>
        </svg>
        <div class="ecl-list-illustration__value">3.2 million</div>
        <div class="ecl-list-illustration__title">List with illustration item 1</div>
      </div>
      <div class="ecl-list-illustration__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
        eleifend quam leo, at malesuada ex viverra vitae. Nullam id felis eu lorem condimentum rutrum vitae ut felis.
        Nam ultricies, metus vel aliquam euismod, lacus dolor sodales neque, in laoreet tellus erat posuere purus. Fusce
        sit amet sem dui. In nec lacinia eros.</div>
    </div>
  </li>
  <li class="ecl-list-illustration__item">
    <div class="ecl-list-illustration__detail">
      <div class="ecl-list-illustration__title-container"><svg class="ecl-icon ecl-icon--l ecl-list-illustration__icon"
          focusable="false" aria-hidden="true">
          <use xlink:href="/dist/media/icons.e3d8f25c.svg#regulation"></use>
        </svg>
        <div class="ecl-list-illustration__value">3.2 million</div>
        <div class="ecl-list-illustration__title">List with illustration item 2</div>
      </div>
      <div class="ecl-list-illustration__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
        eleifend quam leo, at malesuada ex viverra vitae. Nullam id felis eu lorem condimentum rutrum vitae ut felis.
        Nam ultricies, metus vel aliquam euismod, lacus dolor sodales neque, in laoreet tellus erat posuere purus. Fusce
        sit amet sem dui. In nec lacinia eros.</div>
    </div>
  </li>
  <li class="ecl-list-illustration__item">
    <div class="ecl-list-illustration__detail">
      <div class="ecl-list-illustration__title-container"><svg class="ecl-icon ecl-icon--l ecl-list-illustration__icon"
          focusable="false" aria-hidden="true">
          <use xlink:href="/dist/media/icons.e3d8f25c.svg#regulation"></use>
        </svg>
        <div class="ecl-list-illustration__value">3.2 million</div>
        <div class="ecl-list-illustration__title">List with illustration item 3</div>
      </div>
      <div class="ecl-list-illustration__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
        eleifend quam leo, at malesuada ex viverra vitae. Nullam id felis eu lorem condimentum rutrum vitae ut felis.
        Nam ultricies, metus vel aliquam euismod, lacus dolor sodales neque, in laoreet tellus erat posuere purus. Fusce
        sit amet sem dui. In nec lacinia eros.</div>
    </div>
  </li>
  <li class="ecl-list-illustration__item">
    <div class="ecl-list-illustration__detail">
      <div class="ecl-list-illustration__title-container"><svg class="ecl-icon ecl-icon--l ecl-list-illustration__icon"
          focusable="false" aria-hidden="true">
          <use xlink:href="/dist/media/icons.e3d8f25c.svg#regulation"></use>
        </svg>
        <div class="ecl-list-illustration__value">3.2 million</div>
        <div class="ecl-list-illustration__title">List with illustration item 4</div>
      </div>
      <div class="ecl-list-illustration__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
        eleifend quam leo, at malesuada ex viverra vitae. Nullam id felis eu lorem condimentum rutrum vitae ut felis.
        Nam ultricies, metus vel aliquam euismod, lacus dolor sodales neque, in laoreet tellus erat posuere purus. Fusce
        sit amet sem dui. In nec lacinia eros.</div>
    </div>
  </li>
</ul>