# Social Media Bar

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <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. */

`
File:

- 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:
  - With layout
  - Component only
- Filesystem Path: components/04-molecules/social-media-bar/social-media-bar.html

No notes defined.