# Topic Header

Ready

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

`

    <header class="topic-header bg-image-edition-03">
        <div class="topic-header__body">
            <h3 class="topic-header__type">Schwerpunktthema <span class="topic-header__tag">Microservices</span></h3>
            <div>
                <h1 class="topic-header__title bg-image-edition-03">Schwerpunkt-Thema Headline</h1>
            </div>
            <div class="topic-header__text">
                Filet mignon sausage tongue, hamburger porchetta fatback kielbasa flank
                ribeye. Pastrami t-bone pork chop sirloin ham swine cupim brisket
                prosciutto buffalo drumstick strip steak capicola short loin.
                Frankfurter fatback turkey pork chop prosciutto pork ground round tongue
                chuck doner. Pig venison pork chop shoulder corned beef capicola
                meatball.
            </div>
            <span class="icon icon-arrow-long-down icon--brand-secondary"></span>
        </div>
    </header>

`
`

    <header class="topic-header bg-image-edition-03">
        <div class="topic-header__body">
            <h3 class="topic-header__type">Schwerpunktthema <span class="topic-header__tag">Microservices</span></h3>
            <div>
                <h1 class="topic-header__title bg-image-edition-03">Schwerpunkt-Thema Headline</h1>
            </div>
            <div class="topic-header__text">
                Filet mignon sausage tongue, hamburger porchetta fatback kielbasa flank
                ribeye. Pastrami t-bone pork chop sirloin ham swine cupim brisket
                prosciutto buffalo drumstick strip steak capicola short loin.
                Frankfurter fatback turkey pork chop prosciutto pork ground round tongue
                chuck doner. Pig venison pork chop shoulder corned beef capicola
                meatball.
            </div>
            <span class="icon icon-arrow-long-down icon--brand-secondary"></span>
        </div>
    </header>

`
`

    /* No context defined. */

`
File:

- Content:
  `

      $topic-header-outer-padding: $spacer-lg;
      $topic-header-outer-padding-small: $spacer-sm;
      $topic-header-inner-padding: $spacer-lg;
      $topic-header-inner-padding-small: $spacer-md;

      .topic-header {
        @extend %page-header;

        min-height: $fullscreen-like-height;
        padding: $topic-header-outer-padding $topic-header-outer-padding-small;
        background-blend-mode: multiply;

        &__body {
          display: flex;
          flex-direction: column;
          align-items: center;

          max-width: $default-page-layout-content-width-md;
          margin: 0 auto;
          padding: $topic-header-inner-padding-small;

          color: $topic-header-intro-text-color;

          background-color: $topic-header-intro-bg-color;
          background-size: cover;
        }

        &__punch-in {
          @extend %punch-in;
        }

        &__title {
          @extend %punch-in;

          margin-bottom: $spacer-xs;
          padding-bottom: $spacer-base;

          font-size: $font-size-xxl;
          line-height: $heading-line-height-sm;
          text-align: center;

          &--ultra {
            @extend %heading-font-ultra;
          }
        }

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

          margin-bottom: $spacer-xs;

          font-size: $font-size-base;
          color: $topic-header-intro-text-color;
          text-align: center;
          text-transform: uppercase;
        }

        &__tag {
          @extend %heading-font-regular;
        }

        &__text {
          @extend %body-font-italic;

          max-width: 100%; // This fixes IE11 Flexbox rendering issues.
          margin-bottom: $spacer-base;
          padding-right: $topic-header-inner-padding-small;
          padding-left: $topic-header-inner-padding-small;

          font-size: $font-size-sm;
          line-height: $paragraph-line-height;
          text-align: center;
        }
      }

      //
      // Media Queries
      //

      @media screen and (min-width: $grid-breakpoint-md) {
        .topic-header {
          padding: $topic-header-outer-padding;
        }

        .topic-header__body {
          padding: $topic-header-inner-padding;
        }

        .topic-header__title {
          font-size: $font-size-3xl;
        }

        .topic-header__subtitle {
          font-size: $font-size-lg;
        }

        .topic-header__text {
          font-size: $font-size-lg;
        }
      }

      // This fixes IE11 Flexbox rendering issues.
      @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
        .topic-header__body {
          max-width: 100%;
        }
      }

  `
- URL: /components/raw/topic-header/_topic-header.scss
- Filesystem Path: components/03-organisms/header/topic-header/_topic-header.scss
- Size: 2.2 KB

- Handle: @topic-header
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/03-organisms/header/topic-header/topic-header.html

No notes defined.