<section class="center share-section">
    <span class="icon-svg 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-svg icon-facebook icon--brand-secondary"></span></a>
        </li>
        <li>
            <a class="share-section__link" target="_blank" href="" title="Twitter"><span class="icon-svg icon-twitter icon--brand-secondary"></span></a>
        </li>
        <li>
            <a class="share-section__link" href=""><span class="icon-svg icon-email icon--brand-secondary" title="Email"></span></a>
        </li>
    </ul>
</section>
<section class="center share-section">
    <span class="icon-svg 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-svg icon-facebook icon--brand-secondary"></span>
            </a>
        </li>
        <li>
            <a class="share-section__link" target="_blank" href="" title="Twitter">
                <span class="icon-svg icon-twitter icon--brand-secondary"></span>
            </a>
        </li>
        <li>
            <a class="share-section__link" href="">
                <span class="icon-svg icon-email icon--brand-secondary" title="Email"></span>
            </a>
        </li>
    </ul>
</section>
/* No context defined. */
  • Content:
    .share-section {
      width: 50%;
      margin: 0 auto;
      margin-bottom: $spacer-xl;
      text-align: center;
    
      .icon-arrow-long-down {
        margin-bottom: $spacer-sm;
        transition: $transform-transition;
      }
    
      &:hover {
        .icon-arrow-long-down {
          transform: translateY($spacer-xs);
        }
      }
    }
    
    .share-section__heading {
      color: $sharing-headline-color;
      font-size: $font-size-lg;
    }
    
    .share-section__list {
      @extend %list-unstyled;
    
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
    
    .share-section__link {
      @extend %heading-font-bold;
      @extend %link-unstyled;
    
      padding: $spacer-sm;
    
      .icon-svg {
        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/article&blog-post-elements/share-section/_share-section.scss
  • Size: 768 Bytes
  • Handle: @share-section
  • Preview:
  • Filesystem Path: components/04-molecules/article&blog-post-elements/share-section/share-section.html

No notes defined.