hkk Frontend 2017

Content-Header 

<!-- 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>
    <button class="copyright js-tooltip content-header__copyright" title="Lorem ipsum dolor sit amet, consectetuer adipiscin" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-3775" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-copyright"></use>
</svg>
</button>
</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>
    <button class="copyright js-tooltip content-header__copyright" title="Lorem ipsum dolor sit amet, consectetuer adipiscin" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-c947" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-copyright"></use>
</svg>
</button>
</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" />
            <div class="image-wrap"><img class="image" src="/images/dummy/dummy-content-stage-3.jpg" />
                <button class="copyright js-tooltip image__copyright" title="Das ist ein recht langer Copyright-Hinweis die über mehrere Zeilen laufen kann" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-19e9" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-copyright"></use>
</svg>
</button>
            </div>
        </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>
    <button class="copyright js-tooltip content-header__copyright" title="Lorem ipsum dolor sit amet, consectetuer adipiscin" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-e279" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-copyright"></use>
</svg>
</button>
</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" />
            <div class="image-wrap"><img class="image" src="/images/dummy/dummy-content-stage-2.jpg" />
                <button class="copyright js-tooltip image__copyright" title="Das ist ein recht langer Copyright-Hinweis die über mehrere Zeilen laufen kann" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-56a2" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-copyright"></use>
</svg>
</button>
            </div>
        </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 class="content-header__badge">
                <div class="badge">
                    <p class="badge__text">Bis zu<br/><span class="badge__text--large">351 €</span><br/>Beitragsvorteil<br/>jährlich<br/>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <button class="copyright js-tooltip content-header__copyright" title="Lorem ipsum dolor sit amet, consectetuer adipiscin" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-3c83" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-copyright"></use>
</svg>
</button>
</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" />
            <div class="image-wrap"><img class="image" src="/images/dummy/dummy-content-stage-1.jpg" />
                <button class="copyright js-tooltip image__copyright" title="Das ist ein recht langer Copyright-Hinweis die über mehrere Zeilen laufen kann" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-47d5" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-copyright"></use>
</svg>
</button>
            </div>
        </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>
    <button class="copyright js-tooltip content-header__copyright" title="Lorem ipsum dolor sit amet, consectetuer adipiscin" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-b17a" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-copyright"></use>
</svg>
</button>
</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" />
            <div class="image-wrap"><img class="image" src="/images/dummy/dummy-content-stage-2.jpg" />
                <button class="copyright js-tooltip image__copyright" title="Das ist ein recht langer Copyright-Hinweis die über mehrere Zeilen laufen kann" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-869c" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-copyright"></use>
</svg>
</button>
            </div>
        </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-9a4c" 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>
    <button class="copyright js-tooltip content-header__copyright" title="Lorem ipsum dolor sit amet, consectetuer adipiscin" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-4088" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-copyright"></use>
</svg>
</button>
</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" />
            <div class="image-wrap"><img class="image" src="/images/dummy/dummy-content-stage-3.jpg" />
                <button class="copyright js-tooltip image__copyright" title="Das ist ein recht langer Copyright-Hinweis die über mehrere Zeilen laufen kann" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-33f4" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-copyright"></use>
</svg>
</button>
            </div>
        </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>
    <button class="copyright js-tooltip content-header__copyright" title="Lorem ipsum dolor sit amet, consectetuer adipiscin" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-0bb8" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-copyright"></use>
</svg>
</button>
</div>


<!-- With Badge -->
<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 class="content-header__badge">
                <div class="badge">
                    <p class="badge__text">Bis zu<br/><span class="badge__text--large">351 €</span><br/>Beitragsvorteil<br/>jährlich<br/>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <button class="copyright js-tooltip content-header__copyright" title="Lorem ipsum dolor sit amet, consectetuer adipiscin" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-4657" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-copyright"></use>
</svg>
</button>
</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" />
            <div class="image-wrap"><img class="image" src="/images/dummy/dummy-content-stage-1.jpg" />
                <button class="copyright js-tooltip image__copyright" title="Das ist ein recht langer Copyright-Hinweis die über mehrere Zeilen laufen kann" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-c3f3" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-copyright"></use>
</svg>
</button>
            </div>
        </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-a707" 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>
    <button class="copyright js-tooltip content-header__copyright" title="Lorem ipsum dolor sit amet, consectetuer adipiscin" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-de58" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-copyright"></use>
</svg>
</button>
</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')
  
  //- Copyright
  if copyright
    != include('@copyright', {title: copyright, attr: {class: 'content-header__copyright'}})
 
/* Default */
{
  "text": "Lorem ipsum dolor sit amet, consectetuer adipiscin",
  "kicker": "Übersicht",
  "contentAlign": "left",
  "copyright": "Lorem ipsum dolor sit amet, consectetuer adipiscin"
}


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


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


/* Small */
{
  "text": "Unsere Themen im Überblick",
  "kicker": "Übersicht",
  "contentAlign": "left",
  "copyright": "Lorem ipsum dolor sit amet, consectetuer adipiscin",
  "image": {
    "src": "/images/dummy/dummy-content-stage-2.jpg",
    "srcWide": "/images/dummy/dummy-content-stage-2.wide.jpg"
  },
  "small": true,
  "badge": true
}


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


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


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


/* With Badge */
{
  "text": "Lorem ipsum dolor sit amet, consectetuer adipiscin",
  "kicker": "Übersicht",
  "contentAlign": "left",
  "copyright": "Lorem ipsum dolor sit amet, consectetuer adipiscin",
  "badge": true
}


/* Centered */
{
  "text": "Lorem ipsum dolor sit amet, consectetuer adipiscin",
  "kicker": null,
  "contentAlign": "left",
  "copyright": "Lorem ipsum dolor sit amet, consectetuer adipiscin",
  "centered": true,
  "link": "http://www.example.com",
  "image": {
    "src": "/images/dummy/dummy-content-stage-1.jpg",
    "srcWide": "/images/dummy/dummy-content-stage-1.jpg",
    "alt": null
  }
}
  • 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;
  }
}

.content-header__copyright {
  bottom: 0;
  position: absolute;
  right: 0;
}
  • URL: /components/raw/content-header/content-header.scss
  • Filesystem Path: src/components/organisms/content-header/content-header.scss
  • Size: 4.8 KB

There are no notes for this item.