Teaser and Multiteaser

Teaser sind eine Kombination aus Bild und Text, die einen kurzen Einblick in das verlinkte Thema bieten und so das Interesse der Lesenden wecken. Somit sollte der Text möglichst kurz gehalten werden und nur die wichtigsten Informationen beinhalten. Das Bild sollte ebenfalls möglichst aussagekräftig sein.

A teaser is a combination of an image and text that attracts readers to a linked topic by giving them a quick glimpse of it. The text should be short and contain just the essential information. The image should provide the appropriate visual context for the content.

Hinweis: Diese Version ist eine 2026 überarbeitete Version des alten Teasers. Er ist nun vollflächig via CSS verlinkt. Mit dem data Attribut data-add-clickable-area="fullcss" wird der gesamte Teasers klickbar gemacht. Das Linkziel bestimmt das href des Teasertitels mit dem Attribut data-mainlink. Der "mehr"-Link am Textende wurde entfernt.

Single Teaser Markup

.modul-teaser

Alternative Bildbeschreibung

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

Teasertitle

Kategorie: optional

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
<article class="modul-teaser" data-add-clickable-area="fullcss">
    <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">
        <a href="#random8543" data-mainlink="true">
            Teasertitle
        </a>
    </h3>

    <div class="teaser__meta">
        <p class="text--meta">Kategorie: optional</p>
    </div>
    <div class="inner">
        <p class="text">
                        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.
        </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 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 (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 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.

  • 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 (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 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.

  • 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.

  • 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 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.

  • 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.

  • 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.

  • 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>