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-svg 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-svg 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-svg 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-svg 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-svg 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-svg 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-svg 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-svg 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-svg:hover,
  .icon-svg:focus {
    background: $brand-white;
  }
}

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

No notes defined.