Horizontal
<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"><svg
class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-share__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons-social-media.3d336843.svg#twitter-color"></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"><svg
class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-share__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons-social-media.3d336843.svg#facebook-color"></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"><svg
class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-share__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons-social-media.3d336843.svg#linkedin-color"></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"><svg
class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-share__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons-social-media.3d336843.svg#telegram-color"></use>
</svg><span class="ecl-link__label">Telegram</span></a></li>
<li class="ecl-social-media-share__item">
<div class="ecl-popover" data-ecl-auto-init="Popover"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before ecl-popover__toggle ecl-social-media-share__link"
aria-controls="social-media-share-popover" data-ecl-popover-toggle="" aria-expanded="false"
aria-label="See other social media networks"><svg
class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-share__icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.6770a2ae.svg#share"></use>
</svg><span class="ecl-link__label">Other social networks</span></a>
<div id="social-media-share-popover" class="ecl-popover__container" hidden="">
<div class="ecl-popover__content">
<ul class="ecl-popover__list">
<li class="ecl-popover__item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before ecl-popover__link"><svg
class="ecl-icon ecl-icon--s ecl-link__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons-social-media.3d336843.svg#pinterest-color"></use>
</svg><span class="ecl-link__label">Pinterest</span></a></li>
<li class="ecl-popover__item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before ecl-popover__link"><svg
class="ecl-icon ecl-icon--s ecl-link__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons-social-media.3d336843.svg#mastodon-color"></use>
</svg><span class="ecl-link__label">Mastodon</span></a></li>
<li class="ecl-popover__item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before ecl-popover__link"><svg
class="ecl-icon ecl-icon--s ecl-link__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons-social-media.3d336843.svg#reddit-color"></use>
</svg><span class="ecl-link__label">Reddit</span></a></li>
<li class="ecl-popover__item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before ecl-popover__link"><svg
class="ecl-icon ecl-icon--s ecl-link__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons-social-media.3d336843.svg#youtube-color"></use>
</svg><span class="ecl-link__label">Youtube</span></a></li>
<li class="ecl-popover__item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before ecl-popover__link"><svg
class="ecl-icon ecl-icon--s ecl-link__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons-social-media.3d336843.svg#flickr-color"></use>
</svg><span class="ecl-link__label">Flickr</span></a></li>
<li class="ecl-popover__item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before ecl-popover__link"><svg
class="ecl-icon ecl-icon--s ecl-link__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons-social-media.3d336843.svg#skype-color"></use>
</svg><span class="ecl-link__label">Skype</span></a></li>
<li class="ecl-popover__item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before ecl-popover__link"><svg
class="ecl-icon ecl-icon--s ecl-link__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons-social-media.3d336843.svg#spotify-color"></use>
</svg><span class="ecl-link__label">Spotify</span></a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
Try it yourself on the playground
PlaygroundVertical
<div class="ecl-social-media-share ecl-social-media-share--vertical">
<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"><svg
class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-share__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons-social-media.3d336843.svg#twitter-color"></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"><svg
class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-share__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons-social-media.3d336843.svg#facebook-color"></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"><svg
class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-share__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons-social-media.3d336843.svg#linkedin-color"></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"><svg
class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-share__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons-social-media.3d336843.svg#telegram-color"></use>
</svg><span class="ecl-link__label">Telegram</span></a></li>
<li class="ecl-social-media-share__item">
<div class="ecl-popover" data-ecl-auto-init="Popover"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before ecl-popover__toggle ecl-social-media-share__link"
aria-controls="social-media-share-popover" data-ecl-popover-toggle="" aria-expanded="false"
aria-label="See other social media networks"><svg
class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-share__icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons.6770a2ae.svg#share"></use>
</svg><span class="ecl-link__label">Other social networks</span></a>
<div id="social-media-share-popover" class="ecl-popover__container" hidden="">
<div class="ecl-popover__content">
<ul class="ecl-popover__list">
<li class="ecl-popover__item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before ecl-popover__link"><svg
class="ecl-icon ecl-icon--s ecl-link__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons-social-media.3d336843.svg#pinterest-color"></use>
</svg><span class="ecl-link__label">Pinterest</span></a></li>
<li class="ecl-popover__item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before ecl-popover__link"><svg
class="ecl-icon ecl-icon--s ecl-link__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons-social-media.3d336843.svg#mastodon-color"></use>
</svg><span class="ecl-link__label">Mastodon</span></a></li>
<li class="ecl-popover__item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before ecl-popover__link"><svg
class="ecl-icon ecl-icon--s ecl-link__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons-social-media.3d336843.svg#reddit-color"></use>
</svg><span class="ecl-link__label">Reddit</span></a></li>
<li class="ecl-popover__item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before ecl-popover__link"><svg
class="ecl-icon ecl-icon--s ecl-link__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons-social-media.3d336843.svg#youtube-color"></use>
</svg><span class="ecl-link__label">Youtube</span></a></li>
<li class="ecl-popover__item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before ecl-popover__link"><svg
class="ecl-icon ecl-icon--s ecl-link__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons-social-media.3d336843.svg#flickr-color"></use>
</svg><span class="ecl-link__label">Flickr</span></a></li>
<li class="ecl-popover__item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before ecl-popover__link"><svg
class="ecl-icon ecl-icon--s ecl-link__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons-social-media.3d336843.svg#skype-color"></use>
</svg><span class="ecl-link__label">Skype</span></a></li>
<li class="ecl-popover__item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before ecl-popover__link"><svg
class="ecl-icon ecl-icon--s ecl-link__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons-social-media.3d336843.svg#spotify-color"></use>
</svg><span class="ecl-link__label">Spotify</span></a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
Try it yourself on the playground
Playground