<div class="eyecatcher">
    <p class="eyecatcher__text">Finden können Sie uns auch auf</p>
    <ul class="social-media-bar">
        <li class="social-media-bar__item"><a href="#" class="social-media-bar__link"><i class="social-media-bar__icon icon icon-twitter"></i></a>
        </li>
        <li class="social-media-bar__item"><a href="#" class="social-media-bar__link"><i class="social-media-bar__icon icon icon-facebook"></i></a>
        </li>
        <li class="social-media-bar__item"><a href="#" class="social-media-bar__link"><i class="social-media-bar__icon icon icon-linkedin"></i></a>
        </li>
        <li class="social-media-bar__item"><a href="#" class="social-media-bar__link"><i class="social-media-bar__icon icon icon-xing"></i></a>
        </li>
    </ul>
</div>
<div class="eyecatcher">
    <p class="eyecatcher__text">Finden können Sie uns auch auf</p>
    <ul class="social-media-bar">
        <li class="social-media-bar__item">
            <a href="#" class="social-media-bar__link">
                <i class="social-media-bar__icon icon icon-twitter"></i>
            </a>
        </li>
        <li class="social-media-bar__item">
            <a href="#" class="social-media-bar__link">
                <i class="social-media-bar__icon icon icon-facebook"></i>
            </a>
        </li>
        <li class="social-media-bar__item">
            <a href="#" class="social-media-bar__link">
                <i class="social-media-bar__icon icon icon-linkedin"></i>
            </a>
        </li>
        <li class="social-media-bar__item">
            <a href="#" class="social-media-bar__link">
                <i class="social-media-bar__icon icon icon-xing"></i>
            </a>
        </li>
    </ul>
</div>
/* No context defined for this component. */
  • Content:
    .eyecatcher {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: $eyecatcher-body-bg;
      padding: $spacer-md;
      overflow: hidden;
      text-align: center;
      color: $eyecatcher-color;
    
      .social-media-bar {
        margin-bottom: 0;
        color: $eyecatcher-color-inverted;
        font-size: $eyecatcher-font-size-large;
      }
    
      .social-media-bar__link {
        transition: standard-transition(color);
    
        &:hover,
        &:focus {
          color: $eyecatcher-color;
        }
      }
    }
    
    .eyecatcher__text {
      @extend %heading-font-bold;
      margin-bottom: $spacer-md;
      font-size: $eyecatcher-font-size;
    }
    
  • URL: /components/raw/eyecatcher/_eyecatcher.scss
  • Filesystem Path: components/02-molecules/eyecatcher/_eyecatcher.scss
  • Size: 636 Bytes

There are no notes for this item.