Horizontal
<div class="ecl-social-media-follow"> <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="/component-library/v4.0.0-beta-1/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--xs ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/component-library/v4.0.0-beta-1/dist/media/icons-social-media.0e6aeda5.svg#twitter-color"> </use> </svg><span class="ecl-link__label">Twitter</span></a></li> <li class="ecl-social-media-follow__item"><a href="/component-library/v4.0.0-beta-1/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--xs ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/component-library/v4.0.0-beta-1/dist/media/icons-social-media.0e6aeda5.svg#facebook-color"> </use> </svg><span class="ecl-link__label">Facebook</span></a></li> <li class="ecl-social-media-follow__item"><a href="/component-library/v4.0.0-beta-1/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--xs ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/component-library/v4.0.0-beta-1/dist/media/icons-social-media.0e6aeda5.svg#linkedin-color"> </use> </svg><span class="ecl-link__label">Linkedin</span></a></li> <li class="ecl-social-media-follow__item"><a href="/component-library/v4.0.0-beta-1/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--xs ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/component-library/v4.0.0-beta-1/dist/media/icons-social-media.0e6aeda5.svg#instagram-color"> </use> </svg><span class="ecl-link__label">Instagram</span></a></li> <li class="ecl-social-media-follow__item"><a href="/component-library/v4.0.0-beta-1/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--xs ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/component-library/v4.0.0-beta-1/dist/media/icons-social-media.0e6aeda5.svg#telegram-color"> </use> </svg><span class="ecl-link__label">Telegram</span></a></li> <li class="ecl-social-media-follow__item"><a href="/component-library/v4.0.0-beta-1/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--xs ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/component-library/v4.0.0-beta-1/dist/media/icons-social-media.0e6aeda5.svg#chain"></use> </svg><span class="ecl-link__label">Other social networks</span></a></li> </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 us</p> <ul class="ecl-social-media-follow__list"> <li class="ecl-social-media-follow__item"><a href="/component-library/v4.0.0-beta-1/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--xs ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/component-library/v4.0.0-beta-1/dist/media/icons-social-media.0e6aeda5.svg#twitter-color"> </use> </svg><span class="ecl-link__label">Twitter</span></a></li> <li class="ecl-social-media-follow__item"><a href="/component-library/v4.0.0-beta-1/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--xs ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/component-library/v4.0.0-beta-1/dist/media/icons-social-media.0e6aeda5.svg#facebook-color"> </use> </svg><span class="ecl-link__label">Facebook</span></a></li> <li class="ecl-social-media-follow__item"><a href="/component-library/v4.0.0-beta-1/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--xs ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/component-library/v4.0.0-beta-1/dist/media/icons-social-media.0e6aeda5.svg#linkedin-color"> </use> </svg><span class="ecl-link__label">Linkedin</span></a></li> <li class="ecl-social-media-follow__item"><a href="/component-library/v4.0.0-beta-1/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--xs ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/component-library/v4.0.0-beta-1/dist/media/icons-social-media.0e6aeda5.svg#instagram-color"> </use> </svg><span class="ecl-link__label">Instagram</span></a></li> <li class="ecl-social-media-follow__item"><a href="/component-library/v4.0.0-beta-1/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--xs ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/component-library/v4.0.0-beta-1/dist/media/icons-social-media.0e6aeda5.svg#telegram-color"> </use> </svg><span class="ecl-link__label">Telegram</span></a></li> <li class="ecl-social-media-follow__item"><a href="/component-library/v4.0.0-beta-1/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--xs ecl-link__icon ecl-social-media-follow__icon" focusable="false" aria-hidden="true"> <use xlink:href="/component-library/v4.0.0-beta-1/dist/media/icons-social-media.0e6aeda5.svg#chain"></use> </svg><span class="ecl-link__label">Other social networks</span></a></li> </div>
Try it yourself on the playground
Playground