Freie Grundschule Pfefferwerk - Frontend Design

Two Columns 

<!--
    @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">
                        &nbsp;
                    </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" aria-current="true">Schule</a>
                                </li>
                                <li class="c-menu-main__item" role="menuitem">
                                    <a href="#" class="c-menu-main__link">Konzept</a>
                                </li>
                                <li class="c-menu-main__item" role="menuitem">
                                    <a href="#" class="c-menu-main__link">Team</a>
                                </li>
                                <li class="c-menu-main__item" role="menuitem">
                                    <a href="#" class="c-menu-main__link">Träger</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">

        <!-- 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
                    </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
                    </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 "@default"}}

    {{#content "content"}}

        <main class="c-main">

            {{#menuBreadcrumb}}
                <div class="o-grid">
                    <div class="o-grid__row">
                        <div class="o-grid__col:12">
                            {{render '@menu-breadcrumb' menuBreadcrumbData merge=true}}
                        </div>
                    </div>
                </div>
            {{/menuBreadcrumb}}

            <!-- 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">
                            {{#block "mainContent"}}
                                main content
                            {{/block}}
                        </article>
                    </div>

                    <div class="o-grid__col:12 o-grid__col:3@lg o-grid__col--offset:1@lg">
                        <aside class="c-main__aside">
                            {{#block "asideContent"}}
                                aside content
                            {{/block}}
                        </aside>
                    </div>

                </div>
            </div>
        </main>

    {{/content}}

{{/extend}}
 
{
  "headerData": {
    "logoData": {
      "logoLink": null
    },
    "menuTopicsData": {
      "menuMainItems": [
        {
          "current": null
        }
      ]
    }
  },
  "menuBreadcrumb": null
}

There are no notes for this item.