# Eyecatcher Banner

Ready

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

`

    <div class="eyecatcher eyecatcher--event">
        <p class="eyecatcher--event__text">
            INNOQ Technology Lunch: Software Architecture for Agile Enterprises 👉
            <a href="#" class="eyecatcher--event__link">20. Mai, 12:15 Uhr</a>
        </p>
    </div>

`
`

    <div class="eyecatcher eyecatcher--event">
        <p class="eyecatcher--event__text">
            INNOQ Technology Lunch: Software Architecture for Agile Enterprises 👉
            <a href="#" class="eyecatcher--event__link">20. Mai, 12:15 Uhr</a>
        </p>
    </div>

`
`

    /* No context defined. */

`
File:

- Content:
  `

      .eyecatcher {
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        padding: $spacer-md;

        text-align: center;

        &--event {
          color: $eyecatcher-text-color;
          background-color: $eyecatcher-body-bg;
        }

        &--event__text {
          @extend %heading-font-bold;

          margin-bottom: 0;
          font-size: $font-size-base;
        }

        &--event__link {
          color: $eyecatcher-text-color;
          border: 0;

          &:hover,
          &focus {
            color: $eyecatcher-color-inverted;
          }
        }

        &--social {
          color: $eyecatcher-text-color;
          background-color: $eyecatcher-body-bg;

          .social-media-bar {
            margin-bottom: 0;
            font-size: $font-size-xl;
            color: $eyecatcher-color-inverted;
          }

          .social-media-bar__link {
            transition: standard-transition(color);

            .icon:hover,
            .icon:focus {
              background: $eyecatcher-text-color;
            }
          }
        }

        &--social__text {
          @extend %heading-font-bold;

          margin-bottom: $spacer-md;
          font-size: $font-size-base;
        }
      }

  `
- URL: /components/raw/eyecatcher-banner/_eyecatcher-banner.scss
- Filesystem Path: components/04-molecules/eyecatcher/eyecatcher-banner/_eyecatcher-banner.scss
- Size: 1.1 KB

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

No notes defined.