<div class="ecl-social-media-share">
<p class="ecl-social-media-share__description">Share this page</p>
<ul class="ecl-social-media-share__list">
<li class="ecl-social-media-share__item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before ecl-social-media-share__link ecl-social-media-share__link--twitter"><svg
class="ecl-icon ecl-icon--xl ecl-link__icon ecl-social-media-share__icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons-social.d5f51eae.svg#twitter"></use>
</svg><svg class="ecl-icon ecl-icon--xl ecl-link__icon ecl-social-media-share__icon-hover" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons-social.d5f51eae.svg#twitter_hover"></use>
</svg><span class="ecl-link__label">Twitter</span></a></li>
<li class="ecl-social-media-share__item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before ecl-social-media-share__link ecl-social-media-share__link--facebook"><svg
class="ecl-icon ecl-icon--xl ecl-link__icon ecl-social-media-share__icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons-social.d5f51eae.svg#facebook"></use>
</svg><svg class="ecl-icon ecl-icon--xl ecl-link__icon ecl-social-media-share__icon-hover" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons-social.d5f51eae.svg#facebook_hover"></use>
</svg><span class="ecl-link__label">Facebook</span></a></li>
<li class="ecl-social-media-share__item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before ecl-social-media-share__link ecl-social-media-share__link--instagram"><svg
class="ecl-icon ecl-icon--xl ecl-link__icon ecl-social-media-share__icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons-social.d5f51eae.svg#instagram"></use>
</svg><svg class="ecl-icon ecl-icon--xl ecl-link__icon ecl-social-media-share__icon-hover" focusable="false"
aria-hidden="true">
<use xlink:href="#instagram_hover"></use>
</svg><span class="ecl-link__label">Instagram</span></a></li>
<li class="ecl-social-media-share__item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before ecl-social-media-share__link ecl-social-media-share__link--linkedin"><svg
class="ecl-icon ecl-icon--xl ecl-link__icon ecl-social-media-share__icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons-social.d5f51eae.svg#linkedin"></use>
</svg><svg class="ecl-icon ecl-icon--xl ecl-link__icon ecl-social-media-share__icon-hover" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons-social.d5f51eae.svg#linkedin_hover"></use>
</svg><span class="ecl-link__label">Linkedin</span></a></li>
<li class="ecl-social-media-share__item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before ecl-social-media-share__link ecl-social-media-share__link--email"><svg
class="ecl-icon ecl-icon--xl ecl-link__icon ecl-social-media-share__icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons-social.d5f51eae.svg#email"></use>
</svg><svg class="ecl-icon ecl-icon--xl ecl-link__icon ecl-social-media-share__icon-hover" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons-social.d5f51eae.svg#email_hover"></use>
</svg><span class="ecl-link__label">E-mail</span></a></li>
<li class="ecl-social-media-share__item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-social-media-share__link">Other social networks</a></li>
</ul>
</div>Try it yourself on the playground
Playground