# Superhero

Ready

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

`

    <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. */

`
File:

- 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

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

No notes defined.