Phoenix Reisen Styleguide
Source: src/components/_layout.scss, line 1
Example
Phoenix Reisen - Standard Header
Markup
<article class="header">
    <a href="/cdn/mein-phoenix/uebersicht/">
        <picture class="header__logo">
            <img src="./kss-assets/phx.logo.svg" />
        </picture>
    </a>
    <div class="header__version">
        Phoenix Reisen - Standard Header
    </div>
    <a href="javascript:" title="Navigation ein-/ausblenden"
        class="nav-btn header__nav-btn noprint">
        <i class="fas fa-bars"></i>
    </a>
</article>
Source: src/components/_layout.scss, line 9

650.2 #permalink Header Topbar

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Module: Mithril | React

Die Leiste ist hier aus Anpassungsgründen durch Inline-Styles static positioniert (die vor Benutzung natürlich zu entfernen sind). Ansonsten liegt sie fixed am oberen Browserrand (sticky) und erstreckt sich über die ganze Breite.

Markup
<article class="top-bar noprint top-bar--visible" style="position:static">
    <div class="wrapper wrapper--large">
        <div class="top-bar__left">
            <a href="https://phoenixreisen.com" title="zurück" class="top-bar__back-btn">
                <i class="fas fa-arrow-left"></i>
            </a>
            <a href="https://phoenixreisen.com" title="zur Startseite">
                <img src="https://phoenixreisen.com/favicon.png" class="top-bar__icon" alt="" />
                <span class="ml1">Phoenix Reisen App</span>
            </a>
        </div>
        <article class="top-bar__avatar">
            <a href="#" class="avatar-cta avatar-cta--topbar" title="Buchungsdaten anzeigen">
                <i class="fas fa-user avatar__symbol"></i>
            </a>
        </article>
        <a href="#" class="nav-btn top-bar__nav-btn noprint" title="Navigation ein-/ausblenden">
            <i class="fas fa-bars"></i>
        </a>
    </div>
</article>
Source: src/components/_layout.scss, line 85
Example
Markup
<footer class="footer">
    <div class="footer__media-links">
        <div class="mb1">
            <strong>Sie finden uns auch auf</strong>
        </div>
        <div class="footer__media-icons">
            <a href="https://www.phoenixreisen.com" title="Phoenix Reisen" target="_blank" rel="noopener noreferrer" class="desktop-only">
                <img src="template/kss-assets/footer-icons/phoenixreisen.jpg" alt="Phoenix Reisen Website">
            </a>
            <a href="https://de-de.facebook.com/PHXTV/" title="Phoenix Reisen TV auf Facebook" target="_blank" rel="noopener noreferrer">
                <img src="template/kss-assets/footer-icons/facebook.png" alt="Phoenix Reisen TV auf Facebook">
            </a>
            <a href="https://www.youtube.com/PhoenixreisenTV" title="Phoenix Reisen TV auf YouTube" target="_blank" rel="noopener noreferrer">
                <img src="template/kss-assets/footer-icons/youtube.png" alt="Phoenix Reisen TV auf YouTube">
            </a>
            <a href="https://www.phoenixreisen.tv/" title="Phoenix TV" target="_blank" rel="noopener noreferrer">
                <img src="template/kss-assets/footer-icons/tv.png" alt="Phoenix TV">
            </a>
            <a href="https://www.instagram.com/phoenixreisen" title="Phoenix Reisen auf Instagram" target="_blank" rel="noopener noreferrer">
                <img src="template/kss-assets/footer-icons/instagram.png" alt="Phoenix Reisen auf Instagram">
            </a>
            <a href="https://www.instagram.com/explore/tags/phoenixreisen" title="Impressionen unserer Gäste" target="_blank" rel="noopener noreferrer">
                <img src="template/kss-assets/footer-icons/insta-hashtag.png" alt="Impressionen unserer Gäste - #phoenixreisen">
            </a>
            <a href="https://twitter.com/phoenixreisen" title="Phoenix Reisen auf Twitter" target="_blank" rel="noopener noreferrer">
                <img src="template/kss-assets/footer-icons/twitter.png" alt="Phoenix Reisen auf Twitter">
            </a>
        </div>
    </div>
    <div class="mt2 tc footer__text">
        <div><small>Wir sind für Sie da</small></div>
        <div>
            <strong><a href="tel:+4922892600" title="Telefonnummer aufrufen">+49 (228) 9260-0</a></strong>
            oder über <strong><a href="https://www.phoenixreisen.com/kontakt.html" title="Kontaktformular" target="_blank" rel="noopener noreferrer">Kontaktformular</a></strong><br>
            <small>montags bis freitags von 09:00 bis 18:00 Uhr</small>
        </div>
    </div>
    <div class="wrapper wrapper--large footer__links-wrapper">
        <ul class="footer__links noprint">
            <li>
                <a href="https://www.phoenixreisen.com/profibereich.html" title="zum Reisebüro-/Profibereich">
                    <i class="fa fa-angle-right"></i> Reisebüro-/Profibereich
                </a>
            </li>
            <li>
                <a href="https://www.phoenixreisen.com/reise-und-geschaeftsbedingungen.html" title="zu unseren AGB">
                    <i class="fa fa-angle-right"></i> AGB
                </a>
            </li>
            <li>
                <a href="https://www.phoenixreisen.com/datenschutzerklaerung.html" title="zu unserer Datenschutzerklärung">
                    <i class="fa fa-angle-right"></i>Datenschutzerklärung
                </a>
            </li>
            <li>
                <a href="https://www.phoenixreisen.com/kontakt.html" title="zu unserer Kontaktseite">
                    <i class="fa fa-angle-right"></i> Kontakt
                </a>
            </li>
            <li>
                <a href="https://www.phoenixreisen.com/nutzungsbedingungen.html" title="zu unseren Nutzungsbedingungen">
                    <i class="fa fa-angle-right"></i> Nutzungsbedingungen
                </a>
            </li>
            <li>
                <a href="https://www.phoenixreisen.com/impressum.html" title="zu unserem Impressum">
                    <i class="fa fa-angle-right"></i> Impressum
                </a>
            </li>
        </ul>
        <div class="footer__logos">
            <span>
                <img src="template/kss-assets/footer-icons/DRV-Logo.png">
            </span>
            <span>
                <img src="template/kss-assets/footer-icons/QG-Logo.svg">
            </span>
        </div>
    </div>
</footer>
Source: src/components/_layout.scss, line 284