<!--
@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="Components Overview" aria-current="page">Components Overview</span>
</li>
</ul>
</nav>
</div>
</div>
</div>
<!-- todo: add image -->
<article id="main-content" class="c-main__article">
<!-- main content -->
<div class="o-grid">
<div class="o-grid__row o-grid__row--center">
<div class="o-grid__col:12 o-grid__col:8@md">
<div id="c14" class="c-text o-space-b:default">
<h2 class="c-text__headline u-typo:xl">Page-Title</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>
</div>
</div>
</div>
<section class="c-section u-color-bg:g1">
<!--
@int:
optional colored class: u-color-bg:g1
section width: "wide" o-grid__col:12, "narrow" o-grid__col:12 o-grid__col:8@md
-->
<div class="c-section__grid o-grid">
<div class="c-section__row o-grid__row o-grid__row--center">
<div class="c-section__col o-grid__col:12 o-grid__col:8@md ">
<div class="c-media o-space-b:default">
<h2 class="u-typo:xl">Media Container</h2>
<div class="c-media__content u-aspect-ratio-16x9">
<!-- example youtube video -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/bNCzbzypWXY?rel=0"></iframe>
</div>
<figure class="c-figure">
<figcaption class="c-media__figcaption u-typo:s">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.</figcaption>
</figure>
</div>
<div id="c14" class="c-text o-space-b:default">
<h2 class="c-text__headline u-typo:xl">Text</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>
<div class="c-text-media c-text-media--above o-space-b:default">
<h2 class="c-text-media__headline u-typo:xl">Text Media: image above</h2>
<div class="c-text-media__content">
<div class="c-text-media__image">
<figure class="c-figure">
<div class="c-figure__inner">
<!--
@int:
aspect ratio of images 16:9
-->
<!--
todo: lightbox JS
@int:
lightbox image: set image max-width to 1280px
-->
<a href="/typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/images/test-images/img_16x9_1280x720.png" class="c-figure__link js-lightbox-trigger" title="image title" data-description="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.">
<picture>
<!--[if IE 9]>
<video style="display: none;"><![endif]-->
<!--
@int:
set image max-width to 950px
-->
<source media="(min-width: 700px)" srcset="/typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/images/test-images/img_16x9_1280x720.png">
<!--
@int:
set image max-width to 640px
-->
<source media="(min-width: 350px)" srcset="/typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/images/test-images/img_16x9_640x360.png">
<!--
@int:
set image max-width to 320px
-->
<source srcset="/typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/images/test-images/img_16x9_320x180.png">
<!--[if IE 9]></video><![endif]-->
<!--
@int:
set image max-width to 950px
-->
<img src="/typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/images/test-images/img_16x9_1280x720.png" alt="image alt text" title="image title">
</picture>
<div class="c-figure__copyright u-typo:s">Copyright © 2018 Freie Grundschule Pfefferwerk</div>
</a>
</div>
<figcaption class="c-figure__figcaption u-typo:s">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.</figcaption>
</figure>
</div>
<div class="c-text-media__text">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.</p>
<p>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>
<p>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.</p>
<p>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.</p>
</div>
</div>
</div>
<div class="c-text-media c-text-media--below o-space-b:default">
<h2 class="c-text-media__headline u-typo:xl">Text Media: image below</h2>
<div class="c-text-media__content">
<div class="c-text-media__text">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.</p>
<p>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>
<p>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.</p>
</div>
<div class="c-text-media__image">
<figure class="c-figure">
<div class="c-figure__inner">
<!--
@int:
aspect ratio of images 16:9
-->
<!--
todo: lightbox JS
@int:
lightbox image: set image max-width to 1280px
-->
<a href="/typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/images/test-images/img_16x9_1280x720.png" class="c-figure__link js-lightbox-trigger" title="image title" data-description="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.">
<picture>
<!--[if IE 9]>
<video style="display: none;"><![endif]-->
<!--
@int:
set image max-width to 950px
-->
<source media="(min-width: 700px)" srcset="/typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/images/test-images/img_16x9_1280x720.png">
<!--
@int:
set image max-width to 640px
-->
<source media="(min-width: 350px)" srcset="/typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/images/test-images/img_16x9_640x360.png">
<!--
@int:
set image max-width to 320px
-->
<source srcset="/typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/images/test-images/img_16x9_320x180.png">
<!--[if IE 9]></video><![endif]-->
<!--
@int:
set image max-width to 950px
-->
<img src="/typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/images/test-images/img_16x9_1280x720.png" alt="image alt text" title="image title">
</picture>
<div class="c-figure__copyright u-typo:s">Copyright © 2018 Freie Grundschule Pfefferwerk</div>
</a>
</div>
<figcaption class="c-figure__figcaption u-typo:s">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.</figcaption>
</figure>
</div>
</div>
</div>
<div class="c-text-media c-text-media--left o-space-b:default">
<h2 class="c-text-media__headline u-typo:xl">Text Media: image left</h2>
<div class="c-text-media__content">
<div class="c-text-media__image">
<figure class="c-figure">
<div class="c-figure__inner">
<!--
@int:
aspect ratio of images 16:9
-->
<!--
todo: lightbox JS
@int:
lightbox image: set image max-width to 1280px
-->
<a href="/typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/images/test-images/img_16x9_1280x720.png" class="c-figure__link js-lightbox-trigger" title="image title" data-description="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.">
<picture>
<!--[if IE 9]>
<video style="display: none;"><![endif]-->
<!--
@int:
set image max-width to 320px
-->
<source srcset="/typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/images/test-images/img_16x9_320x180.png">
<!--[if IE 9]></video><![endif]-->
<!--
@int:
set image max-width to 320px
-->
<img src="/typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/images/test-images/img_16x9_320x180.png" alt="image alt text" title="image title">
</picture>
<div class="c-figure__copyright u-typo:s">Copyright © 2018 Freie Grundschule Pfefferwerk</div>
</a>
</div>
<figcaption class="c-figure__figcaption u-typo:s">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.</figcaption>
</figure>
</div>
<div class="c-text-media__text">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.</p>
<p>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>
<p>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.</p>
<p>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.</p>
</div>
</div>
</div>
<div class="c-text-media c-text-media--right o-space-b:default">
<h2 class="c-text-media__headline u-typo:xl">Text Media: image right</h2>
<div class="c-text-media__content">
<div class="c-text-media__image">
<figure class="c-figure">
<div class="c-figure__inner">
<!--
@int:
aspect ratio of images 16:9
-->
<!--
todo: lightbox JS
@int:
lightbox image: set image max-width to 1280px
-->
<a href="/typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/images/test-images/img_16x9_1280x720.png" class="c-figure__link js-lightbox-trigger" title="image title" data-description="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.">
<picture>
<!--[if IE 9]>
<video style="display: none;"><![endif]-->
<!--
@int:
set image max-width to 320px
-->
<source srcset="/typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/images/test-images/img_16x9_320x180.png">
<!--[if IE 9]></video><![endif]-->
<!--
@int:
set image max-width to 320px
-->
<img src="/typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/images/test-images/img_16x9_320x180.png" alt="image alt text" title="image title">
</picture>
<div class="c-figure__copyright u-typo:s">Copyright © 2018 Freie Grundschule Pfefferwerk</div>
</a>
</div>
<figcaption class="c-figure__figcaption u-typo:s">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.</figcaption>
</figure>
</div>
<div class="c-text-media__text">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.</p>
<p>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>
<p>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.</p>
<p>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.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="c-section ">
<!--
@int:
optional colored class: u-color-bg:g1
section width: "wide" o-grid__col:12, "narrow" o-grid__col:12 o-grid__col:8@md
-->
<div class="c-section__grid o-grid">
<div class="c-section__row o-grid__row o-grid__row--center">
<div class="c-section__col o-grid__col:12">
<h2 class="c-section__headline u-typo:xl">Section Title</h2>
<div class="c-table-wrapper o-space-b:default">
<table class="c-table c-table--striped">
<thead class="c-table__head">
<tr class="c-table__row-th">
<th class="c-table__cell-th">Arbitrary Data</th>
<th class="c-table__cell-th">First Name</th>
<th class="c-table__cell-th">Last Name</th>
<th class="c-table__cell-th">Favorite Color</th>
<th class="c-table__cell-th">Dream Vacation City</th>
</tr>
</thead>
<tbody class="c-table__body">
<tr class="c-table__row">
<td class="c-table__cell" data-label="Arbitrary Data">Lorem ipsum dolor sit amet</td>
<td class="c-table__cell" data-label="First Name">Andronicus</td>
<td class="c-table__cell" data-label="Last Name">Trentemöller</td>
<td class="c-table__cell" data-label="Favorite Color">Lightgoldenrodyellow</td>
<td class="c-table__cell" data-label="Dream Vacation City">Esperantinópolis</td>
</tr>
<tr class="c-table__row">
<td class="c-table__cell" data-label="Arbitrary Data">Backpacking holiday</td>
<td class="c-table__cell" data-label="First Name">Tegan</td>
<td class="c-table__cell" data-label="Last Name">Simpson</td>
<td class="c-table__cell" data-label="Favorite Color">Rebeccapurple</td>
<td class="c-table__cell" data-label="Dream Vacation City">Bhimarayanagudi</td>
</tr>
<tr class="c-table__row">
<td class="c-table__cell" data-label="Arbitrary Data">Atlantic Ocean</td>
<td class="c-table__cell" data-label="First Name">Sahra</td>
<td class="c-table__cell" data-label="Last Name">Vincent</td>
<td class="c-table__cell" data-label="Favorite Color">Cornflowerblue</td>
<td class="c-table__cell" data-label="Dream Vacation City">Prachaksinlapakhom</td>
</tr>
<tr class="c-table__row">
<td class="c-table__cell" data-label="Arbitrary Data">Jungle</td>
<td class="c-table__cell" data-label="First Name">Simon</td>
<td class="c-table__cell" data-label="Last Name">Kalkbrenner</td>
<td class="c-table__cell" data-label="Favorite Color">Whitesmoke</td>
<td class="c-table__cell" data-label="Dream Vacation City">Cottonshopeburnfoot</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
</article>
</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 "@one-column"}}
{{#content "mainContent"}}
<!-- main content -->
<div class="o-grid">
<div class="o-grid__row o-grid__row--center">
<div class="o-grid__col:12 o-grid__col:8@md">
{{render '@ce-text' ceTextIntroData merge=true}}
</div>
</div>
</div>
{{#extend "@ce-section" narrow=true color='g1'}}
{{#content "sectionContent"}}
{{render '@ce-media'}}
{{render '@ce-text'}}
{{render '@ce-text-media--above'}}
{{render '@ce-text-media--below'}}
{{render '@ce-text-media--left'}}
{{render '@ce-text-media--right'}}
{{/content}}
{{/extend}}
{{#extend "@ce-section" narrow=false sectionHeadline='Section Title'}}
{{#content "sectionContent"}}
{{render '@ce-table'}}
{{/content}}
{{/extend}}
{{/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": "Components Overview"
},
"ceTextIntroData": {
"intro": true,
"title": "Page-Title",
"introText": true
},
"ceTextData": {
"rteSample": true
}
}
There are no notes for this item.