<div class="af-app">
<div class="af-intro">
<div class="af-intro__text">
<h1 class="af-headline--h1">
Ich bin eine h1 Überschrift
</h1>
<p class="af-text ">
ich bin ein einfacher Text
</p>
<p class="af-text text--highlight">
ich bin ein grüner Text
</p>
<p class="af-text text--highlight">
<i class="a-icon icon--timer" aria-hidden="true"></i>
ich bin ein grüner Text
</p>
</div>
<div class="af-intro__badges">
<div class="af-badge-image">
<img src="../../images/application-form/af-focus-money-krankenkasse-des-jahres.png" />
<img src="../../images/application-form/af-chip-testsieger.png" />
</div>
</div>
</div>
<div class="af-steps">
<div class="af-step">
<h2 class="af-headline--h2">
Ich bin eine h2 Überschrift
</h2>
<h3 class="af-headline--h3">
Ich bin eine h3 Überschrift
</h3>
<div title="Schritt 0 von 4" class="af-progress-bar">
<div class="af-progress-bar__progress" style="width: 0%"></div>
</div>
<div class="af-grid">
<div class="af-grid__item grid__item--3">
<div class="af-item ">
<button data-target="" class="af-button">
Button Application
<i class="a-icon icon--arrow-forward" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="af-grid__item grid__item--3">
<div class="af-item ">
<button data-target="" class="af-button">
Button Application
<i class="a-icon icon--arrow-forward" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="af-grid__item grid__item--3">
<div class="af-item ">
<button data-target="" class="af-button">
Button Application
<i class="a-icon icon--arrow-forward" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="af-grid__item grid__item--2 grid__item--break">
<div class="af-item ">
<label class="a-label af-label" for="">
Label Application
</label>
<input type="text" value="" class="a-input af-input">
<i class="a-icon icon--check" aria-hidden="true"></i>
<i class="a-icon icon--close" aria-hidden="true"></i>
</div>
<p class="af-error">Bitte füllen Sie das Feld "Label Application" aus.</p>
</div>
<div class="af-grid__item grid__item--4">
<div class="af-item ">
<label class="a-label af-label" for="">
Label Application
</label>
<input type="text" value="" class="a-input af-input">
<i class="a-icon icon--check" aria-hidden="true"></i>
<i class="a-icon icon--close" aria-hidden="true"></i>
</div>
<p class="af-error">Bitte füllen Sie das Feld "Label Application" aus.</p>
</div>
<div class="af-grid__item grid__item--6">
<div class="af-item ">
<label class="a-label af-label" for="">
Label Application
</label>
<input type="text" value="" class="a-input af-input">
<i class="a-icon icon--check" aria-hidden="true"></i>
<i class="a-icon icon--close" aria-hidden="true"></i>
</div>
<p class="af-error">Bitte füllen Sie das Feld "Label Application" aus.</p>
</div>
<div class="af-grid__item grid__item--6">
<div class="af-item is-invalid">
<label class="a-label af-label" for="">
Label Application
</label>
<input type="text" value="" class="a-input af-input">
<i class="a-icon icon--check" aria-hidden="true"></i>
<i class="a-icon icon--close" aria-hidden="true"></i>
</div>
<p class="af-error">Bitte füllen Sie das Feld "Label Application" aus.</p>
</div>
</div>
<div class="af-grid grid--short">
<div class="af-grid__item grid__item--6">
<div class="af-item ">
<label class="a-label af-label" for="">
Label Application
</label>
<input type="text" value="" class="a-input af-input">
<i class="a-icon icon--check" aria-hidden="true"></i>
<i class="a-icon icon--close" aria-hidden="true"></i>
</div>
<p class="af-error">Bitte füllen Sie das Feld "Label Application" aus.</p>
</div>
<div class="af-grid__item grid__item--6">
<div class="af-item ">
<label class="a-label af-label" for="">
Label Application
</label>
<input type="text" value="" class="a-input af-input">
<i class="a-icon icon--check" aria-hidden="true"></i>
<i class="a-icon icon--close" aria-hidden="true"></i>
</div>
<p class="af-error">Bitte füllen Sie das Feld "Label Application" aus.</p>
</div>
<div class="af-grid__item grid__item--2">
<div class="af-item ">
<label class="a-label af-label" for="">
Label Application
</label>
<input type="text" value="" class="a-input af-input">
<i class="a-icon icon--check" aria-hidden="true"></i>
<i class="a-icon icon--close" aria-hidden="true"></i>
</div>
<p class="af-error">Bitte füllen Sie das Feld "Label Application" aus.</p>
</div>
<div class="af-grid__item grid__item--4">
<div class="af-item ">
<label class="a-label af-label" for="">
Label Application
</label>
<input type="text" value="" class="a-input af-input">
<i class="a-icon icon--check" aria-hidden="true"></i>
<i class="a-icon icon--close" aria-hidden="true"></i>
</div>
<p class="af-error">Bitte füllen Sie das Feld "Label Application" aus.</p>
</div>
<div class="af-grid__item grid__item--4">
<div class="af-item ">
<label class="a-label af-label" for="">
Label Application
</label>
<input type="text" value="" class="a-input af-input">
<i class="a-icon icon--check" aria-hidden="true"></i>
<i class="a-icon icon--close" aria-hidden="true"></i>
</div>
<p class="af-error">Bitte füllen Sie das Feld "Label Application" aus.</p>
</div>
<div class="af-grid__item grid__item--2">
<div class="af-item ">
<label class="a-label af-label" for="">
Label Application
</label>
<input type="text" value="" class="a-input af-input">
<i class="a-icon icon--check" aria-hidden="true"></i>
<i class="a-icon icon--close" aria-hidden="true"></i>
</div>
<p class="af-error">Bitte füllen Sie das Feld "Label Application" aus.</p>
</div>
</div>
<div class="af-grid grid--spacing-top">
<div class="af-grid__item grid__item--2">
<div class="af-item af-item--choices ">
<label class="a-choice af-choice choice--checkbox" for="checkbox-1">
<input type="checkbox" value="A" name="checkbox1" id="checkbox-1" />
<span class="choice__check" aria-hidden="true"></span>
<span class="choice__text">Label Checkbox Application</span>
</label>
</div>
</div>
<div class="af-grid__item">
<p class="af-item item--text">oder</p>
</div>
<div class="af-grid__item grid__item--3">
<div class="af-item af-item--datepicker ">
<label class="a-label af-label" for="">
Geburtsdatum (tt.mm.jjjj)
</label>
<input type="text" value="" class="a-input af-datepicker js-datepicker-init">
<i class="a-icon icon--calendar" aria-hidden="true"></i>
</div>
<p class="af-error">Bitte füllen Sie das Feld "Label Application" aus.</p>
</div>
</div>
<div class="af-infobox">
<p class="af-text ">
<i class="a-icon icon--info" aria-hidden="true"></i>
ich bin ein Text
</p>
</div>
<fieldset class="af-fieldset">
<legend class="af-fieldset__legend">Form Legend Title</legend>
<div class="af-grid">
<div class="af-grid__item grid__item--6">
<div class="af-item item--choices ">
<label class="a-choice af-choice choice--radio" for="radio1">
<input type="radio" value="A" name="radio" id="radio1" />
<span class="choice__check" aria-hidden="true"></span>
<span class="choice__text-container">
<span class="choice__text">Label Radio Application</span>
<span class="choice__subtext">Subtext radio 1</span>
</span>
</label>
</div>
</div>
<div class="af-grid__item grid__item--6">
<div class="af-item item--choices ">
<label class="a-choice af-choice choice--radio" for="radio2">
<input type="radio" value="A" name="radio" id="radio2" />
<span class="choice__check" aria-hidden="true"></span>
<span class="choice__text-container">
<span class="choice__text">Label Radio Application</span>
<span class="choice__subtext">Subtext radio 2 Nullam quis risus eget urna mollis ornare vel eu leo</span>
</span>
</label>
</div>
</div>
<div class="af-grid__item grid__item--6">
<div class="af-item item--choices ">
<label class="a-choice af-choice choice--radio" for="radio3">
<input type="radio" value="A" name="radio" id="radio3" />
<span class="choice__check" aria-hidden="true"></span>
<span class="choice__text-container">
<span class="choice__text">Label Radio Application</span>
</span>
</label>
</div>
</div>
</div>
</fieldset>
<fieldset class="af-fieldset">
<legend class="af-fieldset__legend">Form Legend Title</legend>
<div class="af-item-group is-invalid">
<div class="af-grid">
<div class="af-grid__item grid__item--6">
<div class="af-item item--choices ">
<label class="a-choice af-choice choice--radio" for="radio4">
<input type="radio" value="A" name="radioerror" id="radio4" />
<span class="choice__check" aria-hidden="true"></span>
<span class="choice__text-container">
<span class="choice__text">Label Radio Application</span>
</span>
</label>
</div>
</div>
<div class="af-grid__item grid__item--6">
<div class="af-item item--choices ">
<label class="a-choice af-choice choice--radio" for="radio5">
<input type="radio" value="A" name="radioerror" id="radio5" />
<span class="choice__check" aria-hidden="true"></span>
<span class="choice__text-container">
<span class="choice__text">Label Radio Application</span>
</span>
</label>
</div>
</div>
<div class="af-grid__item grid__item--6">
<div class="af-item item--choices ">
<label class="a-choice af-choice choice--radio" for="radio6">
<input type="radio" value="A" name="radioerror" id="radio6" />
<span class="choice__check" aria-hidden="true"></span>
<span class="choice__text-container">
<span class="choice__text">Label Radio Application</span>
</span>
</label>
</div>
</div>
</div>
<p class="af-error">Bitte füllen Sie das Feld "Label Application" aus.</p>
</div>
</fieldset>
<fieldset class="af-fieldset">
<legend class="af-fieldset__legend">Form Legend Title</legend>
<div class="af-grid">
<div class="af-grid__item grid__item--3">
<div class="af-item item--choices ">
<label class="a-choice af-choice choice--radio" for="radio7">
<input type="radio" value="A" name="radiohalf" id="radio7" />
<span class="choice__check" aria-hidden="true"></span>
<span class="choice__text-container">
<span class="choice__text">Label Radio Application</span>
<span class="choice__subtext">Subtext radio 7 Nullam quis risus eget urna mollis ornare vel eu leo</span>
</span>
</label>
</div>
</div>
<div class="af-grid__item grid__item--3">
<div class="af-item item--choices ">
<label class="a-choice af-choice choice--radio" for="radio8">
<input type="radio" value="A" name="radiohalf" id="radio8" />
<span class="choice__check" aria-hidden="true"></span>
<span class="choice__text-container">
<span class="choice__text">Label Radio Application</span>
<span class="choice__subtext">Subtext radio 8</span>
</span>
</label>
</div>
</div>
</div>
</fieldset>
<div class="af-grid grid--spacing-top">
<div class="af-grid__item grid__item--6">
<h4 class="af-headline--h4">
Ich bin eine h4 Überschrift
</h4>
<p class="af-text ">
ich bin ein einfacher Text
</p>
</div>
</div>
<div class="af-step__buttons">
<div class="af-step__button-back">
<button data-target="" class="af-button button--back">
<i class="a-icon icon--arrow-back" aria-hidden="true"></i>
Button Application
</button>
</div>
<div class="af-step__button-next">
<button class="a-btn btn--conversion" type="button">Button</button>
</div>
</div>
</div>
</div>
<div class="af-outro">
<div class="af-outro__badges">
<div class="af-badge-image">
<img src="../../images/application-form/af-focus-money-krankenkasse-des-jahres.png" />
<img src="../../images/application-form/af-chip-testsieger.png" />
</div>
</div>
</div>
</div>
<div class="af-app">
<div class="af-intro">
{{ render '@af-introtext' merge=true }}
<div class="af-intro__badges">
{{ render '@af-badge-image' merge=true }}
</div>
</div>
<div class="af-steps">
<div class="af-step">
{{ render '@af-headline--h2' merge=true }}
{{ render '@af-headline--h3' merge=true }}
{{render '@af-progress-bar' merge=true }}
<div class="af-grid">
<div class="af-grid__item {{viewtypes.gridSize.half}}">
{{ render '@af-button' merge=true }}
</div>
<div class="af-grid__item {{viewtypes.gridSize.half}}">
{{ render '@af-button' merge=true }}
</div>
<div class="af-grid__item {{viewtypes.gridSize.half}}">
{{ render '@af-button' merge=true }}
</div>
<div class="af-grid__item {{viewtypes.gridSize.oneThird}} {{viewtypes.gridSize.break}}">
{{ render '@af-input' merge=true }}
</div>
<div class="af-grid__item {{viewtypes.gridSize.twoThird}}">
{{ render '@af-input' merge=true }}
</div>
<div class="af-grid__item {{viewtypes.gridSize.full}}">
{{ render '@af-input' merge=true }}
</div>
<div class="af-grid__item {{viewtypes.gridSize.full}}">
{{ render '@af-input--is-invalid' merge=true }}
</div>
</div>
<div class="af-grid grid--short">
<div class="af-grid__item {{viewtypes.gridSize.full}}">
{{ render '@af-input' merge=true }}
</div>
<div class="af-grid__item {{viewtypes.gridSize.full}}">
{{ render '@af-input' merge=true }}
</div>
<div class="af-grid__item {{viewtypes.gridSize.oneThird}}">
{{ render '@af-input' merge=true }}
</div>
<div class="af-grid__item {{viewtypes.gridSize.twoThird}}">
{{ render '@af-input' merge=true }}
</div>
<div class="af-grid__item {{viewtypes.gridSize.twoThird}}">
{{ render '@af-input' merge=true }}
</div>
<div class="af-grid__item {{viewtypes.gridSize.oneThird}}">
{{ render '@af-input' merge=true }}
</div>
</div>
<div class="af-grid grid--spacing-top">
<div class="af-grid__item {{viewtypes.gridSize.oneThird}}">
{{ render '@af-checkbox' partials.checkbox.soon merge=true }}
</div>
<div class="af-grid__item">
<p class="af-item item--text">oder</p>
</div>
<div class="af-grid__item {{viewtypes.gridSize.half}}">
{{ render '@af-datepicker' merge=true }}
</div>
</div>
{{ render '@af-infobox' merge=true }}
<fieldset class="af-fieldset">
{{ render '@af-legend' merge=true }}
<div class="af-grid">
<div class="af-grid__item {{viewtypes.gridSize.full}}">
{{ render '@af-radio' partials.radios.radio1 merge=true }}
</div>
<div class="af-grid__item {{viewtypes.gridSize.full}}">
{{ render '@af-radio' partials.radios.radio2 merge=true }}
</div>
<div class="af-grid__item {{viewtypes.gridSize.full}}">
{{ render '@af-radio' partials.radios.radio3 merge=true }}
</div>
</div>
</fieldset>
<fieldset class="af-fieldset">
{{ render '@af-legend' merge=true }}
<div class="af-item-group is-invalid">
<div class="af-grid">
<div class="af-grid__item {{viewtypes.gridSize.full}}">
{{ render '@af-radio' partials.radios.radio4 merge=true }}
</div>
<div class="af-grid__item {{viewtypes.gridSize.full}}">
{{ render '@af-radio' partials.radios.radio5 merge=true }}
</div>
<div class="af-grid__item {{viewtypes.gridSize.full}}">
{{ render '@af-radio' partials.radios.radio6 merge=true }}
</div>
</div>
{{ render '@af-error' merge=true }}
</div>
</fieldset>
<fieldset class="af-fieldset">
{{ render '@af-legend' merge=true }}
<div class="af-grid">
<div class="af-grid__item {{viewtypes.gridSize.half}}">
{{ render '@af-radio' partials.radios.radio7 merge=true }}
</div>
<div class="af-grid__item {{viewtypes.gridSize.half}}">
{{ render '@af-radio' partials.radios.radio8 merge=true }}
</div>
</div>
</fieldset>
<div class="af-grid grid--spacing-top">
<div class="af-grid__item {{viewtypes.gridSize.full}}">
{{ render '@af-headline--h4' merge=true }}
{{ render '@af-paragraph' merge=true }}
</div>
</div>
<div class="af-step__buttons">
<div class="af-step__button-back">
{{ render '@af-button--back' merge=true }}
</div>
<div class="af-step__button-next">
{{ render '@button--conversion' merge=true }}
</div>
</div>
</div>
</div>
<div class="af-outro">
<div class="af-outro__badges">
{{ render '@af-badge-image' merge=true }}
</div>
</div>
</div>
{
"switches": {},
"viewtypes": {
"gridSize": {
"oneThird": "grid__item--2",
"half": "grid__item--3",
"twoThird": "grid__item--4",
"full": "grid__item--6",
"break": "grid__item--break"
}
},
"content": {},
"partials": {
"checkbox": {
"soon": {
"partials": {
"listitems": [
{
"viewtypes": {},
"checkbox": {
"viewtypes": {
"specifier": "af-choice choice--checkbox"
},
"content": {
"id": "checkbox-1",
"name": "checkbox1",
"text": "sobald wie möglich"
}
}
}
]
}
}
},
"radios": {
"radio1": {
"partials": {
"radio": {
"content": {
"id": "radio1",
"subtext": "Subtext radio 1"
}
}
}
},
"radio2": {
"partials": {
"radio": {
"content": {
"id": "radio2",
"subtext": "Subtext radio 2 Nullam quis risus eget urna mollis ornare vel eu leo"
}
}
}
},
"radio3": {
"partials": {
"radio": {
"content": {
"id": "radio3"
}
}
}
},
"radio4": {
"partials": {
"radio": {
"content": {
"id": "radio4",
"name": "radioerror"
}
}
}
},
"radio5": {
"partials": {
"radio": {
"content": {
"id": "radio5",
"name": "radioerror"
}
}
}
},
"radio6": {
"partials": {
"radio": {
"content": {
"id": "radio6",
"name": "radioerror"
}
}
}
},
"radio7": {
"partials": {
"radio": {
"content": {
"id": "radio7",
"name": "radiohalf",
"subtext": "Subtext radio 7 Nullam quis risus eget urna mollis ornare vel eu leo"
}
}
}
},
"radio8": {
"partials": {
"radio": {
"content": {
"id": "radio8",
"name": "radiohalf",
"subtext": "Subtext radio 8"
}
}
}
}
}
}
}
No notes defined.