# Header Module

## ATP Header (keine Veranstaltung ausgewählt)

Der Schlagschatten ist beim normalen Einsatz nur unter dem Modul zu sehen, es sollte auf 100% Breite laufen und oben auf der Seite sitzen.

Benutzt auf 02.choose-event.html.

## Ausstellerticketingportal

Messe Frankfurt

    <!-- src/frontend/templates/modules/header-atp.twig -->
    <header class="atp-header bg-default">
        <div class="wrapper is-clearfix is-relative">
            <h2>
                <a href="" class="color-default">
                    Ausstellerticketingportal
                </a>
            </h2>

            <div class="logo">
                Messe Frankfurt
            </div>

            <ul class="atp-primary-navigation is-clearfix">

                    <li class="color-light">
                        <a href="index.html" class="color-light color-light-darker-hover primary-link">Link 1</a>
                    </li>

                    <li class="language-chooser">
                        <form name="language-chooser" method="post" action="../dummy/php/proxy.php">
                            <span class="no-border color-light language-chooser">
                                <select name="language" class="select2 basic-select submit-on-change">

                                        <option value="de">Deutsch</option>

                                        <option value="en">English</option>

                                        <option value="es">Español</option>

                                        <option value="fr">Français</option>

                                        <option value="jp">日本語</option>

                                </select>
                            </span>
                        </form>
                    </li>

            </ul>
            <div class="hamburger">
                <span class="hamburger-box">
                    <span class="hamburger-inner"></span>
                </span>
            </div>
        </div>
    </header>

## Veranstaltungs-Header

Eingesetzt auf 03.choose-booth.html.

Automechanika Frankfurt
24. － 27.12.2016, Frankfurt am Main

    <!-- src/frontend/templates/modules/header-event.twig -->
    <header class="atp-header-event bg-color-event">
        <div class="wrapper is-clearfix is-relative">
            <div class="event-signature">
                <div class="event-logo" style="background-image: url(../resources/svg/logos/automechanika-ffm-white.svg)">Automechanika Frankfurt</div>
                <div class="event-date-location">24. － 27.12.2016, Frankfurt am Main</div>
            </div>

        </div>
    </header>

## Veranstaltungs-Header mit Reiternavigation

Eingesetzt auf 04.dashboard.html.

Automechanika Frankfurt
24. － 27.12.2016, Frankfurt am Main
Halle 10.4, B01

- Aktiver Reiter
- Reiter 2
- Reiter 3

    <!-- src/frontend/templates/modules/header-event.twig -->
    <header class="atp-header-event bg-color-event">
        <div class="wrapper is-clearfix is-relative has-tabs">
            <div class="event-signature">
                <div class="event-logo" style="background-image: url(../resources/svg/logos/automechanika-ffm-white.svg)">Automechanika Frankfurt</div>
                <div class="event-date-location">24. － 27.12.2016, Frankfurt am Main</div>
            </div>

                <div class="event-booth">

                        <span class="button-booth-small">
                            Halle 10.4, B01
                        </span>

                </div>

                <div class="event-tabs-wrapper">
                    <ul class="event-tabs">

                            <li>
                                <a href="04.dashboard.html" class="bg-color-event-darker bg-color-event-darker-hover active">
                                    Aktiver Reiter
                                </a>
                            </li>

                            <li>
                                <a href="07.listing.html" class="bg-color-event-darker bg-color-event-darker-hover">
                                    Reiter 2
                                </a>
                            </li>

                            <li>
                                <a href="07.listing.html" class="bg-color-event-darker bg-color-event-darker-hover">
                                    Reiter 3
                                </a>
                            </li>

                    </ul>
                </div>

        </div>
    </header>

## Content Header

Kombination aus Headline 1 und optionalen Button mit Icon.

Eingesetzt auf 08.ticket-listing.html.

# Meine Austellertickets
Sie haben 8 Tickets vergeben.

Tickets erstellen

    <!-- src/frontend/templates/modules/content-header.twig -->
    <div class="content-header">

    <!-- src/frontend/templates/elements/headlines/headline-h1.twig -->
    <h1>
        Meine Austellertickets
        <br />
            <span class="font-light">Sie haben 8 Tickets vergeben.</span>

    </h1>

    <!-- src/frontend/templates/elements/buttons/button-brand.twig -->

    <a href="#" class="button button-brand bg-color-event bg-color-event-darker-hover">

            <span class="icon ticket-tilted"> </span>

            <span>Tickets erstellen</span>

    </a>

    </div>