Phoenix Reisen Styleguide
Source: src/vendors/_phoenix.scss, line 1
Example
Phoenix Reisen - Standard Header
Markup
<article class="phx-header">
    <a href="/cdn/mein-phoenix/uebersicht/">
        <picture class="phx-header__logo">
            <img src="./kss-assets/phx.logo.svg" />
        </picture>
    </a>
    <div class="phx-header__version">
        Phoenix Reisen - Standard Header
    </div>
</article>
Source: src/vendors/_phoenix.scss, line 9
Example
Markup
<article>
    <span style="display:inline-block; vertical-align: middle; margin-right: 1rem"> <!-- span kann weg -->
        <a href="#" class="avatar-cta" title="Buchungsdaten anzeigen">
            <i class="fas fa-user avatar__symbol"></i>
        </a>
    </span>
    <span style="display:inline-block; vertical-align: middle; margin-left: 1rem"> <!-- span kann weg -->
        <a href="#" class="nav-btn noprint" title="Navigation ein-/ausblenden">
            <i class="fas fa-bars"></i>
        </a>
    </span>
</article>
Source: src/vendors/_phoenix.scss, line 78

3000.3 #permalink Sticky Topbar

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

Module: Mithril mit Demo

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 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/vendors/_phoenix.scss, line 156
Example
Markup
<footer class="phx-footer">
    <div class="social-media">
        <div class="mb1">
            <strong>Sie finden uns auch auf</strong>
        </div>
        <div class="social-media__icons">
            <a href="https://www.phoenixreisen.com" title="Phoenix Reisen" target="_blank" rel="noopener noreferrer" class="social-media__icon 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" class="social-media__icon">
                <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" class="social-media__icon">
                <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" class="social-media__icon">
                <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" class="social-media__icon">
                <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" class="social-media__icon">
                <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" class="social-media__icon">
                <img src="template/kss-assets/footer-icons/twitter.png" alt="Phoenix Reisen auf Twitter">
            </a>
        </div>
    </div>
    <div class="social-contact mt2 tc">
        <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 phx-footer__wrapper">
        <ul class="phx-footer__menu noprint">
            <li class="phx-footer__menu-item">
                <a href="https://www.phoenixreisen.com/profibereich.html" title="zum Reisebüro-/Profibereich" class="phx-footer__menu-link">
                    <i class="fa fa-angle-right"></i> Reisebüro-/Profibereich
                </a>
            </li>
            <li class="phx-footer__menu-item">
                <a href="https://www.phoenixreisen.com/reise-und-geschaeftsbedingungen.html" title="zu unseren AGB" class="phx-footer__menu-link">
                    <i class="fa fa-angle-right"></i> AGB
                </a>
            </li>
            <li class="phx-footer__menu-item">
                <a href="https://www.phoenixreisen.com/datenschutzerklaerung.html" title="zu unserer Datenschutzerklärung" class="phx-footer__menu-link">
                    <i class="fa fa-angle-right"></i>Datenschutzerklärung
                </a>
            </li>
            <li class="phx-footer__menu-item">
                <a href="https://www.phoenixreisen.com/kontakt.html" title="zu unserer Kontaktseite" class="phx-footer__menu-link">
                    <i class="fa fa-angle-right"></i> Kontakt
                </a>
            </li>
            <li class="phx-footer__menu-item">
                <a href="https://www.phoenixreisen.com/nutzungsbedingungen.html" title="zu unseren Nutzungsbedingungen" class="phx-footer__menu-link">
                    <i class="fa fa-angle-right"></i> Nutzungsbedingungen
                </a>
            </li>
            <li class="phx-footer__menu-item">
                <a href="https://www.phoenixreisen.com/impressum.html" title="zu unserem Impressum" class="phx-footer__menu-link">
                    <i class="fa fa-angle-right"></i> Impressum
                </a>
            </li>
        </ul>
        <div class="phx-footer__logos">
            <span class="phx-footer__logo">
                <img src="template/kss-assets/footer-icons/DRV-Logo.png">
            </span>
            <span class="phx-footer__logo">
                <img src="template/kss-assets/footer-icons/QG-Logo.svg">
            </span>
        </div>
    </div>
</footer>
Source: src/vendors/_phoenix.scss, line 353