Social Media Bar 

<ul class="social-media-bar">
    <li class="social-media-bar__item">
        <a href="#" class="social-media-bar__link" title="Twitter">
            <span class="icon icon-twitter icon--brand-primary"></span>
        </a>
    </li>
    <li class="social-media-bar__item">
        <a href="#" class="social-media-bar__link" title="Youtube">
            <span class="icon icon-youtube icon--brand-primary"></span>
        </a>
    </li>
    <li class="social-media-bar__item">
        <a href="#" class="social-media-bar__link" title="Linkedin">
            <span class="icon icon-linkedin icon--brand-primary"></span>
        </a>
    </li>
    <li class="social-media-bar__item">
        <a href="#" class="social-media-bar__link" title="Xing">
            <span class="icon icon-xing icon--brand-primary"></span>
        </a>
    </li>
</ul>
 
<ul class="social-media-bar">
    <li class="social-media-bar__item">
        <a href="#" class="social-media-bar__link" title="Twitter">
            <span class="icon icon-twitter icon--brand-primary"></span>
        </a>
    </li>
    <li class="social-media-bar__item">
        <a href="#" class="social-media-bar__link" title="Youtube">
            <span class="icon icon-youtube icon--brand-primary"></span>
        </a>
    </li>
    <li class="social-media-bar__item">
        <a href="#" class="social-media-bar__link" title="Linkedin">
            <span class="icon icon-linkedin icon--brand-primary"></span>
        </a>
    </li>
    <li class="social-media-bar__item">
        <a href="#" class="social-media-bar__link" title="Xing">
            <span class="icon icon-xing icon--brand-primary"></span>
        </a>
    </li>
</ul>
 
/* No context defined. */
  • Content: 
    .social-media-bar {
  @extend %list-unstyled;
}

.social-media-bar__item {
  display: inline-block;

  & + & {
    margin-left: $spacer-md;
  }

  .icon:hover,
  .icon:focus {
    background: $brand-white;
  }
}

.social-media-bar__link {
  @extend %link-unstyled;
}
  • URL: /components/raw/social-media-bar/_social-media-bar.scss
  • Filesystem Path: components/04-molecules/social-media-bar/_social-media-bar.scss
  • Size: 267 Bytes
  • Handle: @social-media-bar
  • Preview:
  • Filesystem Path: components/04-molecules/social-media-bar/social-media-bar.html

No notes defined.