Toolbar-Menü
 
Sie sind hier: Start Komponenten
5. Komponenten
  1. 5.1 Accordion
  2. 5.2 Bilder
  3. 5.3 Formulare
  4. 5.4 Icons
  5. 5.5 Kalender
  6. 5.6 Listen
  7. 5.7 Mega-Menü
  8. 5.8 Mobile-Menü
  9. 5.9 Meldungen
  10. 5.10 Slider
  11. 5.11 Tabellen
  12. 5.12 Tabs (Horizontal)
  13. 5.13 Tabs (Vertikal)
  14. 5.14 Teaser
  15. 5.15 Tonaufnahmen
  16. 5.16 Videos
  17. 5.17 Externe Inhalte
Platzierung
4.2.1
4.2.2
4.2.3
 
4.2.4
4.2.5
4.3.1
4.3.2
4.3.3
4.4.1
4.4.2
4.4.3
4.4.4

5.14 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

Interaktiver Streifenwagen (Beispiel) 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
    Quelltext kopieren 
    <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.
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