1 column
00.0 million
Lorem ipsum
Nunc eu est nec orci rhoncus venenatis. Donec rutrum lacus eget lobortis eleifend. Duis cursus sapien ac felis bibendum, in sagittis turpis porttitor. Aliquam sed mauris et orci efficitur mollis. Donec eu dolor in turpis sollicitudin malesuada.
<div class="ecl-fact-figures ecl-fact-figures--col-1"> <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.b6764719.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 eu est nec orci rhoncus venenatis. Donec rutrum lacus eget lobortis eleifend. Duis cursus sapien ac felis bibendum, in sagittis turpis porttitor. Aliquam sed mauris et orci efficitur mollis. Donec eu dolor in turpis sollicitudin malesuada.</div> </div> </div> <div class="ecl-fact-figures__view-all"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--icon ecl-fact-figures__view-all-link"><span class="ecl-link__label">View all metrics</span><svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-link__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons.b6764719.svg#corner-arrow"></use> </svg></a></div> </div>
Try it yourself on the playground
Playground2 columns
00.0 million
Lorem ipsum
Nunc eu est nec orci rhoncus venenatis. Donec rutrum lacus eget lobortis eleifend. Duis cursus sapien ac felis bibendum, in sagittis turpis porttitor. Aliquam sed mauris et orci efficitur mollis. Donec eu dolor in turpis sollicitudin malesuada.
00.0 million
Sed hendrerit
Turpis varius congue venenatis, erat dui feugiat felis.
<div class="ecl-fact-figures ecl-fact-figures--col-2"> <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.b6764719.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 eu est nec orci rhoncus venenatis. Donec rutrum lacus eget lobortis eleifend. Duis cursus sapien ac felis bibendum, in sagittis turpis porttitor. Aliquam sed mauris et orci efficitur mollis. Donec eu dolor in turpis sollicitudin malesuada.</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.b6764719.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> <div class="ecl-fact-figures__view-all"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--icon ecl-fact-figures__view-all-link"><span class="ecl-link__label">View all metrics</span><svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-link__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons.b6764719.svg#corner-arrow"></use> </svg></a></div> </div>
Try it yourself on the playground
Playground3 columns
00.0 million
Lorem ipsum
Nunc eu est nec orci rhoncus venenatis. Donec rutrum lacus eget lobortis eleifend. Duis cursus sapien ac felis bibendum, in sagittis turpis porttitor. Aliquam sed mauris et orci efficitur mollis. Donec eu dolor in turpis sollicitudin malesuada.
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.
<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.b6764719.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 eu est nec orci rhoncus venenatis. Donec rutrum lacus eget lobortis eleifend. Duis cursus sapien ac felis bibendum, in sagittis turpis porttitor. Aliquam sed mauris et orci efficitur mollis. Donec eu dolor in turpis sollicitudin malesuada.</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.b6764719.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.b6764719.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.b6764719.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.b6764719.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.b6764719.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> <div class="ecl-fact-figures__view-all"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--icon ecl-fact-figures__view-all-link"><span class="ecl-link__label">View all metrics</span><svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-link__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons.b6764719.svg#corner-arrow"></use> </svg></a></div> </div>
Try it yourself on the playground
Playground4 columns
00.0 million
Lorem ipsum
Nunc eu est nec orci rhoncus venenatis. Donec rutrum lacus eget lobortis eleifend. Duis cursus sapien ac felis bibendum, in sagittis turpis porttitor. Aliquam sed mauris et orci efficitur mollis. Donec eu dolor in turpis sollicitudin malesuada.
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.b6764719.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 eu est nec orci rhoncus venenatis. Donec rutrum lacus eget lobortis eleifend. Duis cursus sapien ac felis bibendum, in sagittis turpis porttitor. Aliquam sed mauris et orci efficitur mollis. Donec eu dolor in turpis sollicitudin malesuada.</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.b6764719.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.b6764719.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.b6764719.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.b6764719.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.b6764719.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.b6764719.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.b6764719.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-fact-figures__view-all-link"><span class="ecl-link__label">View all metrics</span><svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-link__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons.b6764719.svg#corner-arrow"></use> </svg></a></div> </div>
Try it yourself on the playground
Playground