<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="http://via.placeholder.com/800x600" 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="http://via.placeholder.com/800x600" alt="Bild mit Umrandung" />
    </div>
</header>
/* No context defined. */
  • Content:
    .gradient-header {
      background: linear-gradient(180deg, $gradient-header-background-color 0%, rgba(255, 230, 217, 0) 100%);
    
      &__body {
        display: flex;
        max-width: 64rem; //magic number
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: $spacer-base $spacer-sm;
        margin: 0 auto;
        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.2 KB
  • Handle: @gradient-header
  • Preview:
  • Filesystem Path: components/03-organisms/header/gradient-header/gradient-header.html

No notes defined.