Freie Grundschule Pfefferwerk - Frontend Design

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>
 
<header class="c-header u-color-bg:g1 {{spaceAfter}}">

    <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">
                    {{render '@logo'}}
                </div>
                <div class="o-grid__col:10">
                    {{render '@site-header'}}
                </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">
                    {{render '@menu-main' menuMainData merge=true}}
                </div>
            </div>
        </div>

    </div>

</header>
 
{
  "spaceAfter": "o-space-b:small"
}

There are no notes for this item.