<!-- Default -->
<div class="content-header content-header--text-left">
    <div class="content-header__inner">
        <div class="content-header__content">
            <h1 class="headline content-header__headline headline--display-1"><span class="headline__kicker"><span class="headline__kicker-text">Übersicht<span class="u-hidden-visually">: </span></span>
                </span>Lorem ipsum dolor sit amet, consectetuer adipiscin
            </h1>
        </div>
    </div>
</div>

<!-- Right -->
<div class="content-header content-header--text-left">
    <div class="content-header__inner">
        <div class="content-header__content">
            <h1 class="headline content-header__headline content-header__headline--right headline--display-1"><span class="headline__kicker"><span class="headline__kicker-text">Übersicht<span class="u-hidden-visually">: </span></span>
                </span>Lorem ipsum dolor sit amet, consectetuer adipiscin
            </h1>
        </div>
    </div>
</div>

<!-- Landing -->
<div class="content-header content-header--small content-header--text-left content-header--image">
    <div class="content-header__image-bg" style="background-image:url('/images/dummy/dummy-content-stage-3.wide.jpg');"></div>
    <div class="content-header__image">
        <picture>
            <source srcset="/images/dummy/dummy-content-stage-3.wide.jpg" media="(min-width: 1280px)" sizes="100vw" /><img class="image" alt="Alt Text sieht anders aus" src="/images/dummy/dummy-content-stage-3.jpg" />
        </picture>
    </div>
    <div class="content-header__inner">
        <div class="content-header__content">
            <h1 class="headline content-header__headline headline--display-1">Bis zu 579 € sparen: Deutschlands günstige Krankenkasse
            </h1>
        </div>
    </div>
    <div class="content-header__logo content-header__logo--right">
        <a class="logo" href="#" title="hkk Krankenkasse"><img class="logo__image" src="../../../../../images/logo.svg" alt="Logo der hkk Krankenkasse" /></a>
    </div>
</div>

<!-- Small -->
<div class="content-header content-header--small content-header--text-left content-header--image">
    <div class="content-header__image-bg" style="background-image:url('/images/dummy/dummy-content-stage-2.wide.jpg');"></div>
    <div class="content-header__image">
        <picture>
            <source srcset="/images/dummy/dummy-content-stage-2.wide.jpg" media="(min-width: 1280px)" sizes="100vw" /><img class="image" alt="Alt Text sieht anders aus" src="/images/dummy/dummy-content-stage-2.jpg" />
        </picture>
    </div>
    <div class="content-header__inner">
        <div class="content-header__content">
            <h1 class="headline content-header__headline headline--display-1"><span class="headline__kicker"><span class="headline__kicker-text">Übersicht<span class="u-hidden-visually">: </span></span>
                </span>Unsere Themen im Überblick
            </h1>
        </div>
    </div>
</div>

<!-- With Image -->
<div class="content-header content-header--text-left content-header--image">
    <div class="content-header__image-bg" style="background-image:url('/images/dummy/dummy-content-stage-1.wide.jpg');"></div>
    <div class="content-header__image">
        <picture>
            <source srcset="/images/dummy/dummy-content-stage-1.wide.jpg" media="(min-width: 1280px)" sizes="100vw" /><img class="image" alt="Alt Text sieht anders aus" src="/images/dummy/dummy-content-stage-1.jpg" />
        </picture>
    </div>
    <div class="content-header__inner">
        <div class="content-header__content">
            <h1 class="headline content-header__headline headline--display-1"><span class="headline__kicker"><span class="headline__kicker-text">Übersicht<span class="u-hidden-visually">: </span></span>
                </span>Lorem ipsum dolor sit amet, consectetuer adipiscin
            </h1>
        </div>
    </div>
</div>

<!-- With Link -->
<div class="content-header content-header--text-left content-header--image">
    <div class="content-header__image-bg" style="background-image:url('/images/dummy/dummy-content-stage-2.wide.jpg');"></div>
    <div class="content-header__image">
        <picture>
            <source srcset="/images/dummy/dummy-content-stage-2.wide.jpg" media="(min-width: 1280px)" sizes="100vw" /><img class="image" alt="Alt Text sieht anders aus" src="/images/dummy/dummy-content-stage-2.jpg" />
        </picture>
    </div>
    <div class="content-header__inner">
        <div class="content-header__content">
            <h1 class="headline content-header__headline headline--display-1"><span class="headline__kicker"><span class="headline__kicker-text">Übersicht<span class="u-hidden-visually">: </span></span>
                </span>Lorem ipsum dolor sit amet, consectetuer adipiscin
            </h1>
            <div class="content-header__more"><a class="teaser-link" href="http://www.example.com"><span class="teaser-link__inner">Mehr erfahren</span>
<svg class="icon icon--arrow-right" id="icon-dea9" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
            </div>
        </div>
    </div>
    <a class="teaser__overlay-link" href="http://www.example.com" tabindex="-1" aria-hidden="true"></a>
</div>

<!-- With Logos -->
<div class="content-header content-header--small content-header--text-right content-header--image">
    <div class="content-header__image-bg" style="background-image:url('/images/dummy/dummy-content-stage-3.wide.jpg');"></div>
    <div class="content-header__image">
        <picture>
            <source srcset="/images/dummy/dummy-content-stage-3.wide.jpg" media="(min-width: 1280px)" sizes="100vw" /><img class="image" alt="Alt Text sieht anders aus" src="/images/dummy/dummy-content-stage-3.jpg" />
        </picture>
    </div>
    <div class="content-header__inner">
        <div class="content-header__content">
            <div class="content-header__infobox">
                <h3 class="headline content-header__infobox-title headline--display-2">Willkommen bei der günstigsten Krankenkasse deutschlandweit
                </h3>
                <div class="content-header__infobox-logos"><img class="content-header__infobox-logo" src="/images/dummy/dummy-certificate-1.jpg" /><img class="content-header__infobox-logo" src="/images/dummy/dummy-certificate-2.jpg" />
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Centered -->
<div class="content-header content-header--centered content-header--text-left content-header--image">
    <div class="content-header__image-bg" style="background-image:url('/images/dummy/dummy-content-stage-1.jpg');"></div>
    <div class="content-header__image">
        <picture>
            <source srcset="/images/dummy/dummy-content-stage-1.jpg" media="(min-width: 1280px)" sizes="100vw" /><img class="image" alt="Alt Text sieht anders aus" src="/images/dummy/dummy-content-stage-1.jpg" />
        </picture>
    </div>
    <div class="content-header__inner">
        <div class="content-header__content">
            <h1 class="headline content-header__headline headline--display-1">Lorem ipsum dolor sit amet, consectetuer adipiscin
            </h1>
            <div class="content-header__more"><a class="teaser-link" href="http://www.example.com"><span class="teaser-link__inner">Mehr erfahren</span>
<svg class="icon icon--arrow-right" id="icon-e7a6" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
            </div>
        </div>
    </div>
    <a class="teaser__overlay-link" href="http://www.example.com" tabindex="-1" aria-hidden="true"></a>
</div>

-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);

  // Centered content
  if (centered) attr.class.push('content-header--centered');

  // Small variant
  if (small) attr.class.push('content-header--small');

  // Text align
  if (contentAlign) attr.class.push(`content-header--text-${contentAlign}`);

  // Text align
  if (image) attr.class.push(`content-header--image`);

//- Render content header
.content-header&attributes(attr)
  //- Image
  if image
    .content-header__image-bg(style=`background-image:url('${image.srcWide}')`)
    .content-header__image
      picture
        source(srcset=image.srcWide, media='(min-width: 1280px)', sizes='100vw')
        != include('@image', { image: image.src })

  //- Inner with headline
  .content-header__inner: .content-header__content
    if text
      -
        //- Headline attributes
        headlineAttr = {};
        headlineAttr.class = ['content-header__headline'];

        // Align
        if (headlineAlign) headlineAttr.class.push(`content-header__headline--${headlineAlign}`);

      != include('@headline--display-1', { text, kicker, attr: headlineAttr })

    //- More link
    if link
      .content-header__more
        != include('@teaser-link', { link, text: linkText || 'Mehr erfahren' })

    //- Infobox
    if infobox
      .content-header__infobox
        != include('@headline--display-2', { text: infobox.title, level: 3, attr: { class: 'content-header__infobox-title' } })

        if infobox.logos
          .content-header__infobox-logos
            each logo in infobox.logos
              img.content-header__infobox-logo(src=logo)

  //- Logo
  if logo
    -
      //- Headline attributes
      logoAttr = {};
      logoAttr.class = [];

      // Align
      if (logoAlign) logoAttr.class.push(`content-header__logo--${logoAlign}`);

    .content-header__logo&attributes(logoAttr)
      != include('@logo')

  //- Faux link
  if link
    a.teaser__overlay-link(href=link, tabindex='-1', aria-hidden='true')
/* Default */
{
  "text": "Lorem ipsum dolor sit amet, consectetuer adipiscin",
  "kicker": "Übersicht",
  "contentAlign": "left"
}

/* Right */
{
  "text": "Lorem ipsum dolor sit amet, consectetuer adipiscin",
  "kicker": "Übersicht",
  "contentAlign": "left",
  "headlineAlign": "right"
}

/* Landing */
{
  "text": "Bis zu 579 € sparen: Deutschlands günstige Krankenkasse",
  "kicker": null,
  "contentAlign": "left",
  "image": {
    "src": "/images/dummy/dummy-content-stage-3.jpg",
    "srcWide": "/images/dummy/dummy-content-stage-3.wide.jpg"
  },
  "logoAlign": "right",
  "logo": true,
  "small": true
}

/* Small */
{
  "text": "Unsere Themen im Überblick",
  "kicker": "Übersicht",
  "contentAlign": "left",
  "image": {
    "src": "/images/dummy/dummy-content-stage-2.jpg",
    "srcWide": "/images/dummy/dummy-content-stage-2.wide.jpg"
  },
  "small": true
}

/* With Image */
{
  "text": "Lorem ipsum dolor sit amet, consectetuer adipiscin",
  "kicker": "Übersicht",
  "contentAlign": "left",
  "image": {
    "src": "/images/dummy/dummy-content-stage-1.jpg",
    "srcWide": "/images/dummy/dummy-content-stage-1.wide.jpg"
  }
}

/* With Link */
{
  "text": "Lorem ipsum dolor sit amet, consectetuer adipiscin",
  "kicker": "Übersicht",
  "contentAlign": "left",
  "link": "http://www.example.com",
  "image": {
    "src": "/images/dummy/dummy-content-stage-2.jpg",
    "srcWide": "/images/dummy/dummy-content-stage-2.wide.jpg"
  }
}

/* With Logos */
{
  "text": null,
  "kicker": null,
  "contentAlign": "right",
  "small": true,
  "image": {
    "src": "/images/dummy/dummy-content-stage-3.jpg",
    "srcWide": "/images/dummy/dummy-content-stage-3.wide.jpg"
  },
  "infobox": {
    "title": "Willkommen bei der günstigsten Krankenkasse deutschlandweit",
    "logos": [
      "/images/dummy/dummy-certificate-1.jpg",
      "/images/dummy/dummy-certificate-2.jpg"
    ]
  }
}

/* Centered */
{
  "text": "Lorem ipsum dolor sit amet, consectetuer adipiscin",
  "kicker": null,
  "contentAlign": "left",
  "centered": true,
  "link": "http://www.example.com",
  "image": {
    "src": "/images/dummy/dummy-content-stage-1.jpg",
    "srcWide": "/images/dummy/dummy-content-stage-1.jpg"
  }
}

  • Content:
    $content-header-logo-position-from-xxl: calc((100vw - #{$page-inner-max-width}) / 2);
    $content-header-logo-position-from-page-max: ($page-max-width - $page-inner-max-width) / 2;
    
    .content-header {
      background-image: url('../images/default-page-background.jpg');
      background-position: top center;
      background-repeat: no-repeat;
      background-size: cover;
      height: 19.2rem;
      overflow: hidden;
      position: relative;
    
      // HiDPI / retina
      @include mq($and: $hidpi) {
        background-image: url('../images/default-page-background@2x.jpg');
      }
    
      @include mq($from: 320px) {
        height: 60vw;
      }
    
      @include mq($from: m) {
        height: 48rem;
      }
    
      &--image {
        background-image: none;
      }
    }
    
    .content-header__image-bg {
      background-color: #fff;
      background-position: 100% center;
      background-repeat: no-repeat;
      background-size: cover;
      content: '';
      filter: blur(3rem);
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
    }
    
    .content-header--small {
      height: 20rem;
    
      @include mq($from: m) {
        height: 35rem;
      }
    }
    
    .content-header--centered {
      .content-header__inner {
        top: 50%;
        transform: translateY(-50%) translateY(-1rem);
    
        @include mq($from: m) {
          transform: translateY(-50%) translateY(-4rem);
        }
      }
    }
    
    .content-header--text-left {
      .content-header__image {
        right: 20%;
    
        @include mq($from: l) {
          right: 0;
        }
      }
    }
    
    .content-header--text-right {
      .content-header__image {
        left: 20%;
    
        @include mq($from: l) {
          left: 0;
        }
      }
    }
    
    .content-header__image {
      margin-left: -50%;
      margin-right: -50%;
      position: relative;
    
      @include mq($from: m) {
        margin-left: 50%;
        margin-right: 50%;
        transform: translate(-50%, 0);
        width: $page-inner-max-width;
      }
    
      @include mq($from: xxl) {
        margin-left: 50%;
        margin-right: 0;
        transform: translateX(-50%);
        width: $page-max-width;
      }
    }
    
    .content-header__inner {
      left: 1rem;
      position: absolute;
      right: 1rem;
      top: 3rem;
    
      @include mq($from: m) {
        top: 7rem;
      }
    }
    
    .content-header__content {
      @include make-container();
    }
    
    .content-header__headline {
      font-size: 2.3rem;
    }
    
    .content-header__headline--right {
      float: right;
      text-align: right;
    }
    
    .content-header__more {
      position: relative;
      z-index: 2;
    
      @include mq($from: m) {
        .teaser-link {
          font-size: 2.3rem;
        }
      }
    }
    
    .content-header__logo {
      background-color: #fff;
      left: 0;
      padding: 1.5rem 2rem;
      position: absolute;
      top: 0;
      width: 12rem;
    
      .logo__image {
        width: 100%;
      }
    
      @include mq($from: m) {
        padding: 2rem 3rem;
        width: 16rem;
      }
    
      @include mq($from: xxl) {
        left: $content-header-logo-position-from-xxl;
      }
    
      @include mq($from: page-max) {
        left: $content-header-logo-position-from-page-max;
      }
    }
    
    .content-header__logo--right {
      left: auto;
      right: 0;
    
      @include mq($from: xxl) {
        right: $content-header-logo-position-from-xxl;
      }
    
      @include mq($from: page-max) {
        right: $content-header-logo-position-from-page-max;
      }
    }
    
    .content-header__more,
    .content-header__headline {
      max-width: 70%;
    
      @include mq($until: 500px) {
        font-size: calc(5vw);
      }
    
      @include mq($from: 500px) {
        font-size: calc(5vw);
        max-width: 65%;
        padding-left: 1.5rem;
      }
    
      @include mq($from: 800px) {
        max-width: 60%;
      }
    
      @include mq($from: l) {
        font-size: calc(4.2vw);
        padding-left: 3rem;
      }
    
      @include mq($from: xl) {
        font-size: 5rem;
        padding-left: 4rem;
      }
    }
    
    .content-header__headline--right {
      @include mq($from: 500px) {
        padding-left: 0;
        padding-right: 1.5rem;
      }
    
      @include mq($from: l) {
        padding-left: 0;
        padding-right: 3rem;
      }
    
      @include mq($from: xl) {
        padding-left: 0;
        padding-right: 4rem;
      }
    }
    
    .content-header__infobox {
      display: flex;
      flex-wrap: wrap;
    
      &::after {
        content: '';
        width: 100%;
      }
    }
    
    .content-header__infobox-title {
      font-size: 1.5rem;
      max-width: 65%;
      text-align: right;
    
      @include mq($from: m) {
        font-size: 2.3rem;
      }
    }
    
    .content-header__infobox-logos {
      order: 1;
    }
    
    .content-header__infobox-title,
    .content-header__infobox-logos {
      margin-left: auto;
      padding: 0 1.5rem;
    
      @include mq($from: m) {
        padding: 0 6rem;
      }
    
      @include mq($from: l) {
        padding: 0 8rem;
      }
    }
    
    .content-header__infobox-logo {
      height: 3.5rem;
      margin: 0 0.5rem;
    
      &:last-child {
        margin-right: 0;
      }
    
      @include mq($from: m) {
        height: 6rem;
        margin: 0 1rem;
      }
    }
    
  • URL: /components/raw/content-header/content-header.scss
  • Filesystem Path: src/components/organisms/content-header/content-header.scss
  • Size: 4.5 KB

There are no notes for this item.