<!--
@int:
place directly after <body>, has to be the first focusable element
update translation for aria-label and link title if we have additional languages
-->
<nav class="c-menu-skip" aria-label="Sprunglink-Navigation">
<ul class="c-menu-skip__list" role="menu">
<li class="c-menu-skip__item" role="menuitem">
<a href="#main-menu" class="c-menu-skip__link u-typo:xl">Direkt zur Hauptnavigation</a>
</li>
<li class="c-menu-skip__item" role="menuitem">
<a href="#main-content" class="c-menu-skip__link u-typo:xl">Direkt zum Hauptinhalt</a>
</li>
</ul>
</nav>
<!-- APP Container (mainly to separate "page" from "off canvas" div) -->
<div class="c-app">
<!-- Header -->
<header class="c-header u-color-bg:g1 o-space-b:small">
<div class="c-header__row c-header__row--top u-color-bg:primary u-color-c:white">
<div class="o-grid">
<div class="o-grid__row">
<div class="o-grid__col:12">
</div>
</div>
</div>
</div>
<div class="c-header__row c-header__row--center">
<div class="o-grid">
<div class="o-grid__row">
<div class="o-grid__col:2">
<div class="c-logo u-typo:xl">
<a href="/components/preview/homepage" class="c-logo__link">
<img class="c-logo__image" src="/typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/icons/logo.svg" alt="image alt text" title="image title" role="img">
</a>
</div>
</div>
<div class="o-grid__col:10">
<div class="c-site-header">
<a href="/" class="c-site-header__link">
<span class="u-typo:xl">Freie Grundschule Pfefferwerk</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="c-header__row c-header__row--bottom">
<div class="o-grid">
<div class="o-grid__row">
<div class="o-grid__col:12">
<!--
@int:
update translation for aria-label if we have additional languages
-->
<nav id="main-menu" class="c-menu-main u-typo:l" aria-label="Haupt-Navigation">
<ul class="c-menu-main__list" role="menu">
<li class="c-menu-main__item" role="menuitem">
<a href="#" class="c-menu-main__link">Homepage</a>
</li>
<li class="c-menu-main__item" role="menuitem">
<a href="#" class="c-menu-main__link">News</a>
</li>
<li class="c-menu-main__item" role="menuitem">
<a href="#" class="c-menu-main__link">Events</a>
</li>
<li class="c-menu-main__item" role="menuitem">
<a href="#" class="c-menu-main__link" aria-current="true">Service</a>
</li>
<li class="c-menu-main__item" role="menuitem">
<a href="#" class="c-menu-main__link">Formelles</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>
<main class="c-main">
<div class="o-grid">
<div class="o-grid__row">
<div class="o-grid__col:12">
<nav class="c-breadcrumb o-space-b:small">
<ul class="c-breadcrumb__list" role="menu">
<li class="c-breadcrumb__item" role="menuitem">
<a href="#" class="c-breadcrumb__link" title="Service">Service<svg width="32px" height="32px" viewBox="0 0 32 32" class="o-icons o-icons--arrow-right" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/icons/sprite/sprite.svg#arrow-right"></use>
</svg>
</a>
</li>
<li class="c-breadcrumb__item" role="menuitem">
<a href="#" class="c-breadcrumb__link" title="Subpage">Subpage<svg width="32px" height="32px" viewBox="0 0 32 32" class="o-icons o-icons--arrow-right" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/icons/sprite/sprite.svg#arrow-right"></use>
</svg>
</a>
</li>
<li class="c-breadcrumb__item" role="menuitem">
<span title="Contact" aria-current="page">Contact</span>
</li>
</ul>
</nav>
</div>
</div>
</div>
<!-- todo: add image -->
<div class="o-grid">
<div class="o-grid__row">
<div class="o-grid__col:12 o-grid__col:10@md o-grid__col:8@lg">
<article id="main-content" class="c-main__article">
<!-- main content -->
<div id="c14" class="c-text o-space-b:default">
<h2 class="c-text__headline u-typo:xl">Contact</h2>
<p class="u-typo:l">Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
<div class="c-text__text">Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed
semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</div>
</div>
<form class="c-form o-space-b:default">
<!-- input text examples -->
<fieldset class="c-form__fieldset">
<legend class="c-form__legend u-typo:l">Fieldset</legend>
<div class="c-form__group ">
<!--
@int:
to provide accessibility always provide labels,
if we have to hide them add u-visually-hidden class
-->
<label class="c-form__label " for="input-text-label-1">
Feld-Bezeichnung
</label>
<div class="c-form__input-container">
<input id="input-text-label-1" type="text" placeholder="Platzhaltertext" class="c-form__input">
</div>
</div>
<div class="c-form__group ">
<!--
@int:
to provide accessibility always provide labels,
if we have to hide them add u-visually-hidden class
-->
<label class="c-form__label " for="input-text-label-2">
Feld-Bezeichnung <span class="c-form__required" title="Pflichtfeld">*</span>
</label>
<div class="c-form__input-container">
<input aria-describedby="input-text-description-2" id="input-text-label-2" type="text" class="c-form__input" required>
</div>
<!--
@int:
if we have additional field description
add aria-describedby to field and id to description text c-form__msg
-->
<p id="input-text-description-2" class="c-form__msg u-typo:s">Platz für Hinweistext...</p>
</div>
<div class="c-form__group ">
<!--
@int:
to provide accessibility always provide labels,
if we have to hide them add u-visually-hidden class
-->
<label class="c-form__label " for="input-text-label-3">
Feld-Bezeichnung <span class="c-form__required" title="Pflichtfeld">*</span>
</label>
<div class="c-form__input-container">
<input aria-describedby="input-text-description-3" id="input-text-label-3" type="text" class="c-form__input" required>
<span class="c-form__icon" aria-hidden="true"><i class="o-icons o-icons--email" aria-hidden="true"></i>
</span>
</div>
<!--
@int:
if we have additional field description
add aria-describedby to field and id to description text c-form__msg
-->
<p id="input-text-description-3" class="c-form__msg u-typo:s">Feld mit Icon</p>
</div>
<div class="c-form__group ">
<!--
@int:
to provide accessibility always provide labels,
if we have to hide them add u-visually-hidden class
-->
<label class="c-form__label u-visually-hidden" for="input-text-label-4">
Feld-Bezeichnung
</label>
<div class="c-form__input-container">
<input aria-describedby="input-text-description-4" id="input-text-label-4" type="text" placeholder="Platzhaltertext" class="c-form__input">
</div>
<!--
@int:
if we have additional field description
add aria-describedby to field and id to description text c-form__msg
-->
<p id="input-text-description-4" class="c-form__msg u-typo:s">Feld mit versteckter Bezeichnung</p>
</div>
<div class="c-form__group is-error">
<!--
@int:
to provide accessibility always provide labels,
if we have to hide them add u-visually-hidden class
-->
<label class="c-form__label " for="input-text-label-5">
Feld-Bezeichnung <span class="c-form__required" title="Pflichtfeld">*</span>
</label>
<div class="c-form__input-container">
<input aria-describedby="input-text-description-5" id="input-text-label-5" type="text" placeholder="Platzhaltertext" class="c-form__input" required value="Eingabe fehlerhaft">
</div>
<!--
@int:
if we have additional field description
add aria-describedby to field and id to description text c-form__msg
-->
<p id="input-text-description-5" class="c-form__msg u-typo:s">Hinweistext mit Fehlerbeschreibung</p>
</div>
<div class="c-form__group is-valid">
<!--
@int:
to provide accessibility always provide labels,
if we have to hide them add u-visually-hidden class
-->
<label class="c-form__label " for="input-text-label-6">
Feld-Bezeichnung <span class="c-form__required" title="Pflichtfeld">*</span>
</label>
<div class="c-form__input-container">
<input aria-describedby="input-text-description-6" id="input-text-label-6" type="text" placeholder="Platzhaltertext" class="c-form__input" required value="Eingabe valide">
</div>
<!--
@int:
if we have additional field description
add aria-describedby to field and id to description text c-form__msg
-->
<p id="input-text-description-6" class="c-form__msg u-typo:s">Möglicher Text bei korrekter Eingabe</p>
</div>
<div class="c-form__group">
<div class="c-form__required-container u-typo:s">
<span class="c-form__required" title="Pflichtfeld">*</span>
<span class="c-form__msg">Pflichtfeld bitte ausfüllen</span>
</div>
</div>
<div class="c-form__group">
<button class="c-button c-button--primary" type="submit" value="send">
Absenden
</button>
<button class="c-button c-button--ghost" type="reset" value="reset">
Zurücksetzen
</button>
</div>
</fieldset>
<!-- select/ textarea example -->
<fieldset class="c-form__fieldset">
<legend class="c-form__legend u-typo:l">Fieldset</legend>
<div class="c-form__group ">
<label class="c-form__label " for="select-label-1">
Feld-Bezeichnung <span class="c-form__required" title="Pflichtfeld">*</span>
</label>
<div class="c-form__input-container">
<select aria-describedby="select-description-1" id="select-label-1" class="c-form__input">
<option value="" disabled selected>Bitte wählen Sie eine Option</option>
<option value="Option One">Option eins</option>
<option value="Option Two">Option zwei</option>
<option value="Option Three">Option drei</option>
</select>
<div class="c-form__select-arrow" aria-hidden="true"></div>
</div>
<!--
@int:
if we have additional field description
add aria-describedby to field and id to description text c-form__msg
-->
<p id="select-description-1" class="c-form__msg u-typo:s">Platz für Hinweistext</p>
</div>
<div class="c-form__group ">
<label class="c-form__label " for="textarea-label-1">
Feld-Bezeichnung <span class="c-form__required" title="Pflichtfeld">*</span>
</label>
<div class="c-form__input-container">
<textarea aria-describedby="textarea-description-1" name="textarea-label-1" id="textarea-label-1" placeholder="Ihr Feedback..." class="c-form__input" required></textarea>
</div>
<!--
@int:
if we have additional field description
add aria-describedby to field and id to description text c-form__msg
-->
<p id="textarea-description-1" class="c-form__msg u-typo:s">Platz für Hinweistext</p>
</div>
<div class="c-form__group">
<p class="c-form__text">Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
</div>
<div class="c-form__group">
<div class="c-form__required-container u-typo:s">
<span class="c-form__required" title="Pflichtfeld">*</span>
<span class="c-form__msg">Pflichtfeld bitte ausfüllen</span>
</div>
</div>
<div class="c-form__group">
<button class="c-button c-button--primary" type="submit" value="send">
Absenden
</button>
<button class="c-button c-button--ghost" type="reset" value="reset">
Zurücksetzen
</button>
</div>
</fieldset>
<!-- checkbox/ radio button example -->
<fieldset class="c-form__fieldset">
<legend class="c-form__legend u-typo:l">Fieldset</legend>
<div class="c-form__group ">
<!--
@int:
provide nested fieldset and legend for each list
-->
<fieldset class="c-form__fieldset c-form__checkfields">
<legend class="c-form__legend">Bezeichnung für Checkboxen</legend>
<ul class="c-checkfields-list">
<li class="c-checkfields-list__item">
<input id="input-checkbox-label-1" type="checkbox" name="input-checkbox-name-1" checked>
<label for="input-checkbox-label-1">Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</label>
</li>
<li class="c-checkfields-list__item">
<input id="input-checkbox-label-2" type="checkbox" name="input-checkbox-name-1">
<label for="input-checkbox-label-2">Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</label>
</li>
</ul>
</fieldset>
</div>
<div class="c-form__group ">
<!--
@int:
provide nested fieldset and legend for each list
-->
<fieldset class="c-form__fieldset c-form__checkfields">
<legend class="c-form__legend">Bezeichnung für Radio-Buttons</legend>
<ul class="c-checkfields-list">
<li class="c-checkfields-list__item">
<input id="input-radio-label-1" type="radio" name="input-radio-name-1" checked>
<label for="input-radio-label-1">Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</label>
</li>
<li class="c-checkfields-list__item">
<input id="input-radio-label-2" type="radio" name="input-radio-name-1">
<label for="input-radio-label-2">Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</label>
</li>
</ul>
</fieldset>
</div>
<div class="c-form__group ">
<!-- single checkbox -->
<div class="c-form__checkfields">
<input id="input-checkbox-label-3" type="checkbox" name="input-checkbox-name-3">
<label for="input-checkbox-label-3">Lorem ipsum dolor sit amet consectetur adipisicing elit.</label>
</div>
</div>
<div class="c-form__group">
<button class="c-button c-button--primary" type="submit" value="send">
Absenden
</button>
<button class="c-button c-button--ghost" type="reset" value="reset">
Zurücksetzen
</button>
</div>
</fieldset>
</form>
</article>
</div>
<div class="o-grid__col:12 o-grid__col:3@lg o-grid__col--offset:1@lg">
<aside class="c-main__aside">
<!-- aside content -->
<nav class="c-menu-sub o-space-b:default" aria-label="Sub-Navigation">
<h3 class="c-menu-sub__headline u-typo:l">Service</h3>
<ul class="c-menu-sub__list" role="menu">
<li class="c-menu-sub__item c-menu-sub__list--lvl1 is-active" role="menuitem">
<a href="#" class="c-menu-sub__link c-menu-sub__link--lvl1">Subpage</a>
<ul class="c-menu-sub__list c-menu-sub__list--lvl2" role="menu">
<li class="c-menu-sub__item c-menu-sub__item--lvl2 is-current" role="menuitem">
<span class="c-menu-sub__link c-menu-sub__link--lvl2" aria-current="true">Contact</span>
</li>
<li class="c-menu-sub__item c-menu-sub__item--lvl2" role="menuitem">
<a href="#" class="c-menu-sub__link c-menu-sub__link--lvl2">Subpage</a>
</li>
</ul>
</li>
<li class="c-menu-sub__item c-menu-sub__list--lvl1 " role="menuitem">
<a href="#" class="c-menu-sub__link c-menu-sub__link--lvl1">Aliquam tincidunt</a>
</li>
<li class="c-menu-sub__item c-menu-sub__list--lvl1 " role="menuitem">
<a href="#" class="c-menu-sub__link c-menu-sub__link--lvl1">Aliquam tincidunt</a>
</li>
<li class="c-menu-sub__item c-menu-sub__list--lvl1 " role="menuitem">
<a href="#" class="c-menu-sub__link c-menu-sub__link--lvl1">Aliquam tincidunt</a>
</li>
</ul>
</nav>
</aside>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="c-footer">
<div class="c-footer__row c-footer__row--top u-color-bg:g1">
<div class="o-grid">
<div class="o-grid__row">
<div class="o-grid__col:12 o-grid__col:6@md">
<nav class="c-menu-meta" aria-label="Footer-Navigation">
<ul class="c-menu-meta__list" role="menu">
<li class="c-menu-meta__item" role="menuitem">
<a href="#" class="c-menu-meta__link">Imprint</a>
</li>
<li class="c-menu-meta__item" role="menuitem">
<a href="#" class="c-menu-meta__link">Contact</a>
</li>
<li class="c-menu-meta__item" role="menuitem">
<a href="#" class="c-menu-meta__link">Privacy</a>
</li>
<li class="c-menu-meta__item" role="menuitem">
<a href="#" class="c-menu-meta__link">Sitemap</a>
</li>
</ul>
</nav>
</div>
<div class="o-grid__col:12 o-grid__col:6@md">
<!--
@int:
link title required due to accessibility
-->
<nav class="c-menu-social" aria-label="Social-Navigation">
<ul class="c-menu-social__list" role="menu">
<li class="c-menu-social__item" role="menuitem">
<a href="#" class="c-menu-social__link" title="besuchen sie uns auf instagram">
<svg width="32px" height="32px" viewBox="0 0 32 32" class="o-icons o-icons--instagram" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/icons/sprite/sprite.svg#instagram"></use>
</svg>
</a>
</li>
<li class="c-menu-social__item" role="menuitem">
<a href="#" class="c-menu-social__link" title="besuchen sie uns auf youtube">
<svg width="32px" height="32px" viewBox="0 0 32 32" class="o-icons o-icons--youtube" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/icons/sprite/sprite.svg#youtube"></use>
</svg>
</a>
</li>
<li class="c-menu-social__item" role="menuitem">
<a href="#" class="c-menu-social__link" title="besuchen sie uns auf twitter">
<svg width="32px" height="32px" viewBox="0 0 32 32" class="o-icons o-icons--twitter" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/icons/sprite/sprite.svg#twitter"></use>
</svg>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<div class="c-footer__row c-footer__row--bottom u-color-bg:primary u-color-c:white">
<div class="o-grid">
<div class="o-grid__row">
<div class="o-grid__col:12">
<p><small>Copyright © 2018 Freie Grundschule Pfefferwerk</small></p>
</div>
</div>
</div>
</div>
</footer>
<div class="c-cookie-disclaimer js-cookie-disclaimer">
<!--
@int:
update cookie disclaimer text if we have additional languages
-->
<div class="o-grid">
<div class="o-grid__row">
<div class="o-grid__col:12">
<div class="c-cookie-disclaimer__inner">
<p class="c-cookie-disclaimer__text">
Wir verwenden Cookies, um die angebotenen Funktionen für Sie zu verbessern und auf Sie zugeschnittene Inhalte bieten zu können. Indem Sie mit der Navigation auf unserer Website fortfahren, erklären Sie sich mit der Verwendung von Cookies einverstanden.
</p>
<button class="c-button c-button--secondary c-cookie-disclaimer__button js-cookie-disclaimer-toggle">
OK
</button>
</div>
</div>
</div>
</div>
</div>
</div>
{{#extend "@two-columns"}}
{{#content "mainContent"}}
<!-- main content -->
{{render '@ce-text' ceTextIntroData merge=true}}
{{render '@form-example'}}
{{/content}}
{{#content "asideContent"}}
<!-- aside content -->
{{render '@menu-sub' menuSubData merge=true}}
{{/content}}
{{/extend}}
{
"headerData": {
"menuMainData": {
"menuMainItems": [
{
"current": null,
"title": "Homepage",
"url": "#"
},
{
"title": "News",
"url": "#"
},
{
"title": "Events",
"url": "#"
},
{
"current": true,
"title": "Service",
"url": "#"
}
]
}
},
"menuBreadcrumb": true,
"menuBreadcrumbData": {
"breadcrumbItems": [
"Service",
"Subpage"
],
"breadcrumbCurrent": "Contact"
},
"ceTextIntroData": {
"intro": true,
"title": "Contact",
"introText": true
},
"menuSubData": {
"headline": "Service",
"menuSubItems": [
{
"active": true,
"current": true,
"title": "Subpage",
"titleCurrent": "Contact",
"url": "#"
},
{
"title": "Aliquam tincidunt",
"url": "#"
},
{
"title": "Aliquam tincidunt",
"url": "#"
},
{
"title": "Aliquam tincidunt",
"url": "#"
}
]
}
}
There are no notes for this item.