<!-- Default -->
<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>
<p>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>
<div class="box__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Weitere Informationen</span>
<svg class="icon icon--arrow-right" id="icon-354f" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></a>
</div>
</div>
</div>
<!-- Simple Form -->
<div class="box box--light-blue">
<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>
<!-- Info Form -->
<div class="box box--bordered">
<div class="box__content">
<h3 class="headline headline--headline-1">Gleich ausfüllen und mehr Infos bekommen
</h3>
<form class="form">
<div class="form__inner">
<fieldset class="form-group form-group--fullwide">
<legend class="label u-hidden-visually">Mitgliedschaft</legend>
<div class="form-group__inner">
<label class="radio radio--nextline">
<input class="radio__input" type="radio" value="membership" required="required" id="radio-d699" name="subject"/><span class="radio__indicator"></span><span class="radio__label">Ja, ich möchte Mitglied der Krankenkasse hkk werden.</span>
</label>
<label class="radio radio--nextline">
<input class="radio__input" type="radio" value="info" required="required" id="radio-c271" name="subject"/><span class="radio__indicator"></span><span class="radio__label">Ja, ich möchte mehr über die Krankenkasse hkk wissen. Senden Sie mir bitte Infomaterial zu.</span>
</label>
</div>
</fieldset>
<fieldset class="form-group form-group--fullwide">
<legend class="label label--required label--large">Ich bin</legend>
<div class="form-group__inner">
<label class="radio radio--nextline">
<input class="radio__input" type="radio" value="employee" required="required" id="radio-b484" name="status"/><span class="radio__indicator"></span><span class="radio__label">Arbeitnehmer oder selbstständig tätig.</span>
</label>
<label class="radio radio--nextline">
<input class="radio__input" type="radio" value="student" required="required" id="radio-08f8" name="status"/><span class="radio__indicator"></span><span class="radio__label">Student oder sonstiges (z.B. Künstler, Beamter).</span>
</label>
</div>
</fieldset>
<fieldset class="form-group form-group--fullwide">
<legend class="label label--required label--large">Persönliche Informationen</legend>
<div class="form-group__inner">
<label class="radio">
<input class="radio__input" type="radio" value="female" id="radio-11ea" name="gender"/><span class="radio__indicator"></span><span class="radio__label">Frau</span>
</label>
<label class="radio">
<input class="radio__input" type="radio" value="male" id="radio-fe15" name="gender"/><span class="radio__indicator"></span><span class="radio__label">Herr</span>
</label>
</div>
</fieldset>
<fieldset class="form-group form-group--fullwide form-group--inline">
<legend class="label u-hidden-visually">Name</legend>
<div class="form-group__inner">
<input class="input input--text" type="text" placeholder="Vorname*" required="required" autocomplete="fname" id="input-2cd2" name="name" />
<input class="input input--text" type="text" placeholder="Nachname*" required="required" autocomplete="lname" id="input-f4f6" name="name" />
</div>
</fieldset>
<div class="form-group form-group--fullwide">
<label class="label" for="birthdate">Geburtsdatum</label>
<div class="form-group__inner">
<input class="input input--date" type="date" placeholder="Geburtsdatum*" required="required" autocomplete="birthdate" id="birthdate" name="birthdate" />
</div>
</div>
<div class="form-group form-group--fullwide">
<label class="label u-hidden-visually" for="address-1">Straße, Hausnummer</label>
<div class="form-group__inner">
<input class="input input--text" type="text" placeholder="Straße, Nr.*" required="required" autocomplete="address-line1" id="address-1" name="address-1" />
</div>
</div>
<fieldset class="form-group form-group--fullwide form-group--inline">
<legend class="label u-hidden-visually">PLZ und Ort</legend>
<div class="form-group__inner">
<input class="input input--text input--25" type="text" placeholder="PLZ*" required="required" autocomplete="zipcode" id="input-36cc" name="address-2" />
<input class="input input--text input--75" type="text" placeholder="Ort*" required="required" autocomplete="city" id="input-2207" name="address-2" />
</div>
</fieldset>
<fieldset class="form-group form-group--fullwide form-group--inline">
<legend class="label u-hidden-visually">E-Mail-Addresse und Telefonnummer</legend>
<div class="form-group__inner">
<input class="input input--email" type="email" placeholder="E-Mail-Adresse" autocomplete="email" id="input-e6f7" name="contact" />
<input class="input input--tel" type="tel" placeholder="Telefonnummer" autocomplete="telephone" id="input-c576" name="contact" />
</div>
</fieldset>
<div class="form-group form-group--fullwide">
<label class="label u-hidden-visually" for="privacy-policy">Datenschutzerklärung</label>
<div class="form-group__inner">
<label class="checkbox">
<input class="checkbox__input" type="checkbox" value="1" required="required" id="privacy-policy" name="privacy-policy"/><span class="checkbox__indicator"></span><span class="checkbox__label"><span class="formatted-text">Ich akzeptiere die <a href="#">Datenschutzerklärung</a>.*</span></span>
</label>
</div>
</div>
<div class="form__submit">
<input class="button button--blue" type="submit" value="Abschicken" />
</div>
</div>
</form>
</div>
</div>
<!-- Icon -->
<div class="box box--light-blue">
<div class="box__icon">
<svg class="icon icon--big-calendar" id="icon-9716" 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>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>
<!-- Icon Sand -->
<div class="box box--sand">
<div class="box__icon">
<svg class="icon icon--big-calendar" id="icon-2f74" 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>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>
<!-- Icon Form Sand -->
<div class="box box--sand">
<div class="box__icon">
<svg class="icon icon--pin" id="icon-cede" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-pin"></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>Das ist eine Headline einer Box
</h3>
</div>
<form class="form-micro">
<div class="form-micro-group">
<input class="input input--text" type="text" placeholder="PLZ" id="input-41b2" name="input-41b2" />
<a class="button button--blue button--icon" aria-label="Ein Label" id="button-38a1" href="#">
<svg class="icon button__icon icon--internal-link" id="icon-1c21" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-internal-link"></use>
</svg>
</a>
</div>
</form>
</div>
</div>
<!-- List -->
<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>
<ul class="icon-list icon-list--lined">
<li class="icon-list__item">
<a class="icon-block" href="#">
<svg class="icon icon-block__icon icon--internal-link" id="icon-f771" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-internal-link"></use>
</svg>Interner Link
</a>
</li>
<li class="icon-list__item">
<a class="icon-block" href="#">
<svg class="icon icon-block__icon icon--external-link" id="icon-bf08" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-external-link"></use>
</svg>Externer Link
</a>
</li>
<li class="icon-list__item">
<a class="icon-block" href="#">
<svg class="icon icon-block__icon icon--download" id="icon-633f" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-download"></use>
</svg>Download-Link<span class="icon-block__sub"> (PDF, 2MB)</span>
</a>
</li>
</ul>
<div class="box__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Weitere Informationen</span>
<svg class="icon icon--arrow-right" id="icon-7d92" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></a>
</div>
</div>
</div>
<!-- List Bordered -->
<div class="box box--bordered">
<div class="box__content">
<div class="box__headline">
<h3 class="headline headline--headline-1">Das ist eine Headline einer Box
</h3>
</div>
<ul class="icon-list icon-list--lined">
<li class="icon-list__item">
<a class="icon-block" href="#">
<svg class="icon icon-block__icon icon--internal-link" id="icon-30cc" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-internal-link"></use>
</svg>Interner Link
</a>
</li>
<li class="icon-list__item">
<a class="icon-block" href="#">
<svg class="icon icon-block__icon icon--external-link" id="icon-ed96" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-external-link"></use>
</svg>Externer Link
</a>
</li>
<li class="icon-list__item">
<a class="icon-block" href="#">
<svg class="icon icon-block__icon icon--download" id="icon-0be9" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-download"></use>
</svg>Download-Link<span class="icon-block__sub"> (PDF, 2MB)</span>
</a>
</li>
</ul>
<div class="box__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Weitere Informationen</span>
<svg class="icon icon--arrow-right" id="icon-5486" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-arrow-right"></use>
</svg></a>
</div>
</div>
</div>
<!-- List Bordered Hkk Plus -->
<div class="box box--bordered">
<div class="box__content">
<div class="box__headline">
<h3 class="headline headline--headline-1">
<svg class="icon headline__hkk-plus icon--hkk-plus" id="icon-49b9" viewBox="0 0 200 200" role="img" aria-labelledby="title-icon-49b9">
<title id="title-icon-49b9">HKK Plus</title>
<use xlink:href="#icon-hkk-plus"></use>
</svg>Das ist eine Headline einer Box
</h3>
</div>
<ul class="icon-list icon-list--lined">
<li class="icon-list__item">
<a class="icon-block" href="#">
<svg class="icon icon-block__icon icon--internal-link" id="icon-f3f1" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-internal-link"></use>
</svg>Interner Link
</a>
</li>
<li class="icon-list__item">
<a class="icon-block" href="#">
<svg class="icon icon-block__icon icon--external-link" id="icon-6d05" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-external-link"></use>
</svg>Externer Link
</a>
</li>
<li class="icon-list__item">
<a class="icon-block" href="#">
<svg class="icon icon-block__icon icon--download" id="icon-11e7" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-download"></use>
</svg>Download-Link<span class="icon-block__sub"> (PDF, 2MB)</span>
</a>
</li>
</ul>
</div>
</div>
<!-- Form -->
<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>
<!-- Form Sand -->
<div class="box box--sand box--tool">
<div class="box__content">
<form class="form form--inline">
<div class="form__inner">
<div class="form-group">
<label class="label" for="gross-income"></label>
<div class="form-group__inner">
<input class="input input--text input--borderless" type="text" placeholder="Diagnoseschlüssel eingeben (z. B. A05.9)" required="required" id="gross-income" name="gross-income" />
</div>
</div>
<div class="form__submit">
<input class="button button--blue" type="submit" value="Finden" />
</div>
</div>
</form>
</div>
</div>
-
//- Prepare attr object
attr = attr || {};
attr.class = classList(attr.class);
attr.class.push(`box--${color || 'light-blue'}`);
//- Tool box
if (tool) attr.class.push('box--tool');
//- Growing box
if (grow) attr.class.push('box--grow');
//- Render box
.box&attributes(attr)
//- Icon
if icon
.box__icon
!= include('@icon', {icon})
//- Box content
.box__content
//- Headline
if headline
.box__headline
- headlineOptions = Object.assign({}, {text: headline, hkkPlus}, headlineOptions)
!= include('@headline--headline-1', headlineOptions)
//- Content
if content
!= renderPug(content)
//- More link
if link
.box__more
!= include('@teaser-link', {link, text: more || 'Weitere Informationen'})
/* Default */
{
"headline": "Das ist eine Headline einer Box",
"color": "light-blue",
"more": "Weitere Informationen",
"link": "#",
"hkkPlus": null,
"headlineOptions": {
"level": 3
},
"content": "p 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.\n"
}
/* Simple Form */
{
"headline": "Das ist eine Headline einer Box",
"color": "light-blue",
"more": "Weitere Informationen",
"link": null,
"hkkPlus": null,
"headlineOptions": {
"level": 3,
"kicker": "Der Kicker"
},
"content": "!= include('@form--mini')\n"
}
/* Info Form */
{
"headline": null,
"color": "bordered",
"more": "Weitere Informationen",
"link": null,
"hkkPlus": null,
"headlineOptions": {
"level": 3
},
"content": "!= include('@form--info')\n"
}
/* Icon */
{
"headline": "Das ist eine Headline einer Box",
"color": "light-blue",
"more": "Weitere Informationen",
"link": null,
"hkkPlus": null,
"headlineOptions": {
"level": 3,
"kicker": "Der Kicker"
},
"content": "!= include('@form--mini')\n",
"icon": "big-calendar"
}
/* Icon Sand */
{
"headline": "Das ist eine Headline einer Box",
"color": "sand",
"more": "Weitere Informationen",
"link": null,
"hkkPlus": null,
"headlineOptions": {
"level": 3,
"kicker": "Der Kicker"
},
"content": "!= include('@form--mini')\n",
"icon": "big-calendar"
}
/* Icon Form Sand */
{
"headline": "Das ist eine Headline einer Box",
"color": "sand",
"more": "Weitere Informationen",
"link": null,
"hkkPlus": null,
"headlineOptions": {
"level": 3,
"kicker": "Der Kicker"
},
"content": "!= include('@form-micro')\n",
"icon": "pin"
}
/* List */
{
"headline": "Das ist eine Headline einer Box",
"color": "light-blue",
"more": "Weitere Informationen",
"link": "#",
"hkkPlus": null,
"headlineOptions": {
"level": 3
},
"content": "!= include('@icon-list--lined')\n"
}
/* List Bordered */
{
"headline": "Das ist eine Headline einer Box",
"color": "bordered",
"more": "Weitere Informationen",
"link": "#",
"hkkPlus": null,
"headlineOptions": {
"level": 3
},
"content": "!= include('@icon-list--lined')\n"
}
/* List Bordered Hkk Plus */
{
"headline": "Das ist eine Headline einer Box",
"color": "bordered",
"more": "Weitere Informationen",
"link": null,
"hkkPlus": true,
"headlineOptions": {
"level": 3
},
"content": "!= include('@icon-list--lined')\n"
}
/* Form */
{
"headline": "Das ist eine Headline einer Box",
"color": "light-blue",
"more": "Weitere Informationen",
"link": null,
"hkkPlus": null,
"headlineOptions": {
"level": 3
},
"content": "!= include('@form--inline', { submitOptions: { modifier: 'blue', link: false, submit: true }})\n"
}
/* Form Sand */
{
"headline": null,
"color": "sand",
"more": "Weitere Informationen",
"link": null,
"hkkPlus": null,
"headlineOptions": {
"level": 3
},
"tool": true,
"content": "!= include('@form--borderless')\n"
}
.box {
background-color: $color-steelgrey-light;
display: flex;
font-size: 1.5rem;
margin-bottom: 3rem;
padding: 2.5rem 2.5rem 1rem;
@include mq($from: m) {
display: block;
}
}
.box--tool {
.box__content {
margin: 0 auto;
}
@include mq($from: m) {
padding: 4rem 5rem 3rem;
}
}
.box--bordered {
background-color: transparent;
border: 0.5rem solid $color-steelgrey-light;
padding: 2rem 2rem 0.5rem;
}
.box--sand {
background-color: $color-sand;
.form-micro {
margin-top: 3rem;
}
}
.box--grow {
@include mq($from: m) {
height: 100%;
margin: 0;
}
}
.box__icon {
color: rgba(#333, 0.2);
font-size: 8rem;
line-height: 1;
margin-left: 1.5rem;
order: 1;
width: 8rem;
@include mq($from: m) {
margin-left: 0;
padding-bottom: 2.5rem;
padding-top: 0.5rem;
text-align: center;
width: 100%;
}
}
.box__content {
flex-shrink: 1;
max-width: 100%;
}
.box__more {
margin-bottom: 1.5rem;
}
There are no notes for this item.