Social Media Share

<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.dbbf99eb.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.dbbf99eb.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.dbbf99eb.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.dbbf99eb.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"><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.df9fbcbe.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.dbbf99eb.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.dbbf99eb.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.dbbf99eb.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.dbbf99eb.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.dbbf99eb.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.dbbf99eb.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.dbbf99eb.svg#spotify-color"></use>
                  </svg><span class="ecl-link__label">Spotify</span></a></li>
            </ul>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

<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.dbbf99eb.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.dbbf99eb.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.dbbf99eb.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.dbbf99eb.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"><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.df9fbcbe.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.dbbf99eb.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.dbbf99eb.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.dbbf99eb.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.dbbf99eb.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.dbbf99eb.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.dbbf99eb.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.dbbf99eb.svg#spotify-color"></use>
                  </svg><span class="ecl-link__label">Spotify</span></a></li>
            </ul>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>