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

No notes defined.