Icon Eyecatcher 

<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. */
  • 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:
  • Filesystem Path: components/04-molecules/eyecatcher/icon-eyecatcher/icon-eyecatcher.html

No notes defined.