<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>
-
  //- 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, alt=image.alt, media='(min-width: 1280px)', sizes='100vw')
        != include('@image', { image: image.src, alt: image.alt })

  //- 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)

    //- Badge
    if badge
      .content-header__badge
        != include('@badge')

  //- 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')
{
  "text": "Lorem ipsum dolor sit amet, consectetuer adipiscin",
  "kicker": "Übersicht",
  "contentAlign": "left",
  "headlineAlign": "right"
}
  • 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;
      }
    }
    
    .content-header__badge {
      position: absolute;
      right: 1rem;
      top: 0;
      z-index: z('breadcrumb');
    
      .badge {
        transform: rotate(-8deg);
      }
    
      @include mq($from: m) {
        right: 5rem;
      }
    
      @include mq($from: l) {
        right: 10rem;
        top: -4rem;
      }
    }
    
  • URL: /components/raw/content-header/content-header.scss
  • Filesystem Path: src/components/organisms/content-header/content-header.scss
  • Size: 4.7 KB

There are no notes for this item.