# Gradient Header

Ready

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

`

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

`
File:

- 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:
  - With layout
  - Component only
- Filesystem Path: components/03-organisms/header/gradient-header/gradient-header.html

No notes defined.