Teaser Marketing

Der Teaser Marketing ist in drei Variationen verfügbar und ist ausschließlich für Marketing Zwecke gedacht. Er sollte gezielt eingesetzt werden und hebt sich deutlich von den anderen Elementen der Seite ab. Die Wahl der Variation ist abhängig von der gewünschten Auffälligkeit und dem Inhalt des Marketing Teasers. Es handelt sich um ein Unterbrecherelement, das nicht mehrfach aufeinanderfolgen darf.

.modul-teaser-marketing

Version 1: Marketing Teaser (bordered)

Link 
<article class="modul-teaser-marketing bordered">
    <div class="content-container fullwidth__inner"> 
        <h3 class="title">Version 1: Marketing Teaser (bordered)</h3>
        <div class="controls"> 
            <a href="#" class="button" aria-label="Version 1: Marketing Teaser (bordered)" title="Version 1: Marketing Teaser (bordered)">Link</a>
        </div>
    </div>
</article>

Info: In the following version 2, the background image (.background-image) is optional.

Version 2: Marketing Teaser (boxed)

Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.

Link 
<article class="modul-teaser-marketing boxed fullwidth">
    <div class="background-image" aria-hidden="true">
        <div class="image__image">
            <img src="../../dummy/placeholder_4x3.jpg" alt="Alternative Bildbeschreibung" >
        </div>
    </div>
    <div class="content-container fullwidth__inner"> 
        <h3 class="title">Version 2: Marketing Teaser (boxed)</h3>
        <p class="text">
            Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.
        </p>
        <div class="controls"> 
            <a href="#" class="button" aria-label="Version 2: Marketing Teaser (boxed)" title="Version 2: Marketing Teaser (boxed)">Link</a>
        </div>
    </div>
</article>

Info: In the following version 3, the background image (.background-image) is optional.

Alternative Bildbeschreibung

@copyright

Version 3: Marketing Teaser (imageteaser)

Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.

Link 
<article class="modul-teaser-marketing imageteaser fullwidth">
    <div class="background-image" aria-hidden="true">
        <div class="image__image">
            <img src="../../dummy/placeholder_4x3.jpg" alt="Alternative Bildbeschreibung" >
        </div>
    </div>
    <div class="content-container fullwidth__inner"> 
        <div class="image">
                    <div class="image__image">
            <img src="../../dummy/placeholder_4x3.jpg" alt="Alternative Bildbeschreibung" >
        </div>
        <p class="image__copyright">
            @copyright
        </p>
        </div>
        <h3 class="title">Version 3: Marketing Teaser (imageteaser)</h3>
        <p class="text">
            Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.
        </p>
        <div class="controls"> 
            <a href="#" class="button" aria-label="Version 3: Marketing Teaser (imageteaser)" title="Version 3: Marketing Teaser (imageteaser)">Link</a>
        </div>
    </div>
</article>