Phoenix Reisen Styleguide
Source: src/components/_banners.scss, line 1

200.1 #permalink Überschrift

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

Eine H1-Überschrift mit Hintergrundbild, die ganz oben im Content-Bereich platziert wird.

Das Platzhalter-Bild muss im jeweiligen Projekt

  • entweder per CSS durch ein zum Content passendes Bild überschrieben werden
  • oder, falls der DS-Image-Ordner ins Projekt zeigt, im Image-Ordner hinterlegt werden (headline.jpg & headline.xl.jpg)
Example

Awesome Überschrift

Markup
<div class="headline-banner">
    <div class="wrapper wrapper--large">
        <h1>Awesome Überschrift</h1>
    </div>
</div>
Source: src/components/_banners.scss, line 9
Examples
Default styling
.share-banner--bg-less
Nur die Icons, ohne Hintergrund & Umrandung
Markup
<article class="share-banner [modifier class]">
    <div class="wrapper wrapper--large">
        <div class="tc">
            <h3 class="tc pt0">Sagen Sie es Familie & Freunden</h3>
        </div>
        <div class="share-icons tc">
            <a href="mailto:?subject=Erreichbarkeit auf hoher See&body=Beste Kreuzfahrten: https://www.phoenixreisen.com"
                title="App per Email empfehlen" class="share-email">
                <i class="fas fa-envelope"></i>
            </a>
            <a href="https://api.whatsapp.com/send?text=Beste Kreuzfahrten: https://www.phoenixreisen.com"
                title="App per WhatsApp empfehlen" class="share-whatsapp">
                <i class="fab fa-whatsapp"></i>
            </a>
            <a href="https://twitter.com/intent/tweet?text=Beste Kreuzfahrten&url=https://www.phoenixreisen.com&hashtags=WsWf"
                title="App per Twitter empfehlen" class="share-twitter">
                <i class="fab fa-twitter"></i>
            </a>
            <a href="https://www.facebook.com/sharer/sharer.php?u=https://www.phoenixreisen.com"
                title="App per Facebook empfehlen" class="share-facebook"
                rel="noopener noreferrer" target="_blank">
                <i class="fab fa-facebook-f"></i>
            </a>
            <a href="javascript:" onclick="alert('Adresse in Zwischenablage kopiert')"
                title="Adresse in Zwischenablage kopieren" class="share-clipboard"
                data-clipboard-text="Beste Kreuzfahrten überhaupt: https://www.phoenixreisen.com">
                <i class="fas fa-clipboard"></i>
            </a>
        </div>
    </div>
</article>
Source: src/components/_banners.scss, line 71
Example
Markup
<article class="link-banner">
    <div class="link-banner__textbox">
        <p>Aktuelle Infos, Schnäppchen und Aktionen immer mit als erstes erfahren!</p>
        <p class="pb0">
            <a href="https://www.phoenixreisen.com/phoenix-reisen-newsletter-anmeldung.html">
                <i class="fas fa-angle-right"></i> Newsletter abonnieren
            </a>
        </p>
    </div>
</article>
Source: src/components/_banners.scss, line 217