<!-- 50 25 25 -->
<section class="grid grid--50-25-25">
<header class="grid__header">
<h2 class="headline headline--kicker">Gut zu wissen
</h2>
</header>
<div class="grid__inner">
<div class="grid__column">
<div class="teaser teaser--image">
<div class="teaser__image">
<div class="image-wrap"><img class="image" alt="" src="/images/dummy/50-25-25.jpg" />
<button class="copyright js-tooltip image__copyright" title="Lorem ipsum dolor sit amet, consectetuer adipiscin" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-010a" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-copyright"></use>
</svg>
</button>
</div>
</div>
<div class="teaser__inner">
<div class="teaser__headline">
<h3 class="headline headline--headline-1">Erkältung: 7 Tipps zum Schutz
</h3>
</div>
<p class="teaser__text">Erkältungen einfach lindern - oder besser noch gar nicht erst ausbrechen lassen: Das sind die Themen dieser Rubrik.</p>
<div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Erkältung: 7 Tipps zum Schutz"</span></span>
<svg class="icon icon--arrow-right" id="icon-be2b" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></a>
</div>
</div>
<a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
</div>
</div>
<div class="grid__column">
<div class="teaser">
<div class="teaser__inner">
<div class="teaser__headline">
<h3 class="headline headline--headline-1">Alternative Heilmethoden
</h3>
</div>
<p class="teaser__text">Neben den schulmedizinischen Verfahren sind in den letzten Jahrzehnten verstärkt Naturheilverfahren gerfagt.</p>
<div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Alternative Heilmethoden"</span></span>
<svg class="icon icon--arrow-right" id="icon-9278" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></a>
</div>
</div>
<a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
</div>
<div class="teaser">
<div class="teaser__inner">
<div class="teaser__headline">
<h3 class="headline headline--headline-1">Kinder & Gesundheit
</h3>
</div>
<p class="teaser__text">Wie stillt man mit fester Nahrung ab? Was hilft gegen Kinderschnupfen? Was hat Sehschwäche mit Stubenhocken zu tun? Darüber informieren wir Sie hier.</p>
<div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Kinder & Gesundheit"</span></span>
<svg class="icon icon--arrow-right" id="icon-cd81" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></a>
</div>
</div>
<a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
</div>
</div>
<div class="grid__column">
<div class="teaser">
<div class="teaser__inner">
<div class="teaser__headline">
<h3 class="headline headline--headline-1">Zähne
</h3>
</div>
<p class="teaser__text">Erfahren Sie, worauf Sie beim Kauf einer Zahnbürste achten sollten, wie Sie die Angst vor dem Zahnarzt überwinden, wofür Milchzähne gut sind und mehr.</p>
<div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Zähne"</span></span>
<svg class="icon icon--arrow-right" id="icon-84ae" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></a>
</div>
</div>
<a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
</div>
<div class="teaser">
<div class="teaser__inner">
<div class="teaser__headline">
<h3 class="headline headline--headline-1">Allergie
</h3>
</div>
<p class="teaser__text">Viele Menschen leiden an Allergien – Tendenz steigend. Einige sind angeboren, andere entwickeln sich mit den Jahren. Wir haben für Sie Informationen rund um das Thema Allergien zusammengestellt.</p>
<div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Allergie"</span></span>
<svg class="icon icon--arrow-right" id="icon-9505" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></a>
</div>
</div>
<a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
</div>
</div>
</div>
</section>
<!-- 50 25 -->
<section class="grid grid--50-25">
<div class="grid__inner">
<div class="grid__column">
<div class="box box--bordered">
<div class="box__content">
<div class="box__headline">
<h3 class="headline headline--headline-1">Häufige Fragen und Antworten
</h3>
</div>
<ul class="icon-list icon-list--lined icon-list--lined-without-trailing">
<li class="icon-list__item">
<a class="icon-block" href="#">
<svg class="icon icon-block__icon icon--internal-link" id="icon-e76a" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-internal-link"></use>
</svg>Bietet die hkk ein Bonusprogramm?
</a>
</li>
<li class="icon-list__item">
<a class="icon-block" href="#">
<svg class="icon icon-block__icon icon--internal-link" id="icon-04d7" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-internal-link"></use>
</svg>Wer zahlt die professionelle Zahnreinigung?
</a>
</li>
<li class="icon-list__item">
<a class="icon-block" href="#">
<svg class="icon icon-block__icon icon--internal-link" id="icon-92be" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-internal-link"></use>
</svg>Krankmeldung & Krankengeld - was gibt es zu beachten?
</a>
</li>
<li class="icon-list__item">
<a class="icon-block" href="#">
<svg class="icon icon-block__icon icon--internal-link" id="icon-6565" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-internal-link"></use>
</svg>Wie bin ich im Ausland versichert?
</a>
</li>
</ul>
<div class="box__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Alle Fragen und Antworten</span>
<svg class="icon icon--arrow-right" id="icon-e888" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></a>
</div>
</div>
</div>
</div>
<div class="grid__column">
<div class="box box--light-blue">
<div class="box__content">
<div class="box__headline">
<h3 class="headline headline--headline-1">Kontakt
</h3>
</div>
<ul class="icon-list icon-list--lined icon-list--lined-without-trailing">
<li class="icon-list__item">
<a class="icon-block" href="#">
<svg class="icon icon-block__icon icon--online-consulting" id="icon-f2fd" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-online-consulting"></use>
</svg>Online Geschäftsstelle
</a>
</li>
<li class="icon-list__item">
<a class="icon-block" href="#">
<svg class="icon icon-block__icon icon--mail" id="icon-10d8" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-mail"></use>
</svg>E-Mail schreiben
</a>
</li>
<li class="icon-list__item">
<a class="icon-block" href="#">
<svg class="icon icon-block__icon icon--form" id="icon-9d66" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-form"></use>
</svg>Kontaktformular
</a>
</li>
<li class="icon-list__item">
<a class="icon-block" href="#">
<svg class="icon icon-block__icon icon--pin" id="icon-5569" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-pin"></use>
</svg>Geschäftstelle finden
</a>
</li>
</ul>
<div class="box__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr Kontaktdaten</span>
<svg class="icon icon--arrow-right" id="icon-793d" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 50 25 2 -->
<section class="grid grid--50-25">
<div class="grid__inner">
<div class="grid__column">
<div class="box box--bordered box--grow">
<div class="box__content">
<div class="box__headline">
<h3 class="headline headline--headline-1">Häufige Fragen und Antworten
</h3>
</div>
<ul class="icon-list icon-list--lined icon-list--lined-without-trailing">
<li class="icon-list__item">
<a class="icon-block" href="#">
<svg class="icon icon-block__icon icon--internal-link" id="icon-2b97" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-internal-link"></use>
</svg>Bietet die hkk ein Bonusprogramm?
</a>
</li>
<li class="icon-list__item">
<a class="icon-block" href="#">
<svg class="icon icon-block__icon icon--internal-link" id="icon-730f" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-internal-link"></use>
</svg>Wer zahlt die professionelle Zahnreinigung?
</a>
</li>
<li class="icon-list__item">
<a class="icon-block" href="#">
<svg class="icon icon-block__icon icon--internal-link" id="icon-88b6" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-internal-link"></use>
</svg>Krankmeldung & Krankengeld - was gibt es zu beachten?
</a>
</li>
<li class="icon-list__item">
<a class="icon-block" href="#">
<svg class="icon icon-block__icon icon--internal-link" id="icon-7a87" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-internal-link"></use>
</svg>Wie bin ich im Ausland versichert?
</a>
</li>
<li class="icon-list__item">
<a class="icon-block" href="#">
<svg class="icon icon-block__icon icon--internal-link" id="icon-9467" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-internal-link"></use>
</svg>Lorem ipsum
</a>
</li>
</ul>
<div class="box__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Alle Fragen und Antworten</span>
<svg class="icon icon--arrow-right" id="icon-7e95" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></a>
</div>
</div>
</div>
</div>
<div class="grid__column">
<div class="box box--light-blue box--grow">
<div class="box__content">
<div class="box__headline">
<h3 class="headline headline--headline-1"><span class="headline__kicker"><span class="headline__kicker-text">Der Kicker<span class="u-hidden-visually">: </span></span>
</span>Das ist eine Headline einer Box
</h3>
</div>
<form class="form form--inline">
<div class="form__inner">
<div class="form-group">
<label class="label u-hidden-visually" for="email">E-Mail</label>
<div class="form-group__inner">
<input class="input input--email" type="email" placeholder="E-Mail-Adresse" required="required" autocomplete="email" id="email" name="email" />
</div>
</div>
<div class="form__submit">
<input class="button button--blue" type="submit" value="Weiter" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- 50 50 -->
<section class="grid grid--50-50">
<div class="grid__inner">
<div class="grid__column">
<div class="box box--bordered box--grow">
<div class="box__content">
<div class="box__headline">
<h3 class="headline headline--headline-1">Häufige Fragen und Antworten
</h3>
</div>
<ul class="icon-list icon-list--lined icon-list--lined-without-trailing">
<li class="icon-list__item">
<a class="icon-block" href="#">
<svg class="icon icon-block__icon icon--internal-link" id="icon-656a" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-internal-link"></use>
</svg>Bietet die hkk ein Bonusprogramm?
</a>
</li>
<li class="icon-list__item">
<a class="icon-block" href="#">
<svg class="icon icon-block__icon icon--internal-link" id="icon-2dc8" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-internal-link"></use>
</svg>Wer zahlt die professionelle Zahnreinigung?
</a>
</li>
<li class="icon-list__item">
<a class="icon-block" href="#">
<svg class="icon icon-block__icon icon--internal-link" id="icon-425e" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-internal-link"></use>
</svg>Krankmeldung & Krankengeld - was gibt es zu beachten?
</a>
</li>
<li class="icon-list__item">
<a class="icon-block" href="#">
<svg class="icon icon-block__icon icon--internal-link" id="icon-5868" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-internal-link"></use>
</svg>Wie bin ich im Ausland versichert?
</a>
</li>
<li class="icon-list__item">
<a class="icon-block" href="#">
<svg class="icon icon-block__icon icon--internal-link" id="icon-af66" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-internal-link"></use>
</svg>Lorem ipsum
</a>
</li>
</ul>
<div class="box__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Alle Fragen und Antworten</span>
<svg class="icon icon--arrow-right" id="icon-e89e" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></a>
</div>
</div>
</div>
</div>
<div class="grid__column">
<div class="box box--light-blue box--grow">
<div class="box__content">
<div class="box__headline">
<h3 class="headline headline--headline-1"><span class="headline__kicker"><span class="headline__kicker-text">Der Kicker<span class="u-hidden-visually">: </span></span>
</span>Das ist eine Headline einer Box
</h3>
</div>
<form class="form form--inline">
<div class="form__inner">
<div class="form-group">
<label class="label u-hidden-visually" for="email">E-Mail</label>
<div class="form-group__inner">
<input class="input input--email" type="email" placeholder="E-Mail-Adresse" required="required" autocomplete="email" id="email" name="email" />
</div>
</div>
<div class="form__submit">
<input class="button button--blue" type="submit" value="Weiter" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- 25 50 25 -->
<section class="grid grid--25-50-25">
<header class="grid__header grid__header--big">
<h2 class="grid__headline">Ihre Rechte</h2>
<p class="grid__description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</header>
<div class="grid__inner">
<div class="grid__column">
<div class="box box--bordered">
<div class="box__content">
<div class="box__headline">
<h3 class="headline headline--headline-1">Elterngeld: Alles was Sie wissen müssen
</h3>
</div>
<ul class="icon-list icon-list--lined icon-list--lined-without-trailing">
<li class="icon-list__item">
<a class="icon-block" href="#">
<svg class="icon icon-block__icon icon--internal-link" id="icon-d49c" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-internal-link"></use>
</svg>Elterngeld für wen?
</a>
</li>
<li class="icon-list__item">
<a class="icon-block" href="#">
<svg class="icon icon-block__icon icon--internal-link" id="icon-2042" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-internal-link"></use>
</svg>Höhe des Elterngeldes
</a>
</li>
<li class="icon-list__item">
<a class="icon-block" href="#">
<svg class="icon icon-block__icon icon--internal-link" id="icon-8333" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-internal-link"></use>
</svg>Anspruchsdauer
</a>
</li>
<li class="icon-list__item">
<a class="icon-block" href="#">
<svg class="icon icon-block__icon icon--internal-link" id="icon-fb98" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-internal-link"></use>
</svg>Anträge und Fristen
</a>
</li>
</ul>
</div>
</div>
<div class="box box--sand">
<div class="box__icon">
<svg class="icon icon--big-calendar" id="icon-b302" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-big-calendar"></use>
</svg>
</div>
<div class="box__content">
<div class="box__headline">
<h3 class="headline headline--headline-1"><span class="headline__kicker"><span class="headline__kicker-text">Der Kicker<span class="u-hidden-visually">: </span></span>
</span>Geld und Fristen einfach berechnen
</h3>
</div>
<p>Gewinnen Sie den Überblick über Beginn und Ende Ihres Ansprüche.</p>
</div>
</div>
<div class="box box--sand">
<div class="box__icon">
<svg class="icon icon--big-calendar" id="icon-1e5a" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-big-calendar"></use>
</svg>
</div>
<div class="box__content">
<div class="box__headline">
<h3 class="headline headline--headline-1"><span class="headline__kicker"><span class="headline__kicker-text">Der Kicker<span class="u-hidden-visually">: </span></span>
</span>Dies ist ein dritter Container
</h3>
</div>
<p>Dieser wird erst später angezeigt.</p>
</div>
</div>
</div>
<div class="grid__column">
<div class="teaser teaser--image">
<div class="teaser__image">
<div class="image-wrap"><img class="image" alt="" src="/images/dummy/25-50-25.jpg" />
<button class="copyright js-tooltip image__copyright" title="Lorem ipsum dolor sit amet, consectetuer adipiscin" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-4b6e" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-copyright"></use>
</svg>
</button>
</div>
</div>
<div class="teaser__inner">
<div class="teaser__headline">
<h3 class="headline headline--headline-1">7 Fakten zum Mutterschaftsgeld
</h3>
</div>
<p class="teaser__text">Die hkk bezahlt 6 Wochen vor und 8 Wochen nach der Geburt Mutterschaftsgeld in Höhe Ihres letzten Nettoverdienstes.</p>
<div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "7 Fakten zum Mutterschaftsgeld"</span></span>
<svg class="icon icon--arrow-right" id="icon-70b6" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></a>
</div>
</div>
<a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
</div>
<div class="teaser">
<div class="teaser__inner">
<div class="teaser__headline">
<h3 class="headline headline--headline-1">Schwangerschaft und Arbeit
</h3>
</div>
<p class="teaser__text">Als werdende Mutter haben Sie das Recht auf besonderen Schutz und Fürsorge der Gesellschaft.</p>
<div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Schwangerschaft und Arbeit"</span></span>
<svg class="icon icon--arrow-right" id="icon-c0b2" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></a>
</div>
</div>
<a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
</div>
<div class="teaser">
<div class="teaser__inner">
<div class="teaser__headline">
<h3 class="headline headline--headline-1">Schwangerschaft
</h3>
</div>
<p class="teaser__text">Lorem ipsum dolor sit atmet...</p>
<div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Schwangerschaft"</span></span>
<svg class="icon icon--arrow-right" id="icon-753a" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></a>
</div>
</div>
<a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
</div>
</div>
<div class="grid__column">
<div class="teaser teaser--image">
<div class="teaser__image">
<div class="image-wrap"><img class="image" alt="" src="/images/dummy/25-50-25-2.jpg" />
<button class="copyright js-tooltip image__copyright" title="Lorem ipsum dolor sit amet, consectetuer adipiscin" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-9076" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-copyright"></use>
</svg>
</button>
</div>
</div>
<div class="teaser__inner">
<div class="teaser__headline">
<h3 class="headline headline--headline-1">Mutterschutz
</h3>
</div>
<p class="teaser__text">Der Mutterschutz gilt für alle schwangeren Frauen, die in einem Arbeitsverhältnis stehen.</p>
<div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Mutterschutz"</span></span>
<svg class="icon icon--arrow-right" id="icon-4ed6" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></a>
</div>
</div>
<a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
</div>
<div class="teaser teaser--image">
<div class="teaser__image">
<div class="image-wrap"><img class="image" alt="" src="/images/dummy/25-50-25-3.jpg" />
<button class="copyright js-tooltip image__copyright" title="Lorem ipsum dolor sit amet, consectetuer adipiscin" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-d111" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-copyright"></use>
</svg>
</button>
</div>
</div>
<div class="teaser__inner">
<div class="teaser__headline">
<h3 class="headline headline--headline-1">Elternzeit – so geht's
</h3>
</div>
<p class="teaser__text">Nach der Geburt können Eltern bis zur Vollendung dessen dritten Lebensjahres Elternzeit nehmen.</p>
<div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Elternzeit – so geht's"</span></span>
<svg class="icon icon--arrow-right" id="icon-563c" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></a>
</div>
</div>
<a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
</div>
<div class="teaser teaser--image">
<div class="teaser__image">
<div class="image-wrap"><img class="image" alt="" src="/images/dummy/25-50-25-2.jpg" />
<button class="copyright js-tooltip image__copyright" title="Lorem ipsum dolor sit amet, consectetuer adipiscin" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-6852" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-copyright"></use>
</svg>
</button>
</div>
</div>
<div class="teaser__inner">
<div class="teaser__headline">
<h3 class="headline headline--headline-1">Lorem ipsum
</h3>
</div>
<p class="teaser__text">Lorem ipsum dolor sit atmet...</p>
<div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Lorem ipsum"</span></span>
<svg class="icon icon--arrow-right" id="icon-68ab" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></a>
</div>
</div>
<a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
</div>
</div>
</div>
</section>
<!-- 33 33 33 -->
<section class="grid grid--33-33-33">
<div class="grid__inner">
<div class="grid__column">
<div class="teaser">
<div class="teaser__inner">
<div class="teaser__headline">
<h3 class="headline headline--headline-1">Preis-Leistungs-Vorteil
</h3>
</div>
<p class="teaser__text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Preis-Leistungs-Vorteil"</span></span>
<svg class="icon icon--arrow-right" id="icon-71da" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></a>
</div>
</div>
<a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
</div>
<div class="teaser">
<div class="teaser__inner">
<div class="teaser__headline">
<h3 class="headline headline--headline-1">hkk im Test
</h3>
</div>
<p class="teaser__text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "hkk im Test"</span></span>
<svg class="icon icon--arrow-right" id="icon-f9bb" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></a>
</div>
</div>
<a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
</div>
</div>
<div class="grid__column">
<div class="teaser">
<div class="teaser__inner">
<div class="teaser__headline">
<h3 class="headline headline--headline-1">
<svg class="icon headline__hkk-plus icon--hkk-plus" id="icon-9b58" viewBox="0 0 200 200" role="img" aria-labelledby="title-icon-9b58">
<title id="title-icon-9b58">HKK Plus</title>
<use xlink:href="#icon-hkk-plus"></use>
</svg>hkk Leistungsplus
</h3>
</div>
<p class="teaser__text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "hkk Leistungsplus"</span></span>
<svg class="icon icon--arrow-right" id="icon-365e" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></a>
</div>
</div>
<a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
</div>
<div class="teaser">
<div class="teaser__inner">
<div class="teaser__headline">
<h3 class="headline headline--headline-1">Service und Beratung
</h3>
</div>
<p class="teaser__text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Service und Beratung"</span></span>
<svg class="icon icon--arrow-right" id="icon-9f14" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></a>
</div>
</div>
<a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
</div>
</div>
<div class="grid__column">
<div class="teaser">
<div class="teaser__inner">
<div class="teaser__headline">
<h3 class="headline headline--headline-1">Geldvorteile
</h3>
</div>
<p class="teaser__text">Die hkk belohnt Ihre Aktivitäten rund um Vorsorge und Prävention mit bis zu 250 Euro pro Jahr.</p>
<div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Geldvorteile"</span></span>
<svg class="icon icon--arrow-right" id="icon-96eb" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></a>
</div>
</div>
<a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
</div>
<div class="teaser">
<div class="teaser__inner">
<div class="teaser__headline">
<h3 class="headline headline--headline-1">Meine hkk
</h3>
</div>
<p class="teaser__text">In Ihrem persönlichen Bereich können Sie Formalitäten schnell und unkompliziert von zu Hause aus erledigen und dazu noch kostenfrei attraktive Online-Services nutzen.</p>
<div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Meine hkk"</span></span>
<svg class="icon icon--arrow-right" id="icon-1654" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></a>
</div>
</div>
<a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
</div>
</div>
</div>
</section>
<!-- 25 25 25 25 -->
<section class="grid grid--25-25-25-25">
<div class="grid__inner">
<div class="grid__column">
<div class="teaser">
<div class="teaser__inner">
<div class="teaser__headline">
<h3 class="headline headline--headline-1">Preis-Leistungs-Vorteil
</h3>
</div>
<p class="teaser__text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Preis-Leistungs-Vorteil"</span></span>
<svg class="icon icon--arrow-right" id="icon-b267" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></a>
</div>
</div>
<a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
</div>
<div class="teaser">
<div class="teaser__inner">
<div class="teaser__headline">
<h3 class="headline headline--headline-1">hkk im Test
</h3>
</div>
<p class="teaser__text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "hkk im Test"</span></span>
<svg class="icon icon--arrow-right" id="icon-9ff4" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></a>
</div>
</div>
<a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
</div>
</div>
<div class="grid__column">
<div class="teaser">
<div class="teaser__inner">
<div class="teaser__headline">
<h3 class="headline headline--headline-1">
<svg class="icon headline__hkk-plus icon--hkk-plus" id="icon-491e" viewBox="0 0 200 200" role="img" aria-labelledby="title-icon-491e">
<title id="title-icon-491e">HKK Plus</title>
<use xlink:href="#icon-hkk-plus"></use>
</svg>hkk Leistungsplus
</h3>
</div>
<p class="teaser__text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "hkk Leistungsplus"</span></span>
<svg class="icon icon--arrow-right" id="icon-2b27" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></a>
</div>
</div>
<a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
</div>
<div class="teaser">
<div class="teaser__inner">
<div class="teaser__headline">
<h3 class="headline headline--headline-1">Service und Beratung
</h3>
</div>
<p class="teaser__text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Service und Beratung"</span></span>
<svg class="icon icon--arrow-right" id="icon-b727" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></a>
</div>
</div>
<a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
</div>
</div>
<div class="grid__column">
<div class="teaser">
<div class="teaser__inner">
<div class="teaser__headline">
<h3 class="headline headline--headline-1">Geldvorteile
</h3>
</div>
<p class="teaser__text">Die hkk belohnt Ihre Aktivitäten rund um Vorsorge und Prävention mit bis zu 250 Euro pro Jahr.</p>
<div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Geldvorteile"</span></span>
<svg class="icon icon--arrow-right" id="icon-8db3" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></a>
</div>
</div>
<a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
</div>
<div class="teaser">
<div class="teaser__inner">
<div class="teaser__headline">
<h3 class="headline headline--headline-1">Meine hkk
</h3>
</div>
<p class="teaser__text">In Ihrem persönlichen Bereich können Sie Formalitäten schnell und unkompliziert von zu Hause aus erledigen und dazu noch kostenfrei attraktive Online-Services nutzen.</p>
<div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Meine hkk"</span></span>
<svg class="icon icon--arrow-right" id="icon-d252" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></a>
</div>
</div>
<a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
</div>
</div>
<div class="grid__column">
<div class="box box--light-blue">
<div class="box__content">
<div class="box__headline">
<h3 class="headline headline--headline-1">Das ist eine Headline einer Box
</h3>
</div>
<form class="form form--inline" action="/templates/vorteilsrechner.html" method="get">
<div class="form__inner">
<div class="form-group">
<label class="label" for="current-health-insurance">Aktuelle Krankenkasse</label>
<div class="form-group__inner">
<select class="select" required="required" id="current-health-insurance" name="current-health-insurance">
<option class="select__hint" disabled="disabled" selected="selected" value="">Auswählen</option>
<option value="aok-bayern">AOK Bayern</option>
<option value="bkk-akzo-nobel-bayern">BKK Akzo Nobel Bayern</option>
</select>
</div>
</div>
<div class="form-group">
<label class="label" for="gross-income">Mtl. Bruttoeinkommen</label>
<div class="form-group__inner">
<input class="input input--text" type="text" required="required" id="gross-income" name="gross-income" />
</div>
</div>
<div class="form__submit">
<input class="button button--blue" type="submit" value="Vorteil berechnen" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
-
//- Prepare attr object
attr = attr || {};
attr.class = classList(attr.class);
//- Set hidden content option
if (hiddenAfter) attr['data-hidden-after'] = hiddenAfter;
//- Set CTA label text
if (ctaLabel) attr['data-cta-label'] = ctaLabel;
//- Allowed grids
const allowed = [
'100',
'50-50',
'50-25',
'50-25-25',
'33-33-33',
'25-50-25',
'25-25-25-25',
];
// Add modifier
if (!size || !allowed.includes(size)) size = '100';
attr.class.push(`grid--${size}`);
//- Render grid
section.grid&attributes(attr)
//- Header
if smallHeadline
header.grid__header
!= include('@headline--kicker', {text: smallHeadline, level: 2})
else if headline || description
header.grid__header.grid__header--big
if headline
h2.grid__headline #{headline}
if description
p.grid__description #{description}
//- Grid inners
.grid__inner
//- Render grid columns
if columns
each column in columns
.grid__column
//- Render column contents
each content in column
!= include(`@${content.use}`, content)
/* 50 25 25 */
{
"size": "50-25-25",
"smallHeadline": "Gut zu wissen",
"columns": [
[
{
"use": "teaser",
"headline": "Erkältung: 7 Tipps zum Schutz",
"text": "Erkältungen einfach lindern - oder besser noch gar nicht erst ausbrechen lassen: Das sind die Themen dieser Rubrik.",
"image": "/images/dummy/50-25-25.jpg",
"copyright": "Lorem ipsum dolor sit amet, consectetuer adipiscin"
}
],
[
{
"use": "teaser",
"headline": "Alternative Heilmethoden",
"text": "Neben den schulmedizinischen Verfahren sind in den letzten Jahrzehnten verstärkt Naturheilverfahren gerfagt."
},
{
"use": "teaser",
"headline": "Kinder & Gesundheit",
"text": "Wie stillt man mit fester Nahrung ab? Was hilft gegen Kinderschnupfen? Was hat Sehschwäche mit Stubenhocken zu tun? Darüber informieren wir Sie hier."
}
],
[
{
"use": "teaser",
"headline": "Zähne",
"text": "Erfahren Sie, worauf Sie beim Kauf einer Zahnbürste achten sollten, wie Sie die Angst vor dem Zahnarzt überwinden, wofür Milchzähne gut sind und mehr."
},
{
"use": "teaser",
"headline": "Allergie",
"text": "Viele Menschen leiden an Allergien – Tendenz steigend. Einige sind angeboren, andere entwickeln sich mit den Jahren. Wir haben für Sie Informationen rund um das Thema Allergien zusammengestellt."
}
]
]
}
/* 50 25 */
{
"size": "50-25",
"columns": [
[
{
"use": "box--list-bordered",
"headline": "Häufige Fragen und Antworten",
"more": "Alle Fragen und Antworten",
"content": "-\n items = [\n {text: 'Bietet die hkk ein Bonusprogramm?', icon: 'internal-link', link: '#'},\n {text: 'Wer zahlt die professionelle Zahnreinigung?', icon: 'internal-link', link: '#'},\n {text: 'Krankmeldung & Krankengeld - was gibt es zu beachten?', icon: 'internal-link', link: '#'},\n {text: 'Wie bin ich im Ausland versichert?', icon: 'internal-link', link: '#'},\n ];\n!= include('@icon-list--lined-without-trailing', {items})\n"
}
],
[
{
"use": "box--list",
"headline": "Kontakt",
"more": "Mehr Kontaktdaten",
"content": "-\n items = [\n {text: 'Online Geschäftsstelle', icon: 'online-consulting', link: '#'},\n {text: 'E-Mail schreiben', icon: 'mail', link: '#'},\n {text: 'Kontaktformular', icon: 'form', link: '#'},\n {text: 'Geschäftstelle finden', icon: 'pin', link: '#'},\n ];\n!= include('@icon-list--lined-without-trailing', {items})\n"
}
]
]
}
/* 50 25 2 */
{
"size": "50-25",
"columns": [
[
{
"use": "box--list-bordered",
"headline": "Häufige Fragen und Antworten",
"more": "Alle Fragen und Antworten",
"grow": true,
"content": "-\n items = [\n {text: 'Bietet die hkk ein Bonusprogramm?', icon: 'internal-link', link: '#'},\n {text: 'Wer zahlt die professionelle Zahnreinigung?', icon: 'internal-link', link: '#'},\n {text: 'Krankmeldung & Krankengeld - was gibt es zu beachten?', icon: 'internal-link', link: '#'},\n {text: 'Wie bin ich im Ausland versichert?', icon: 'internal-link', link: '#'},\n {text: 'Lorem ipsum', icon: 'internal-link', link: '#'},\n ];\n!= include('@icon-list--lined-without-trailing', {items})\n"
}
],
[
{
"use": "box--simple-form",
"grow": true
}
]
]
}
/* 50 50 */
{
"size": "50-50",
"columns": [
[
{
"use": "box--list-bordered",
"headline": "Häufige Fragen und Antworten",
"more": "Alle Fragen und Antworten",
"grow": true,
"content": "-\n items = [\n {text: 'Bietet die hkk ein Bonusprogramm?', icon: 'internal-link', link: '#'},\n {text: 'Wer zahlt die professionelle Zahnreinigung?', icon: 'internal-link', link: '#'},\n {text: 'Krankmeldung & Krankengeld - was gibt es zu beachten?', icon: 'internal-link', link: '#'},\n {text: 'Wie bin ich im Ausland versichert?', icon: 'internal-link', link: '#'},\n {text: 'Lorem ipsum', icon: 'internal-link', link: '#'},\n ];\n!= include('@icon-list--lined-without-trailing', {items})\n"
}
],
[
{
"use": "box--simple-form",
"grow": true
}
]
]
}
/* 25 50 25 */
{
"size": "25-50-25",
"headline": "Ihre Rechte",
"description": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.",
"columns": [
[
{
"use": "box--list-bordered",
"headline": "Elterngeld: Alles was Sie wissen müssen",
"link": null,
"content": "-\n items = [\n {text: 'Elterngeld für wen?', icon: 'internal-link', link: '#'},\n {text: 'Höhe des Elterngeldes', icon: 'internal-link', link: '#'},\n {text: 'Anspruchsdauer', icon: 'internal-link', link: '#'},\n {text: 'Anträge und Fristen', icon: 'internal-link', link: '#'},\n ];\n!= include('@icon-list--lined-without-trailing', {items})\n"
},
{
"use": "box--icon-sand",
"icon": "big-calendar",
"headline": "Geld und Fristen einfach berechnen",
"content": "p Gewinnen Sie den Überblick über Beginn und Ende Ihres Ansprüche.\n",
"more": "Zum Fristenkalender"
},
{
"use": "box--icon-sand",
"icon": "big-calendar",
"headline": "Dies ist ein dritter Container",
"content": "p Dieser wird erst später angezeigt.\n",
"more": "Zum Kalender"
}
],
[
{
"use": "teaser",
"headline": "7 Fakten zum Mutterschaftsgeld",
"text": "Die hkk bezahlt 6 Wochen vor und 8 Wochen nach der Geburt Mutterschaftsgeld in Höhe Ihres letzten Nettoverdienstes.",
"image": "/images/dummy/25-50-25.jpg",
"copyright": "Lorem ipsum dolor sit amet, consectetuer adipiscin"
},
{
"use": "teaser",
"headline": "Schwangerschaft und Arbeit",
"text": "Als werdende Mutter haben Sie das Recht auf besonderen Schutz und Fürsorge der Gesellschaft."
},
{
"use": "teaser",
"headline": "Schwangerschaft",
"text": "Lorem ipsum dolor sit atmet..."
}
],
[
{
"use": "teaser",
"headline": "Mutterschutz",
"text": "Der Mutterschutz gilt für alle schwangeren Frauen, die in einem Arbeitsverhältnis stehen.",
"image": "/images/dummy/25-50-25-2.jpg",
"copyright": "Lorem ipsum dolor sit amet, consectetuer adipiscin"
},
{
"use": "teaser",
"headline": "Elternzeit – so geht's",
"text": "Nach der Geburt können Eltern bis zur Vollendung dessen dritten Lebensjahres Elternzeit nehmen.",
"image": "/images/dummy/25-50-25-3.jpg",
"copyright": "Lorem ipsum dolor sit amet, consectetuer adipiscin"
},
{
"use": "teaser",
"headline": "Lorem ipsum",
"text": "Lorem ipsum dolor sit atmet...",
"image": "/images/dummy/25-50-25-2.jpg",
"copyright": "Lorem ipsum dolor sit amet, consectetuer adipiscin"
}
]
]
}
/* 33 33 33 */
{
"size": "33-33-33",
"columns": [
[
{
"use": "teaser",
"headline": "Preis-Leistungs-Vorteil",
"text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
},
{
"use": "teaser",
"headline": "hkk im Test",
"text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
}
],
[
{
"use": "teaser",
"headline": "hkk Leistungsplus",
"hkkPlus": true,
"text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
},
{
"use": "teaser",
"headline": "Service und Beratung",
"text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
}
],
[
{
"use": "teaser",
"headline": "Geldvorteile",
"text": "Die hkk belohnt Ihre Aktivitäten rund um Vorsorge und Prävention mit bis zu 250 Euro pro Jahr."
},
{
"use": "teaser",
"headline": "Meine hkk",
"text": "In Ihrem persönlichen Bereich können Sie Formalitäten schnell und unkompliziert von zu Hause aus erledigen und dazu noch kostenfrei attraktive Online-Services nutzen."
}
]
]
}
/* 25 25 25 25 */
{
"size": "25-25-25-25",
"columns": [
[
{
"use": "teaser",
"headline": "Preis-Leistungs-Vorteil",
"text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
},
{
"use": "teaser",
"headline": "hkk im Test",
"text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
}
],
[
{
"use": "teaser",
"headline": "hkk Leistungsplus",
"hkkPlus": true,
"text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
},
{
"use": "teaser",
"headline": "Service und Beratung",
"text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
}
],
[
{
"use": "teaser",
"headline": "Geldvorteile",
"text": "Die hkk belohnt Ihre Aktivitäten rund um Vorsorge und Prävention mit bis zu 250 Euro pro Jahr."
},
{
"use": "teaser",
"headline": "Meine hkk",
"text": "In Ihrem persönlichen Bereich können Sie Formalitäten schnell und unkompliziert von zu Hause aus erledigen und dazu noch kostenfrei attraktive Online-Services nutzen."
}
],
[
{
"use": "box--form"
}
]
]
}
const SELECTORS = {
hidden: 'grid__element--hidden',
};
export default class Column {
constructor($el, options) {
this.$el = $el;
this.options = options;
this.initContentElements();
this.initContentVisibility();
}
initContentElements() {
this.$contentElements = this.$el
.querySelectorAll(':scope > div');
}
initContentVisibility() {
const visibilityLimit = this.options.length - this.$contentElements.length;
if (visibilityLimit) {
this.$contentElements.slice(visibilityLimit).forEach(
$el => $el.classList.add(SELECTORS.hidden),
);
}
}
extend() {
this.$contentElements.forEach(
$el => $el.classList.remove(SELECTORS.hidden),
);
}
remove($el) {
if (this.$el.contains($el)) this.$el.removeChild($el);
}
}
import h from 'hyperscript';
import Column from './grid-column';
const SELECTORS = {
inner: '.grid__inner',
column: '.grid__column',
extend: '.grid__extend',
cta: 'a.grid__extend-button.button.button--blue.button--outline',
};
export default class Grid {
constructor($el) {
this.$el = $el;
this.initMediaQuery('(min-width: 1191px)');
}
initMediaQuery(constraints) {
this.mediaQuery = window.matchMedia(constraints);
this.mediaQuery.addListener(this.mediaQueryListener.bind(this));
this.mediaQueryListener(this.mediaQuery);
}
mediaQueryListener(mediaQuery) {
if (mediaQuery.matches) this.initExtendableGrid();
else if (this.columns) this.extend();
}
initExtendableGrid() {
this.extended = false;
this.initGridColumns({ length: this.$el.dataset.hiddenAfter });
this.initCTA();
}
initGridColumns(options = {}) {
this.inner = this.$el
.querySelector(SELECTORS.inner);
this.columns = this.$el
.querySelectorAll(SELECTORS.column)
.map($el => new Column($el, options));
}
initCTA() {
this.$cta = h(SELECTORS.extend,
h(SELECTORS.cta, {
href: '#',
onclick: (event) => {
event.preventDefault();
this.extend();
},
}, this.$el.dataset.ctaLabel),
);
this.inner.appendChild(this.$cta);
}
extend() {
if (!this.extended) {
this.extended = true;
this.inner.removeChild(this.$cta);
this.columns.forEach(column => column.extend());
}
}
}
// Initialize Grid
document.querySelectorAll('.grid[data-hidden-after]').forEach(
$el => new Grid($el),
);
.grid {
margin-bottom: 1rem;
&:last-child {
margin-bottom: 0;
}
@include mq($from: m) {
&:not(:last-child) {
margin-bottom: 2rem;
}
}
@include mq($from: l) {
&:not(:last-child) {
margin-bottom: 3rem;
}
}
}
.grid__header {
margin-bottom: 2rem;
}
.grid__header--big {
&::after {
background-color: $color-blue;
content: '';
display: block;
height: 0.4rem;
margin: 2.5rem auto 4rem;
width: 6rem;
@include mq($from: m) {
height: 0.5rem;
width: 7.5rem;
}
}
}
.grid__headline,
.grid__description {
color: $color-blue;
margin-left: auto;
margin-right: auto;
max-width: 72rem;
text-align: center;
}
.grid__headline {
font-size: 2.3rem;
letter-spacing: 0.4px;
line-height: 2.7rem;
text-transform: uppercase;
@include mq($from: m) {
font-size: 2.8rem;
line-height: 3.3rem;
}
}
.grid__inner {
display: flex;
flex-wrap: wrap;
justify-content: center;
position: relative;
@include mq($from: m) {
margin-left: -1.5rem;
margin-right: -1.5rem;
}
}
.grid__column {
flex-basis: 100%;
@include mq($from: m) {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
.grid__element--hidden {
border: 0;
height: 0;
margin: 0;
padding: 0;
visibility: hidden;
}
.grid__extend {
background-image: linear-gradient(to bottom, rgba(#fff, 0) 0%, rgba(#fff, 0) 10%, rgba(#fff, 1) 50%);
bottom: 0;
height: 15rem;
left: 0;
position: absolute;
text-align: center;
width: 100%;
z-index: 2;
}
.grid__extend-button {
margin-top: 10rem;
}
.grid--50-50 {
.grid__inner {
@include mq($from: m) {
flex-wrap: nowrap;
}
}
.grid__column {
@include mq($from: m) {
flex-basis: 50%;
max-width: 50%;
}
}
}
.grid--33-33-33 {
.grid__inner {
@include mq($from: 800px) {
flex-wrap: nowrap;
}
}
.grid__column {
@include mq($from: 800px) {
flex-basis: 33.33%;
max-width: 33.33%;
}
}
}
.grid--25-25-25-25 {
.grid__inner {
@include mq($from: 950px) {
flex-wrap: nowrap;
}
}
.grid__column {
@include mq($from: m) {
flex-basis: 50%;
max-width: 50%;
}
@include mq($from: 950px) {
flex-basis: 25%;
max-width: 25%;
}
}
}
.grid--50-25 {
.grid__inner {
@include mq($from: m) {
flex-wrap: nowrap;
}
}
.grid__column {
@include mq($from: m) {
flex-basis: 50%;
max-width: 50%;
}
}
.grid__column:nth-child(2) {
@include mq($from: l) {
flex-basis: 33%;
max-width: 33%;
}
@include mq($from: xl) {
flex-basis: 25%;
max-width: 25%;
}
}
}
.grid--50-25-25,
.grid--25-50-25 {
.grid__inner {
@include mq($from: l) {
flex-wrap: nowrap;
}
}
.grid__column {
@include mq($from: m) {
flex-basis: 50%;
max-width: 50%;
}
@include mq($from: l) {
flex-basis: 33.33%;
max-width: 33.33%;
}
@include mq($from: xl) {
flex-basis: 25%;
max-width: 25%;
}
}
}
.grid--50-25-25 {
.grid__column:nth-child(1) {
@include mq($from: m) {
flex-basis: 100%;
max-width: 100%;
}
@include mq($from: l) {
flex-basis: 33.33%;
max-width: 33.33%;
}
@include mq($from: xl) {
flex-basis: 50%;
max-width: 50%;
}
}
}
.grid--25-50-25 {
.grid__column:nth-child(2) {
order: -1;
@include mq($from: m) {
flex-basis: 100%;
max-width: 100%;
}
@include mq($from: l) {
flex-basis: 33.33%;
max-width: 33.33%;
order: 0;
}
@include mq($from: xl) {
flex-basis: 50%;
max-width: 50%;
}
}
}
There are no notes for this item.