Teaser and Multiteaser (deprecated)

Hinweis: Diese Version des Teasers ist veraltet. Es wird empholen die aktuelle Version zu nutzen.

Zur aktuellen Version

JS behaviour: Mit dem data Attribut data-add-clickable-area="smart" werden das Bild, der Titel und das "mehr"-Element des Teasers klickbar gemacht. Mit dem data Attribut data-add-clickable-area="full" wird der komplette Teaser klickbar gemacht. Das Linkziel bestimmt das href des Links mit dem Attribute data-mainlink.

JS behaviour: With the data attribut data-add-clickable-area="smart" the image, the title and the "more"-element of the teaser will be clickable. With the data attribut data-add-clickable-area="full" the full teaser will be clickable. The linktarget is defined by the href of the mainlink with the attribute data-mainlink.

Single Teaser

.modul-teaser

Alternative Bildbeschreibung

Caption is considered a science but it is difficult to say.

Teasertitle

Kategorie: optional

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. Can philosophy be a science? What does philosophy operate with? It operates with categories, which can be as wide and as interchangeable as one can only imagine. Ordinary science operates with definitions, which are quite limited in their field of research. Mehr zu Teasertitle

HTML
<article class="modul-teaser" data-add-clickable-area="smart">
    <div class="image">
        <div class="image__image">
            <img src="../../styleguide/static/placeholder_4x3.jpg" alt="Alternative Bildbeschreibung" >
        </div>
        <p class="image__caption">
            Caption is considered a science but it is difficult to say.
        </p>
        <p class="image__copyright">© copyright</p>
    </div>
    <h3 class="title">Teasertitle</h3>

    <div class="teaser__meta">
        <p class="text--meta">Kategorie: optional</p>
    </div>
    <div class="inner">
        <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. Can philosophy be a science? What does philosophy operate with? It operates with categories, which can be as wide and as interchangeable as one can only imagine. Ordinary science operates with definitions, which are quite limited in their field of research.
            <a href="#random6450" class="more" data-mainlink="true">Mehr<span class="aural"> zu Teasertitle</span></a> 
        </p>
    </div>
</article>

Multiteaser

Es können bis zu vier Teaser in einer Reihe angezeigt werden indem ein Flexgrid mit den Teasern kombiniert wird.

By combining a Flexgrid with the teasers, you can display up to four teasers in a row.

.modul-multiteaser

Multiteaser (1)

  • Alternative Bildbeschreibung

    Caption is considered a science but it is difficult to say.

    Teaser

    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. Can philosophy be a science? What does philosophy operate with? It operates with categories, which can be as wide and as interchangeable as one can only imagine. Ordinary science operates with definitions, which are quite limited in their field of research. Mehr zu Teasertitle

HTML
<section class="modul-multiteaser">

<h2 class="title">Multiteaser (1)</h2>
<ul class="flexgrid grid--1">
         <li>
            <!-- Teaser 1 -->
        </li>
</ul></section>

Multiteaser (2)

  • Alternative Bildbeschreibung

    Caption is considered a science but it is difficult to say.

    Teaser

    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. Can philosophy be a science? What does philosophy operate with? It operates with categories, which can be as wide and as interchangeable as one can only imagine. Ordinary science operates with definitions, which are quite limited in their field of research. Mehr zu Teasertitle

  • Alternative Bildbeschreibung

    Caption is considered a science but it is difficult to say.

    Teaser

    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. Can philosophy be a science? What does philosophy operate with? It operates with categories, which can be as wide and as interchangeable as one can only imagine. Ordinary science operates with definitions, which are quite limited in their field of research. Mehr zu Teasertitle

HTML
<section class="modul-multiteaser">

<h2 class="title">Multiteaser (2)</h2>
<ul class="flexgrid grid--2">
         <li>
            <!-- Teaser 1 -->
        </li>
         <li>
            <!-- Teaser 2 -->
        </li>
</ul></section>

Multiteaser (3)

  • Alternative Bildbeschreibung

    Caption is considered a science but it is difficult to say.

    Teaser

    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. Can philosophy be a science? What does philosophy operate with? It operates with categories, which can be as wide and as interchangeable as one can only imagine. Ordinary science operates with definitions, which are quite limited in their field of research. Mehr zu Teasertitle

  • Alternative Bildbeschreibung

    Caption is considered a science but it is difficult to say.

    Teaser

    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. Can philosophy be a science? What does philosophy operate with? It operates with categories, which can be as wide and as interchangeable as one can only imagine. Ordinary science operates with definitions, which are quite limited in their field of research. Mehr zu Teasertitle

  • Alternative Bildbeschreibung

    Caption is considered a science but it is difficult to say.

    Teaser

    Philosophy is considered a 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. Can philosophy be a science? What does philosophy operate with? It operates with categories, which can be as wide and as interchangeable as one can only imagine. Ordinary science operates with definitions, which are quite limited in their field of research.

HTML
<section class="modul-multiteaser">

<h2 class="title">Multiteaser (3)</h2>
<ul class="flexgrid grid--3">
         <li>
            <!-- Teaser 1 -->
        </li>
         <li>
            <!-- Teaser 2 -->
        </li>
         <li>
            <!-- Teaser 3 -->
        </li>
</ul></section>

Multiteaser (4)

  • Alternative Bildbeschreibung

    Caption is considered a science but it is difficult to say.

    Teaser

    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. Can philosophy be a science? What does philosophy operate with? It operates with categories, which can be as wide and as interchangeable as one can only imagine. Ordinary science operates with definitions, which are quite limited in their field of research. Mehr zu Teasertitle

  • Alternative Bildbeschreibung

    Caption is considered a science but it is difficult to say.

    Teaser

    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. Can philosophy be a science? What does philosophy operate with? It operates with categories, which can be as wide and as interchangeable as one can only imagine. Ordinary science operates with definitions, which are quite limited in their field of research. Mehr zu Teasertitle

  • Alternative Bildbeschreibung

    Caption is considered a science but it is difficult to say.

    Teaser

    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. Can philosophy be a science? What does philosophy operate with? It operates with categories, which can be as wide and as interchangeable as one can only imagine. Ordinary science operates with definitions, which are quite limited in their field of research. Mehr zu Teasertitle

  • Alternative Bildbeschreibung

    Caption is considered a science but it is difficult to say.

    Teaser

    Philosophy is considered a 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. Can philosophy be a science? What does philosophy operate with? It operates with categories, which can be as wide and as interchangeable as one can only imagine. Ordinary science operates with definitions, which are quite limited in their field of research.

HTML
<section class="modul-multiteaser">

<h2 class="title">Multiteaser (4)</h2>
<ul class="flexgrid grid--4">
         <li>
            <!-- Teaser 1 -->
        </li>
         <li>
            <!-- Teaser 2 -->
        </li>
         <li>
            <!-- Teaser 3 -->
        </li>
         <li>
            <!-- Teaser 4 -->
        </li>
</ul></section>