5.13 Teaser

Ein Teaser repräsentiert die Vorschau eines Beitrags. Über den Link „Weiterlesen“ erreichen die Besucherinnen und Besucher den gesamten Beitrag. Zur Illustrierung können Beitragsbilder neben dem Text oder textumflossen platziert werden. Über dem Text können das Datum der Veröffentlichung sowie der Titel oder eine Kategorie angezeigt werden. Bei Auflistung mehrerer Beiträge (Teaser-Liste) müssen die einzelnen Teaser durch eine Linie in HELLGRAU abgegrenzt sein.

Teaserlistenkategorie

01.01.2016

Beispieltitel

Alternativer Bild-Text Loremipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Weiterlesen

Quelltext

<div class="bb-teaser ">
    <div class="bb-teaser-category">
        <h2>Teaserlistenkategorie</h2>
    </div>

    <div class="bb-teaser-item">
        <h6 class="bb-teaser-meta">01.01.2016</h6>
        <h6> <a title="Weiterlesen: Beispieltitel" href="templates/article"> Beispieltitel </a> </h6>
        <p class="bb-teaser-text">

            <img data-featherlight="bild_groß.jpg"
                 alt="Alternativer Bild-Text"
                 title="Titel zum Bild"
                 src="bild_kleiner.jpg"
                 class="bb-image bb-image-float-top-left bb-teaser-image">

            Loremipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
            labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.Lorem ipsum
            dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
            dolore magna aliquyam erat, sed diam voluptua.

            <a title="Weiterlesen: Beispieltitel" href="templates/article">Weiterlesen</a>
        </p>
    </div>
</div>
<div style="clear: both;"></div>

Benötigtes Javascript

<script type="text/javascript" src="style.brandenburg.de/2_4/js/vendors/2jquery.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/2_4/js/vendors/3jquery.mobile-events.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/2_4/js/vendors/what-input.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/2_4/js/vendors/5foundation.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/2_4/js/finalApp.js"></script>

Aufbau

Jeder Teaser besteht mindestens aus einem Text und dem Hyperlink „Weiterlesen“.
Der Schriftstil folgt den Regeln zu Fußnoten und Hinweistexten.
Im Umfeld des Textes können Beitragsbilder, das Datum der Veröffentlichung, der Beitragstitel oder eine Kategorie platziert werden. Beitragsbilder folgen den Regelungen zu Bildern.

Jeder Teaser besteht mindestens aus einem Text und dem Hyperlink „Weiterlesen“.
Der Schriftstil folgt den Regeln zu Fußnoten und Hinweistexten.
Im Umfeld des Textes können Beitragsbilder, das Datum der Veröffentlichung, der Beitragstitel oder eine Kategorie platziert werden. Beitragsbilder folgen den Regelungen zu Bildern.

Spezifische Anforderungen

Einzelne Teaser werden durch eine Linie in HELLGRAU (1px) voneinander abgegrenzt.

Barrierefreiheit

keine Beschränkungen

Aktionsverhalten

Über den "Weiterlesen"-Link kann der gesamte Beitrag gelesen werden.

Responsive Design

keine Beschränkungen

Seite drucken