# Icon Eyecatcher

Ready

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

`

    <div class="icon-eyecatcher">
        <div class="icon-eyecatcher__cell">
            <span class="icon icon-globe icon--medium icon--brand-primary"></span>
            <p class="standalone">
                ein lustiger Beschreibungstext
            </p>
        </div>
        <div class="icon-eyecatcher__cell">
            <span class="icon icon-support icon--medium icon--brand-primary"></span>
            <p class="standalone">
                ein lustiger Beschreibungstext
            </p>
        </div>
        <div class="icon-eyecatcher__cell">
            <span class="icon icon-group-idea icon--medium icon--brand-primary"></span>
            <p class="standalone">
                ein lustiger Beschreibungstext
            </p>
        </div>
        <div class="icon-eyecatcher__cell">
            <span class="icon icon-interactive icon--medium icon--brand-primary"></span>
            <p class="standalone">
                ein lustiger Beschreibungstext
            </p>
        </div>
    </div>

`
`

    <div class="icon-eyecatcher">
        <div class="icon-eyecatcher__cell">
            <span class="icon icon-globe icon--medium icon--brand-primary"></span>
            <p class="standalone">
                ein lustiger Beschreibungstext
            </p>
        </div>
        <div class="icon-eyecatcher__cell">
            <span class="icon icon-support icon--medium icon--brand-primary"></span>
            <p class="standalone">
                ein lustiger Beschreibungstext
            </p>
        </div>
        <div class="icon-eyecatcher__cell">
            <span class="icon icon-group-idea icon--medium icon--brand-primary"></span>
            <p class="standalone">
                ein lustiger Beschreibungstext
            </p>
        </div>
        <div class="icon-eyecatcher__cell">
            <span class="icon icon-interactive icon--medium icon--brand-primary"></span>
            <p class="standalone">
                ein lustiger Beschreibungstext
            </p>
        </div>
    </div>

`
`

    /* No context defined. */

`
File:

- Content:
  `

      .icon-eyecatcher {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: center;

        &__cell {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          max-width: 12.5rem;
          margin-bottom: $spacer-lg;

          text-align: center;

          .icon {
            margin-bottom: $spacer-sm;
          }
        }
      }

  `
- URL: /components/raw/icon-eyecatcher/_icon-eyecatcher.scss
- Filesystem Path: components/04-molecules/eyecatcher/icon-eyecatcher/_icon-eyecatcher.scss
- Size: 362 Bytes

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

No notes defined.