<header class="gradient-header">
    <div class="gradient-header__body">
        <h3 class="gradient-header__type">INNOQ Story</h3>
        <h3 class="gradient-header__author">Mika Majoran</h3>
        <h1 class="gradient-header__title">Das Ziel war im Weg.</h1>
        <img class="gradient-header__img" src="../../assets/bg-images/edition-02/edition02-canyon-01.webp" alt="Bild mit Umrandung" />
    </div>
</header>
<header class="gradient-header">
    <div class="gradient-header__body">
        <h3 class="gradient-header__type">INNOQ Story</h3>
        <h3 class="gradient-header__author">Mika Majoran</h3>
        <h1 class="gradient-header__title">Das Ziel war im Weg.</h1>
        <img class="gradient-header__img" src="{{ path '/assets/bg-images/edition-02/edition02-canyon-01.webp'}}" alt="Bild mit Umrandung" />
    </div>
</header>
/* No context defined. */
  • Content:
    .gradient-header {
      background: $gradient-2;
    
      &__body {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    
        max-width: 64rem; //magic number
        margin: 0 auto;
        padding: $spacer-base $spacer-sm;
    
        color: $gradient-header-text-color;
      }
    
      &__type {
        @extend %heading-font-bold;
    
        margin-bottom: $spacer-xs;
        font-size: $font-size-xs;
        text-align: center;
        text-transform: uppercase;
      }
    
      &__author {
        @extend %body-font-regular;
    
        margin-bottom: $spacer-lg;
        font-size: $font-size-xs;
        text-align: center;
      }
    
      &__title {
        @extend %body-font-italic;
    
        max-width: 60rem;
        margin-bottom: $spacer-lg;
        font-size: $font-size-xl;
        text-align: center;
      }
    
      &__img {
        @extend %box-shadow-primary-25-right-bottom;
      }
    }
    
    @media screen and (min-width: $grid-breakpoint-md) {
      .gradient-header__type {
        font-size: $font-size-base;
      }
    
      .gradient-header__author {
        font-size: $font-size-base;
      }
    
      .gradient-header__title {
        font-size: $font-size-xxl;
      }
    }
    
  • URL: /components/raw/gradient-header/_gradient-header.scss
  • Filesystem Path: components/03-organisms/header/gradient-header/_gradient-header.scss
  • Size: 1.1 KB
  • Handle: @gradient-header
  • Preview:
  • Filesystem Path: components/03-organisms/header/gradient-header/gradient-header.html

No notes defined.