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-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.35074b29.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-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.35074b29.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-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.35074b29.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-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.35074b29.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-popover__toggle ecl-social-media-share__link" aria-controls="social-media-share-popover" data-ecl-popover-toggle aria-expanded="false"><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.b6764719.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__scrollable"> <div class="ecl-popover__content">Nulla est ad excepteur sint officia fugiat aute commodo ullamco amet culpa eiusmod labore. Esse nostrud aliqua pariatur pariatur officia non laboris cillum velit dolore in sit laboris fugiat.</div> </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-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.35074b29.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-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.35074b29.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-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.35074b29.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-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.35074b29.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-popover__toggle ecl-social-media-share__link" aria-controls="social-media-share-popover" data-ecl-popover-toggle aria-expanded="false"><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.b6764719.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__scrollable"> <div class="ecl-popover__content">Nulla est ad excepteur sint officia fugiat aute commodo ullamco amet culpa eiusmod labore. Esse nostrud aliqua pariatur pariatur officia non laboris cillum velit dolore in sit laboris fugiat.</div> </div> </div> </div> </li> </ul> </div>
Try it yourself on the playground
Playground