Horizontal
<div class="ecl-social-media-follow">
<p class="ecl-social-media-follow__description">Follow the latest progress and learn more about getting involved.</p>
<ul class="ecl-social-media-follow__list">
<li class="ecl-social-media-follow__item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before ecl-social-media-follow__link"><svg
class="ecl-icon ecl-icon--xl ecl-link__icon ecl-social-media-follow__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-follow__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-follow__item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before ecl-social-media-follow__link"><svg
class="ecl-icon ecl-icon--xl ecl-link__icon ecl-social-media-follow__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-follow__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-follow__item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before ecl-social-media-follow__link"><svg
class="ecl-icon ecl-icon--xl ecl-link__icon ecl-social-media-follow__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-follow__icon-hover" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons-social.d5f51eae.svg#instagram_hover"></use>
</svg><span class="ecl-link__label">Instagram</span></a></li>
<li class="ecl-social-media-follow__item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before ecl-social-media-follow__link"><svg
class="ecl-icon ecl-icon--xl ecl-link__icon ecl-social-media-follow__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-follow__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-follow__item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-social-media-follow__link">Other social networks</a></li>
</ul>
</div>
Try it yourself on the playground
PlaygroundVertical
<div class="ecl-social-media-follow ecl-social-media-follow--vertical">
<p class="ecl-social-media-follow__description">Follow the latest progress and learn more about getting involved.</p>
<ul class="ecl-social-media-follow__list">
<li class="ecl-social-media-follow__item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before ecl-social-media-follow__link"><svg
class="ecl-icon ecl-icon--xl ecl-link__icon ecl-social-media-follow__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-follow__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-follow__item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before ecl-social-media-follow__link"><svg
class="ecl-icon ecl-icon--xl ecl-link__icon ecl-social-media-follow__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-follow__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-follow__item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before ecl-social-media-follow__link"><svg
class="ecl-icon ecl-icon--xl ecl-link__icon ecl-social-media-follow__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-follow__icon-hover" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons-social.d5f51eae.svg#instagram_hover"></use>
</svg><span class="ecl-link__label">Instagram</span></a></li>
<li class="ecl-social-media-follow__item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before ecl-social-media-follow__link"><svg
class="ecl-icon ecl-icon--xl ecl-link__icon ecl-social-media-follow__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-follow__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-follow__item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-social-media-follow__link">Other social networks</a></li>
</ul>
</div>
Try it yourself on the playground
Playground