Superhero 

<div class="superhero">
    <h1 class="superhero__lead">Success Stories</h1>
    <p class="superhero__title">Nicht einfach nur Dinge bauen, sondern <span class="superhero__highlight">Mehrwert</span> schaffen.</p>
</div>
 
<div class="superhero">
    <h1 class="superhero__lead">Success Stories</h1>
    <p class="superhero__title">Nicht einfach nur Dinge bauen, sondern <span class="superhero__highlight">Mehrwert</span> schaffen.</p>
</div>
 
/* No context defined. */
  • Content: 
    .superhero {
  color: $h1-color;
  text-align: center;

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

    margin-bottom: $spacer-md;
    font-size: $font-size-sm;
    text-transform: uppercase;
  }

  &__title {
    @extend %heading-font-heavy;

    font-size: $font-size-xl;
    line-height: $heading-line-height;
  }

  &__highlight {
    color: $brand-apricot;
  }
}

@media screen and (min-width: $grid-breakpoint-md) {
  .superhero__lead {
    font-size: $font-size-md;
  }

  .superhero__title {
    font-size: $font-size-2xl;
  }
}

@media screen and (min-width: $grid-breakpoint-lg) {
  .superhero__lead {
    font-size: $font-size-lg;
  }

  .superhero__title {
    font-size: $font-size-3xl;
  }
}
  • URL: /components/raw/superhero/_superhero.scss
  • Filesystem Path: components/04-molecules/superhero/_superhero.scss
  • Size: 707 Bytes

No notes defined.