Social Media Follow - Components

Horizontal

<div class="ecl-social-media-follow ecl-social-media-follow--left">
  <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/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--m ecl-link__icon ecl-social-media-follow__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/component-library/dist/media/icons-social-media.32dd05ab.svg#facebook"></use>
        </svg><span class="ecl-link__label">Facebook</span></a></li>
    <li class="ecl-social-media-follow__item"><a href="/component-library/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--m ecl-link__icon ecl-social-media-follow__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/component-library/dist/media/icons-social-media.32dd05ab.svg#instagram"></use>
        </svg><span class="ecl-link__label">Instagram</span></a></li>
    <li class="ecl-social-media-follow__item"><a href="/component-library/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--m ecl-link__icon ecl-social-media-follow__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/component-library/dist/media/icons-social-media.32dd05ab.svg#mastodon"></use>
        </svg><span class="ecl-link__label">Mastodon</span></a></li>
    <li class="ecl-social-media-follow__item"><a href="/component-library/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--m ecl-link__icon ecl-social-media-follow__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/component-library/dist/media/icons-social-media.32dd05ab.svg#linkedin"></use>
        </svg><span class="ecl-link__label">Linkedin</span></a></li>
    <li class="ecl-social-media-follow__item"><a href="/component-library/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--m ecl-link__icon ecl-social-media-follow__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/component-library/dist/media/icons-social-media.32dd05ab.svg#telegram"></use>
        </svg><span class="ecl-link__label">Telegram</span></a></li>
    <li class="ecl-social-media-follow__item"><a href="/component-library/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--m ecl-link__icon ecl-social-media-follow__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/component-library/dist/media/icons-social-media.32dd05ab.svg#chain"></use>
        </svg><span class="ecl-link__label">Other</span></a></li>
  </ul>
</div>

Try it yourself on the playground

Playground

Vertical

Fullscreen

<div class="ecl-social-media-follow ecl-social-media-follow--vertical ecl-social-media-follow--left">
  <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/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--m ecl-link__icon ecl-social-media-follow__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/component-library/dist/media/icons-social-media.32dd05ab.svg#facebook"></use>
        </svg><span class="ecl-link__label">Facebook</span></a></li>
    <li class="ecl-social-media-follow__item"><a href="/component-library/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--m ecl-link__icon ecl-social-media-follow__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/component-library/dist/media/icons-social-media.32dd05ab.svg#instagram"></use>
        </svg><span class="ecl-link__label">Instagram</span></a></li>
    <li class="ecl-social-media-follow__item"><a href="/component-library/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--m ecl-link__icon ecl-social-media-follow__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/component-library/dist/media/icons-social-media.32dd05ab.svg#mastodon"></use>
        </svg><span class="ecl-link__label">Mastodon</span></a></li>
    <li class="ecl-social-media-follow__item"><a href="/component-library/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--m ecl-link__icon ecl-social-media-follow__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/component-library/dist/media/icons-social-media.32dd05ab.svg#linkedin"></use>
        </svg><span class="ecl-link__label">Linkedin</span></a></li>
    <li class="ecl-social-media-follow__item"><a href="/component-library/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--m ecl-link__icon ecl-social-media-follow__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/component-library/dist/media/icons-social-media.32dd05ab.svg#telegram"></use>
        </svg><span class="ecl-link__label">Telegram</span></a></li>
    <li class="ecl-social-media-follow__item"><a href="/component-library/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--m ecl-link__icon ecl-social-media-follow__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/component-library/dist/media/icons-social-media.32dd05ab.svg#chain"></use>
        </svg><span class="ecl-link__label">Other</span></a></li>
  </ul>
</div>

Try it yourself on the playground

Playground

⚠️ Deprecated – Color Variants

Horizontal Color

Fullscreen

<div class="ecl-social-media-follow ecl-social-media-follow--left">
  <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/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--m ecl-link__icon ecl-social-media-follow__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/component-library/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-follow__item"><a href="/component-library/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--m ecl-link__icon ecl-social-media-follow__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/component-library/dist/media/icons-social-media.32dd05ab.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/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--m ecl-link__icon ecl-social-media-follow__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/component-library/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-follow__item"><a href="/component-library/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--m ecl-link__icon ecl-social-media-follow__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/component-library/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-follow__item"><a href="/component-library/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--m ecl-link__icon ecl-social-media-follow__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/component-library/dist/media/icons-social-media.32dd05ab.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/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--m ecl-link__icon ecl-social-media-follow__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/component-library/dist/media/icons-social-media.32dd05ab.svg#chain"></use>
        </svg><span class="ecl-link__label">Other</span></a></li>
  </ul>
</div>

Try it yourself on the playground

Playground

Fullscreen

<div class="ecl-social-media-follow ecl-social-media-follow--right">
  <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/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--m ecl-link__icon ecl-social-media-follow__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/component-library/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-follow__item"><a href="/component-library/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--m ecl-link__icon ecl-social-media-follow__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/component-library/dist/media/icons-social-media.32dd05ab.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/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--m ecl-link__icon ecl-social-media-follow__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/component-library/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-follow__item"><a href="/component-library/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--m ecl-link__icon ecl-social-media-follow__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/component-library/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-follow__item"><a href="/component-library/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--m ecl-link__icon ecl-social-media-follow__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/component-library/dist/media/icons-social-media.32dd05ab.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/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--m ecl-link__icon ecl-social-media-follow__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/component-library/dist/media/icons-social-media.32dd05ab.svg#chain"></use>
        </svg><span class="ecl-link__label">Other</span></a></li>
  </ul>
</div>

Try it yourself on the playground

Playground

Vertical Color

Fullscreen

<div class="ecl-social-media-follow ecl-social-media-follow--vertical ecl-social-media-follow--left">
  <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/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--m ecl-link__icon ecl-social-media-follow__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/component-library/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-follow__item"><a href="/component-library/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--m ecl-link__icon ecl-social-media-follow__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/component-library/dist/media/icons-social-media.32dd05ab.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/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--m ecl-link__icon ecl-social-media-follow__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/component-library/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-follow__item"><a href="/component-library/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--m ecl-link__icon ecl-social-media-follow__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/component-library/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-follow__item"><a href="/component-library/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--m ecl-link__icon ecl-social-media-follow__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/component-library/dist/media/icons-social-media.32dd05ab.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/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--m ecl-link__icon ecl-social-media-follow__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/component-library/dist/media/icons-social-media.32dd05ab.svg#chain"></use>
        </svg><span class="ecl-link__label">Other</span></a></li>
  </ul>
</div>

Try it yourself on the playground

Playground

Fullscreen

<div class="ecl-social-media-follow ecl-social-media-follow--vertical ecl-social-media-follow--right">
  <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/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--m ecl-link__icon ecl-social-media-follow__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/component-library/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-follow__item"><a href="/component-library/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--m ecl-link__icon ecl-social-media-follow__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/component-library/dist/media/icons-social-media.32dd05ab.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/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--m ecl-link__icon ecl-social-media-follow__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/component-library/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-follow__item"><a href="/component-library/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--m ecl-link__icon ecl-social-media-follow__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/component-library/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-follow__item"><a href="/component-library/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--m ecl-link__icon ecl-social-media-follow__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/component-library/dist/media/icons-social-media.32dd05ab.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/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--m ecl-link__icon ecl-social-media-follow__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/component-library/dist/media/icons-social-media.32dd05ab.svg#chain"></use>
        </svg><span class="ecl-link__label">Other</span></a></li>
  </ul>
</div>

Try it yourself on the playground

Playground