<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/visual-elements/social-media-bar/_social-media-bar.scss
  • Size: 267 Bytes
  • Handle: @social-media-bar
  • Preview:
  • Filesystem Path: components/04-molecules/visual-elements/social-media-bar/social-media-bar.html

No notes defined.