Phoenix Reisen Styleguide
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