Horizontal
<div class="ecl-social-media-follow ecl-social-media-follow--left"> <p class="ecl-social-media-follow__description">Follow us</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--no-visited ecl-link--icon ecl-social-media-follow__link"><svg class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons-social-media.a7d77119.svg#facebook"></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--no-visited ecl-link--icon ecl-social-media-follow__link"><svg class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons-social-media.a7d77119.svg#instagram"></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--no-visited ecl-link--icon ecl-social-media-follow__link"><svg class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons-social-media.a7d77119.svg#mastodon"></use> </svg><span class="ecl-link__label">Mastodon</span></a></li> <li class="ecl-social-media-follow__item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-link--icon ecl-social-media-follow__link"><svg class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons-social-media.a7d77119.svg#linkedin"></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-link--no-visited ecl-link--icon ecl-social-media-follow__link"><svg class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons-social-media.a7d77119.svg#telegram"></use> </svg><span class="ecl-link__label">Telegram</span></a></li> <li class="ecl-social-media-follow__item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-link--icon ecl-social-media-follow__link"><svg class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons-social-media.a7d77119.svg#chain"></use> </svg><span class="ecl-link__label">Other</span></a></li> </ul> </div>
Try it yourself on the playground
Playground<div class="ecl-social-media-follow ecl-social-media-follow--left"> <p class="ecl-social-media-follow__description">Follow us</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--no-visited ecl-link--icon ecl-social-media-follow__link"><svg class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons-social-media.a7d77119.svg#facebook-color"></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--no-visited ecl-link--icon ecl-social-media-follow__link"><svg class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons-social-media.a7d77119.svg#instagram-color"></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--no-visited ecl-link--icon ecl-social-media-follow__link"><svg class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons-social-media.a7d77119.svg#mastodon-color"></use> </svg><span class="ecl-link__label">Mastodon</span></a></li> <li class="ecl-social-media-follow__item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-link--icon ecl-social-media-follow__link"><svg class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons-social-media.a7d77119.svg#linkedin-color"></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-link--no-visited ecl-link--icon ecl-social-media-follow__link"><svg class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons-social-media.a7d77119.svg#telegram-color"></use> </svg><span class="ecl-link__label">Telegram</span></a></li> <li class="ecl-social-media-follow__item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-link--icon ecl-social-media-follow__link"><svg class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons-social-media.a7d77119.svg#chain"></use> </svg><span class="ecl-link__label">Other</span></a></li> </ul> </div>
Try it yourself on the playground
Playground<div class="ecl-social-media-follow ecl-social-media-follow--right"> <p class="ecl-social-media-follow__description">Follow us</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--no-visited ecl-link--icon ecl-social-media-follow__link"><svg class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons-social-media.a7d77119.svg#facebook-color"></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--no-visited ecl-link--icon ecl-social-media-follow__link"><svg class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons-social-media.a7d77119.svg#instagram-color"></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--no-visited ecl-link--icon ecl-social-media-follow__link"><svg class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons-social-media.a7d77119.svg#mastodon-color"></use> </svg><span class="ecl-link__label">Mastodon</span></a></li> <li class="ecl-social-media-follow__item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-link--icon ecl-social-media-follow__link"><svg class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons-social-media.a7d77119.svg#linkedin-color"></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-link--no-visited ecl-link--icon ecl-social-media-follow__link"><svg class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons-social-media.a7d77119.svg#telegram-color"></use> </svg><span class="ecl-link__label">Telegram</span></a></li> <li class="ecl-social-media-follow__item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-link--icon ecl-social-media-follow__link"><svg class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons-social-media.a7d77119.svg#chain"></use> </svg><span class="ecl-link__label">Other</span></a></li> </ul> </div>
Try it yourself on the playground
PlaygroundVertical
<div class="ecl-social-media-follow ecl-social-media-follow--vertical ecl-social-media-follow--left"> <p class="ecl-social-media-follow__description">Follow us</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--no-visited ecl-link--icon ecl-social-media-follow__link"><svg class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons-social-media.a7d77119.svg#facebook"></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--no-visited ecl-link--icon ecl-social-media-follow__link"><svg class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons-social-media.a7d77119.svg#instagram"></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--no-visited ecl-link--icon ecl-social-media-follow__link"><svg class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons-social-media.a7d77119.svg#mastodon"></use> </svg><span class="ecl-link__label">Mastodon</span></a></li> <li class="ecl-social-media-follow__item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-link--icon ecl-social-media-follow__link"><svg class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons-social-media.a7d77119.svg#linkedin"></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-link--no-visited ecl-link--icon ecl-social-media-follow__link"><svg class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons-social-media.a7d77119.svg#telegram"></use> </svg><span class="ecl-link__label">Telegram</span></a></li> <li class="ecl-social-media-follow__item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-link--icon ecl-social-media-follow__link"><svg class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons-social-media.a7d77119.svg#chain"></use> </svg><span class="ecl-link__label">Other</span></a></li> </ul> </div>
Try it yourself on the playground
Playground<div class="ecl-social-media-follow ecl-social-media-follow--vertical ecl-social-media-follow--left"> <p class="ecl-social-media-follow__description">Follow us</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--no-visited ecl-link--icon ecl-social-media-follow__link"><svg class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons-social-media.a7d77119.svg#facebook-color"></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--no-visited ecl-link--icon ecl-social-media-follow__link"><svg class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons-social-media.a7d77119.svg#instagram-color"></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--no-visited ecl-link--icon ecl-social-media-follow__link"><svg class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons-social-media.a7d77119.svg#mastodon-color"></use> </svg><span class="ecl-link__label">Mastodon</span></a></li> <li class="ecl-social-media-follow__item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-link--icon ecl-social-media-follow__link"><svg class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons-social-media.a7d77119.svg#linkedin-color"></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-link--no-visited ecl-link--icon ecl-social-media-follow__link"><svg class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons-social-media.a7d77119.svg#telegram-color"></use> </svg><span class="ecl-link__label">Telegram</span></a></li> <li class="ecl-social-media-follow__item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-link--icon ecl-social-media-follow__link"><svg class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons-social-media.a7d77119.svg#chain"></use> </svg><span class="ecl-link__label">Other</span></a></li> </ul> </div>
Try it yourself on the playground
Playground<div class="ecl-social-media-follow ecl-social-media-follow--vertical ecl-social-media-follow--right"> <p class="ecl-social-media-follow__description">Follow us</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--no-visited ecl-link--icon ecl-social-media-follow__link"><svg class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons-social-media.a7d77119.svg#facebook-color"></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--no-visited ecl-link--icon ecl-social-media-follow__link"><svg class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons-social-media.a7d77119.svg#instagram-color"></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--no-visited ecl-link--icon ecl-social-media-follow__link"><svg class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons-social-media.a7d77119.svg#mastodon-color"></use> </svg><span class="ecl-link__label">Mastodon</span></a></li> <li class="ecl-social-media-follow__item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-link--icon ecl-social-media-follow__link"><svg class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons-social-media.a7d77119.svg#linkedin-color"></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-link--no-visited ecl-link--icon ecl-social-media-follow__link"><svg class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons-social-media.a7d77119.svg#telegram-color"></use> </svg><span class="ecl-link__label">Telegram</span></a></li> <li class="ecl-social-media-follow__item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-link--icon ecl-social-media-follow__link"><svg class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons-social-media.a7d77119.svg#chain"></use> </svg><span class="ecl-link__label">Other</span></a></li> </ul> </div>
Try it yourself on the playground
Playground