Vertical list with illustrations
With images (large)
List with illustration item 1
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.
List with illustration item 2
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.
List with illustration item 3
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.
List with illustration item 4
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 class="ecl-list-illustration ecl-list-illustration--zebra">
<div class="ecl-list-illustration__item">
<div class="ecl-list-illustration__image" aria-label="alt text for image" role="img"
style="background-image:url(&#x27;https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg&#x27;)">
</div>
<div class="ecl-list-illustration__detail">
<div class="ecl-list-illustration__title-container">
<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>
</div>
<div class="ecl-list-illustration__item">
<div class="ecl-list-illustration__image" aria-label="alt text for image" role="img"
style="background-image:url(&#x27;https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg&#x27;)">
</div>
<div class="ecl-list-illustration__detail">
<div class="ecl-list-illustration__title-container">
<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>
</div>
<div class="ecl-list-illustration__item">
<div class="ecl-list-illustration__image" aria-label="alt text for image" role="img"
style="background-image:url(&#x27;https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg&#x27;)">
</div>
<div class="ecl-list-illustration__detail">
<div class="ecl-list-illustration__title-container">
<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>
</div>
<div class="ecl-list-illustration__item">
<div class="ecl-list-illustration__image" aria-label="alt text for image" role="img"
style="background-image:url(&#x27;https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg&#x27;)">
</div>
<div class="ecl-list-illustration__detail">
<div class="ecl-list-illustration__title-container">
<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>
</div>
</div>
Try it yourself on the playground
PlaygroundWith images (square)
List with illustration item 1
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.
List with illustration item 2
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.
List with illustration item 3
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.
List with illustration item 4
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 class="ecl-list-illustration ecl-list-illustration--zebra">
<div class="ecl-list-illustration__item">
<div class="ecl-list-illustration__image ecl-list-illustration__image--square" aria-label="alt text for image"
role="img"
style="background-image:url(&#x27;https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg&#x27;)">
</div>
<div class="ecl-list-illustration__detail">
<div class="ecl-list-illustration__title-container">
<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>
</div>
<div class="ecl-list-illustration__item">
<div class="ecl-list-illustration__image ecl-list-illustration__image--square" aria-label="alt text for image"
role="img"
style="background-image:url(&#x27;https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg&#x27;)">
</div>
<div class="ecl-list-illustration__detail">
<div class="ecl-list-illustration__title-container">
<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>
</div>
<div class="ecl-list-illustration__item">
<div class="ecl-list-illustration__image ecl-list-illustration__image--square" aria-label="alt text for image"
role="img"
style="background-image:url(&#x27;https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg&#x27;)">
</div>
<div class="ecl-list-illustration__detail">
<div class="ecl-list-illustration__title-container">
<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>
</div>
<div class="ecl-list-illustration__item">
<div class="ecl-list-illustration__image ecl-list-illustration__image--square" aria-label="alt text for image"
role="img"
style="background-image:url(&#x27;https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg&#x27;)">
</div>
<div class="ecl-list-illustration__detail">
<div class="ecl-list-illustration__title-container">
<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>
</div>
</div>
Try it yourself on the playground
PlaygroundWith icons
List with illustration item 1
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.
List with illustration item 2
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.
List with illustration item 3
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.
List with illustration item 4
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 class="ecl-list-illustration ecl-list-illustration--zebra">
<div 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.3278a5c4.svg#regulation"></use>
</svg>
<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>
</div>
<div 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.3278a5c4.svg#regulation"></use>
</svg>
<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>
</div>
<div 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.3278a5c4.svg#regulation"></use>
</svg>
<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>
</div>
<div 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.3278a5c4.svg#regulation"></use>
</svg>
<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>
</div>
</div>
Try it yourself on the playground
PlaygroundHorizontal list with illustrations
With images (large)
List with illustration item 1
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.
List with illustration item 2
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.
List with illustration item 3
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.
List with illustration item 4
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 class="ecl-list-illustration ecl-list-illustration--col-3">
<div class="ecl-list-illustration__item">
<div class="ecl-list-illustration__image" aria-label="alt text for image" role="img"
style="background-image:url(&#x27;https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg&#x27;)">
</div>
<div class="ecl-list-illustration__detail">
<div class="ecl-list-illustration__title-container">
<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>
</div>
<div class="ecl-list-illustration__item">
<div class="ecl-list-illustration__image" aria-label="alt text for image" role="img"
style="background-image:url(&#x27;https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg&#x27;)">
</div>
<div class="ecl-list-illustration__detail">
<div class="ecl-list-illustration__title-container">
<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>
</div>
<div class="ecl-list-illustration__item">
<div class="ecl-list-illustration__image" aria-label="alt text for image" role="img"
style="background-image:url(&#x27;https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg&#x27;)">
</div>
<div class="ecl-list-illustration__detail">
<div class="ecl-list-illustration__title-container">
<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>
</div>
<div class="ecl-list-illustration__item">
<div class="ecl-list-illustration__image" aria-label="alt text for image" role="img"
style="background-image:url(&#x27;https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg&#x27;)">
</div>
<div class="ecl-list-illustration__detail">
<div class="ecl-list-illustration__title-container">
<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>
</div>
</div>
Try it yourself on the playground
PlaygroundWith images (square)
List with illustration item 1
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.
List with illustration item 2
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.
List with illustration item 3
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.
List with illustration item 4
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 class="ecl-list-illustration ecl-list-illustration--col-3">
<div class="ecl-list-illustration__item">
<div class="ecl-list-illustration__image ecl-list-illustration__image--square" aria-label="alt text for image"
role="img"
style="background-image:url(&#x27;https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg&#x27;)">
</div>
<div class="ecl-list-illustration__detail">
<div class="ecl-list-illustration__title-container">
<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>
</div>
<div class="ecl-list-illustration__item">
<div class="ecl-list-illustration__image ecl-list-illustration__image--square" aria-label="alt text for image"
role="img"
style="background-image:url(&#x27;https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg&#x27;)">
</div>
<div class="ecl-list-illustration__detail">
<div class="ecl-list-illustration__title-container">
<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>
</div>
<div class="ecl-list-illustration__item">
<div class="ecl-list-illustration__image ecl-list-illustration__image--square" aria-label="alt text for image"
role="img"
style="background-image:url(&#x27;https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg&#x27;)">
</div>
<div class="ecl-list-illustration__detail">
<div class="ecl-list-illustration__title-container">
<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>
</div>
<div class="ecl-list-illustration__item">
<div class="ecl-list-illustration__image ecl-list-illustration__image--square" aria-label="alt text for image"
role="img"
style="background-image:url(&#x27;https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg&#x27;)">
</div>
<div class="ecl-list-illustration__detail">
<div class="ecl-list-illustration__title-container">
<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>
</div>
</div>
Try it yourself on the playground
PlaygroundWith icons
List with illustration item 1
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.
List with illustration item 2
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.
List with illustration item 3
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.
List with illustration item 4
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 class="ecl-list-illustration ecl-list-illustration--col-3">
<div 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.3278a5c4.svg#regulation"></use>
</svg>
<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>
</div>
<div 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.3278a5c4.svg#regulation"></use>
</svg>
<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>
</div>
<div 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.3278a5c4.svg#regulation"></use>
</svg>
<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>
</div>
<div 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.3278a5c4.svg#regulation"></use>
</svg>
<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>
</div>
</div>
Try it yourself on the playground
Playground