# Toolbar

Ready

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

`

    <ul class="toolbar">
        <li class="toolbar__item">
            <a href="#" class="toolbar__link">
                <span class="icon icon-feedback icon--brand-secondary"></span>
                Feedback
            </a>
        </li>
        <li class="toolbar__item">
            <a href="#" class="toolbar__link">
                <span class="icon icon-apple-itunes icon--brand-secondary"></span>
                Apple
            </a>
        </li>
        <li class="toolbar__item">
            <a href="#" class="toolbar__link">
                <span class="icon icon-spotify icon--brand-secondary"></span>
                Spotify
            </a>
        </li>
        <li class="toolbar__item">
            <a href="#" class="toolbar__link">
                <span class="icon icon-rss icon--brand-secondary"></span>
                RSS
            </a>
        </li>
        <li class="toolbar__item">
            <a href="#" class="toolbar__link">
                <span class="icon icon-text icon--brand-secondary"></span>
                Transkript
            </a>
        </li>
    </ul>

`
`

    <ul class="toolbar">
        <li class="toolbar__item">
            <a href="#" class="toolbar__link">
                <span class="icon icon-feedback icon--brand-secondary"></span>
                Feedback
            </a>
        </li>
        <li class="toolbar__item">
            <a href="#" class="toolbar__link">
                <span class="icon icon-apple-itunes icon--brand-secondary"></span>
                Apple
            </a>
        </li>
        <li class="toolbar__item">
            <a href="#" class="toolbar__link">
                <span class="icon icon-spotify icon--brand-secondary"></span>
                Spotify
            </a>
        </li>
        <li class="toolbar__item">
            <a href="#" class="toolbar__link">
                <span class="icon icon-rss icon--brand-secondary"></span>
                RSS
            </a>
        </li>
        <li class="toolbar__item">
            <a href="#" class="toolbar__link">
                <span class="icon icon-text icon--brand-secondary"></span>
                Transkript
            </a>
        </li>
    </ul>

`
`

    /* No context defined. */

`
File:

- Content:
  `

      .toolbar {
        @extend %list-unstyled;

        display: flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: center;
      }

      .toolbar__item {
        margin: $spacer-sm;
      }

      .toolbar__link {
        @extend %link-unstyled;
        @extend %heading-font-bold;

        display: flex;
        align-items: center;
        justify-content: center;

        color: $toolbar-link-color;

        transition: standard-transition(color);

        .icon {
          margin-right: $spacer-xxs;
          transition: standard-transition(background);
        }

        &:hover,
        &:focus {
          color: $toolbar-link-hover-color;

          .icon {
            background: $toolbar-link-hover-color;
          }
        }
      }

  `
- URL: /components/raw/toolbar/_toolbar.scss
- Filesystem Path: components/04-molecules/toolbar/_toolbar.scss
- Size: 615 Bytes

- Handle: @toolbar
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/04-molecules/toolbar/toolbar.html

No notes defined.