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-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.32dd05ab.svg#mastodon-color"></use>
        </svg><span class="ecl-link__label">Mastodon</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.32dd05ab.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.32dd05ab.svg#bluesky-color"></use>
        </svg><span class="ecl-link__label">Bluesky</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.32dd05ab.svg#facebook-color"></use>
        </svg><span class="ecl-link__label">Facebook</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.e3d8f25c.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>

<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.32dd05ab.svg#mastodon-color"></use>
        </svg><span class="ecl-link__label">Mastodon</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.32dd05ab.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.32dd05ab.svg#bluesky-color"></use>
        </svg><span class="ecl-link__label">Bluesky</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.32dd05ab.svg#facebook-color"></use>
        </svg><span class="ecl-link__label">Facebook</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.e3d8f25c.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>