3 columns
00.0 million
Lorem ipsum
Nunc condimentum sapien ut nibh finibus suscipit vitae at justo. Morbi quis odio faucibus, commodo tortor id, elementum libero.
00.0 million
Sed hendrerit
Turpis varius congue venenatis, erat dui feugiat felis.
00.0 million
Donec suscipit interdum augue, ac dapibus eros finibus a.
Cras vestibulum efficitur mi, quis porta tellus rutrum ut. Quisque at pulvinar sem.
00.0 million
Aenean dapibus
Aliquam lacinia diam eu sem malesuada, in interdum ante bibendum.
00.0 million
Aliquam faucibus nulla eget eleifend
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis nec lectus tortor.
00.0 million
Nam lacinia nisl eget diam mattis
Sed efficitur bibendum rutrum. Nunc feugiat congue augue ac consectetur.
<div class="ecl-fact-figures ecl-fact-figures--col-3">
<div class="ecl-fact-figures__items">
<div class="ecl-fact-figures__item"><svg class="ecl-icon ecl-icon--l ecl-fact-figures__icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.cec58484.svg#infographic"></use>
</svg>
<div class="ecl-fact-figures__value">00.0 million</div>
<div class="ecl-fact-figures__title">Lorem ipsum</div>
<div class="ecl-fact-figures__description">Nunc condimentum sapien ut nibh finibus suscipit vitae at justo. Morbi
quis odio faucibus, commodo tortor id, elementum libero.</div>
</div>
<div class="ecl-fact-figures__item"><svg class="ecl-icon ecl-icon--l ecl-fact-figures__icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.cec58484.svg#spreadsheet"></use>
</svg>
<div class="ecl-fact-figures__value">00.0 million</div>
<div class="ecl-fact-figures__title">Sed hendrerit</div>
<div class="ecl-fact-figures__description">Turpis varius congue venenatis, erat dui feugiat felis.</div>
</div>
<div class="ecl-fact-figures__item"><svg class="ecl-icon ecl-icon--l ecl-fact-figures__icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.cec58484.svg#growth"></use>
</svg>
<div class="ecl-fact-figures__value">00.0 million</div>
<div class="ecl-fact-figures__title">Donec suscipit interdum augue, ac dapibus eros finibus a.</div>
<div class="ecl-fact-figures__description">Cras vestibulum efficitur mi, quis porta tellus rutrum ut. Quisque at
pulvinar sem.</div>
</div>
<div class="ecl-fact-figures__item"><svg class="ecl-icon ecl-icon--l ecl-fact-figures__icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.cec58484.svg#digital"></use>
</svg>
<div class="ecl-fact-figures__value">00.0 million</div>
<div class="ecl-fact-figures__title">Aenean dapibus</div>
<div class="ecl-fact-figures__description">Aliquam lacinia diam eu sem malesuada, in interdum ante bibendum.</div>
</div>
<div class="ecl-fact-figures__item"><svg class="ecl-icon ecl-icon--l ecl-fact-figures__icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.cec58484.svg#regulation"></use>
</svg>
<div class="ecl-fact-figures__value">00.0 million</div>
<div class="ecl-fact-figures__title">Aliquam faucibus nulla eget eleifend</div>
<div class="ecl-fact-figures__description">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos. Duis nec lectus tortor.</div>
</div>
<div class="ecl-fact-figures__item"><svg class="ecl-icon ecl-icon--l ecl-fact-figures__icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.cec58484.svg#image"></use>
</svg>
<div class="ecl-fact-figures__value">00.0 million</div>
<div class="ecl-fact-figures__title">Nam lacinia nisl eget diam mattis</div>
<div class="ecl-fact-figures__description">Sed efficitur bibendum rutrum. Nunc feugiat congue augue ac
consectetur.</div>
</div>
</div>
<div class="ecl-fact-figures__view-all"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-fact-figures__view-all-link"><span
class="ecl-link__label">View all metrics</span><svg
class="ecl-icon ecl-icon--m ecl-icon--rotate-90 ecl-link__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
</svg></a></div>
</div>
Try it yourself on the playground
Playground4 columns
00.0 million
Lorem ipsum
Nunc condimentum sapien ut nibh finibus suscipit vitae at justo. Morbi quis odio faucibus, commodo tortor id, elementum libero.
00.0 million
Sed hendrerit
Turpis varius congue venenatis, erat dui feugiat felis.
00.0 million
Donec suscipit interdum augue, ac dapibus eros finibus a.
Cras vestibulum efficitur mi, quis porta tellus rutrum ut. Quisque at pulvinar sem.
00.0 million
Aenean dapibus
Aliquam lacinia diam eu sem malesuada, in interdum ante bibendum.
00.0 million
Lorem ipsum
Nunc condimentum sapien ut nibh finibus suscipit vitae at justo. Morbi quis odio faucibus, commodo tortor id, elementum libero.
00.0 million
Sed hendrerit
Turpis varius congue venenatis, erat dui feugiat felis.
00.0 million
Donec suscipit interdum augue, ac dapibus eros finibus a.
Cras vestibulum efficitur mi, quis porta tellus rutrum ut. Quisque at pulvinar sem.
00.0 million
Aenean dapibus
Aliquam lacinia diam eu sem malesuada, in interdum ante bibendum.
<div class="ecl-fact-figures ecl-fact-figures--col-4">
<div class="ecl-fact-figures__items">
<div class="ecl-fact-figures__item"><svg class="ecl-icon ecl-icon--l ecl-fact-figures__icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.cec58484.svg#infographic"></use>
</svg>
<div class="ecl-fact-figures__value">00.0 million</div>
<div class="ecl-fact-figures__title">Lorem ipsum</div>
<div class="ecl-fact-figures__description">Nunc condimentum sapien ut nibh finibus suscipit vitae at justo. Morbi
quis odio faucibus, commodo tortor id, elementum libero.</div>
</div>
<div class="ecl-fact-figures__item"><svg class="ecl-icon ecl-icon--l ecl-fact-figures__icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.cec58484.svg#spreadsheet"></use>
</svg>
<div class="ecl-fact-figures__value">00.0 million</div>
<div class="ecl-fact-figures__title">Sed hendrerit</div>
<div class="ecl-fact-figures__description">Turpis varius congue venenatis, erat dui feugiat felis.</div>
</div>
<div class="ecl-fact-figures__item"><svg class="ecl-icon ecl-icon--l ecl-fact-figures__icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.cec58484.svg#growth"></use>
</svg>
<div class="ecl-fact-figures__value">00.0 million</div>
<div class="ecl-fact-figures__title">Donec suscipit interdum augue, ac dapibus eros finibus a.</div>
<div class="ecl-fact-figures__description">Cras vestibulum efficitur mi, quis porta tellus rutrum ut. Quisque at
pulvinar sem.</div>
</div>
<div class="ecl-fact-figures__item"><svg class="ecl-icon ecl-icon--l ecl-fact-figures__icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.cec58484.svg#digital"></use>
</svg>
<div class="ecl-fact-figures__value">00.0 million</div>
<div class="ecl-fact-figures__title">Aenean dapibus</div>
<div class="ecl-fact-figures__description">Aliquam lacinia diam eu sem malesuada, in interdum ante bibendum.</div>
</div>
<div class="ecl-fact-figures__item"><svg class="ecl-icon ecl-icon--l ecl-fact-figures__icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.cec58484.svg#regulation"></use>
</svg>
<div class="ecl-fact-figures__value">00.0 million</div>
<div class="ecl-fact-figures__title">Lorem ipsum</div>
<div class="ecl-fact-figures__description">Nunc condimentum sapien ut nibh finibus suscipit vitae at justo. Morbi
quis odio faucibus, commodo tortor id, elementum libero.</div>
</div>
<div class="ecl-fact-figures__item"><svg class="ecl-icon ecl-icon--l ecl-fact-figures__icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.cec58484.svg#image"></use>
</svg>
<div class="ecl-fact-figures__value">00.0 million</div>
<div class="ecl-fact-figures__title">Sed hendrerit</div>
<div class="ecl-fact-figures__description">Turpis varius congue venenatis, erat dui feugiat felis.</div>
</div>
<div class="ecl-fact-figures__item"><svg class="ecl-icon ecl-icon--l ecl-fact-figures__icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.cec58484.svg#global"></use>
</svg>
<div class="ecl-fact-figures__value">00.0 million</div>
<div class="ecl-fact-figures__title">Donec suscipit interdum augue, ac dapibus eros finibus a.</div>
<div class="ecl-fact-figures__description">Cras vestibulum efficitur mi, quis porta tellus rutrum ut. Quisque at
pulvinar sem.</div>
</div>
<div class="ecl-fact-figures__item"><svg class="ecl-icon ecl-icon--l ecl-fact-figures__icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.cec58484.svg#video"></use>
</svg>
<div class="ecl-fact-figures__value">00.0 million</div>
<div class="ecl-fact-figures__title">Aenean dapibus</div>
<div class="ecl-fact-figures__description">Aliquam lacinia diam eu sem malesuada, in interdum ante bibendum.</div>
</div>
</div>
<div class="ecl-fact-figures__view-all"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-fact-figures__view-all-link"><span
class="ecl-link__label">View all metrics</span><svg
class="ecl-icon ecl-icon--m ecl-icon--rotate-90 ecl-link__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
</svg></a></div>
</div>
Try it yourself on the playground
Playground