<div>
    <header class="topic-header topic-header-bg-image-girl">
        <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 topic-header-bg-image-text-box-girl">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>
            <img src="../../assets/arrow-long-down.svg">
        </div>
    </header>
    <header class="topic-header topic-header-bg-image-ice">
        <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 topic-header-bg-image-text-box-ice">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>
            <img src="../../assets/arrow-long-down.svg">
        </div>
    </header>
    <header class="topic-header topic-header-bg-image-medusa">
        <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 topic-header-bg-image-text-box-medusa">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>
            <img src="../../assets/arrow-long-down.svg">
        </div>
    </header>
    <header class="topic-header topic-header-bg-image-igel">
        <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 topic-header-bg-image-text-box-igel">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>
            <img src="../../assets/arrow-long-down.svg">
        </div>
    </header>
    <header class="topic-header topic-header-bg-image-koralle">
        <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 topic-header-bg-image-text-box-koralle">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>
            <img src="../../assets/arrow-long-down.svg">
        </div>
    </header>
</div>
<div>
    <header class="topic-header topic-header-bg-image-girl">
        <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 topic-header-bg-image-text-box-girl">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>
            <img src={context.app.uri('assets/arrow-long-down.svg')} />
        </div>
    </header>

    <header class="topic-header topic-header-bg-image-ice">
        <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 topic-header-bg-image-text-box-ice">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>
            <img src={context.app.uri('assets/arrow-long-down.svg')} />
        </div>
    </header>

    <header class="topic-header topic-header-bg-image-medusa">
        <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 topic-header-bg-image-text-box-medusa">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>
            <img src={context.app.uri('assets/arrow-long-down.svg')} />
        </div>
    </header>

    <header class="topic-header topic-header-bg-image-igel">
        <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 topic-header-bg-image-text-box-igel">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>
            <img src={context.app.uri('assets/arrow-long-down.svg')} />
        </div>
    </header>

    <header class="topic-header topic-header-bg-image-koralle">
        <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 topic-header-bg-image-text-box-koralle">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>
            <img src={context.app.uri('assets/arrow-long-down.svg')} />
        </div>
    </header>
</div>
/* No context defined for this component. */
  • 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;
    
      padding: $topic-header-outer-padding $topic-header-outer-padding-small;
      min-height: $fullscreen-like-height;
    
      &__body {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 auto;
        background-color: $topic-header-intro-bg-color;
        background-size: cover;
        padding: $topic-header-inner-padding-small;
        max-width: $default-page-layout-content-width-md;
        color: $topic-header-intro-text-color;
      }
    
      &__punch-in {
        @extend %punch-in;
      }
    
      &__title {
        @extend %punch-in;
    
        margin-bottom: $spacer-xs;
        padding-bottom: $spacer-base;
        text-align: center;
        line-height: $standard-header-title-line-height-small;
        font-size: $standard-header-title-font-size-small;
      }
    
      &__type {
        @extend %heading-font-bold;
    
        margin-bottom: $spacer-xs;
        text-align: center;
        text-transform: uppercase;
        line-height: $standard-header-type-line-height-small;
        font-size: $standard-header-type-font-size-small;
      }
    
      &__tag {
        @extend %heading-font-regular;
      }
    
      &__text {
        @extend %body-font-italic;
    
        margin-bottom: $spacer-base;
        padding-right: $topic-header-inner-padding-small;
        padding-left: $topic-header-inner-padding-small;
        max-width: 100%; // This fixes IE11 Flexbox rendering issues.
        text-align: center;
        line-height: $standard-header-intro-line-height-small;
        font-size: $standard-header-intro-font-size-small;
      }
    }
    
    // Background images for topic header
    .topic-header-bg-image-girl {
      background-image: asset-url('visual-header-girl.jpg');
    }
    
    .topic-header-bg-image-text-box-girl {
      @extend %topic-header-bg-image-text-box-girl;
    }
    
    .topic-header-bg-image-medusa {
      background-image: asset-url('visual-header-medusa.jpg');
    }
    
    .topic-header-bg-image-text-box-medusa {
      @extend %topic-header-bg-image-text-box-medusa;
    }
    
    .topic-header-bg-image-ice {
      background-image: asset-url('visual-header-ice.jpg');
    }
    
    .topic-header-bg-image-text-box-ice {
      @extend %topic-header-bg-image-text-box-ice;
    }
    
    .topic-header-bg-image-igel {
      background-image: asset-url('visual-header-igel.jpg');
    }
    
    .topic-header-bg-image-text-box-igel {
      @extend %topic-header-bg-image-text-box-igel;
    }
    
    .topic-header-bg-image-koralle {
      background-image: asset-url('visual-header-koralle.jpg');
    }
    
    .topic-header-bg-image-text-box-koralle {
      @extend %topic-header-bg-image-text-box-koralle;
    }
    
    .topic-header-bg-image-heads {
      background-image: asset-url('visual-header-heads.jpg');
    }
    
    .topic-header-bg-image-text-box-heads {
      @extend %topic-header-bg-image-text-box-heads;
    }
    
    
    //
    // 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 {
        line-height: $standard-header-title-line-height;
        font-size: $standard-header-title-font-size;
      }
    
      .topic-header__subtitle {
        line-height: $standard-header-subtitle-line-height;
        font-size: $standard-header-subtitle-font-size;
      }
    
      .topic-header__type {
        margin-bottom: $spacer-md;
        line-height: $standard-header-type-line-height;
        font-size: $standard-header-type-font-size;
      }
    
      .topic-header__text {
        line-height: $standard-header-intro-line-height;
        font-size: $standard-header-intro-font-size;
      }
    }
    
    // This fixes IE11 Flexbox rendering issues.
    // sass-lint:disable no-vendor-prefixes
    @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/02-molecules/visual-elements/header/topic-header/_topic-header.scss
  • Size: 3.8 KB
  • Handle: @topic-header
  • Preview:
  • Filesystem Path: components/02-molecules/visual-elements/header/topic-header/topic-header.html

There are no notes for this item.