Share Section 

<section class="share-section">
    <span class="icon icon-arrow-long-down icon--brand-secondary"></span>
    <h3 class="share-section__heading">Share on</h3>
    <ul class="share-section__list">
        <li>
            <a class="share-section__link" target="_blank" href="" title="Facebook">
                <span class="icon icon-facebook icon--brand-secondary"></span>
            </a>
        </li>
        <li>
            <a class="share-section__link" target="_blank" href="" title="Twitter">
                <span class="icon icon-twitter icon--brand-secondary"></span>
            </a>
        </li>
        <li>
            <a class="share-section__link" href="">
                <span class="icon icon-email icon--brand-secondary" title="Email"></span>
            </a>
        </li>
    </ul>
</section>
 
<section class="share-section">
    <span class="icon icon-arrow-long-down icon--brand-secondary"></span>
    <h3 class="share-section__heading">Share on</h3>
    <ul class="share-section__list">
        <li>
            <a class="share-section__link" target="_blank" href="" title="Facebook">
                <span class="icon icon-facebook icon--brand-secondary"></span>
            </a>
        </li>
        <li>
            <a class="share-section__link" target="_blank" href="" title="Twitter">
                <span class="icon icon-twitter icon--brand-secondary"></span>
            </a>
        </li>
        <li>
            <a class="share-section__link" href="">
                <span class="icon icon-email icon--brand-secondary" title="Email"></span>
            </a>
        </li>
    </ul>
</section>
 
/* No context defined. */
  • Content: 
    .share-section {
  @extend %container-vertical-spacing-xl;

  margin: 0 auto;
  text-align: center;

  > * + * {
    margin-top: $spacer-sm;
  }

  .icon-arrow-long-down {
    transition: $transform-transition;
  }

  &:hover {
    .icon-arrow-long-down {
      transform: translateY($spacer-xs);
    }
  }
}

.share-section__heading {
  font-size: $font-size-lg;
  color: $sharing-headline-color;
}

.share-section__list {
  @extend %list-unstyled;

  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}

.share-section__link {
  @extend %heading-font-bold;
  @extend %link-unstyled;

  padding: $spacer-sm;

  .icon {
    transition: standard-transition(background-color);

    &:hover,
    &:focus {
      background-color: $sharing-interaction-color;
    }
  }
}
  • URL: /components/raw/share-section/_share-section.scss
  • Filesystem Path: components/04-molecules/share-section/_share-section.scss
  • Size: 780 Bytes

No notes defined.