Source: https://cd.union-investment.de/anwendungen/Digitalmedien/komponentenbibliothek/teaser
Verwenden Sie diese Komponente, um mit Hilfe eines Bildes und kurzen Textes auf einen Beitrag bzw. eine Seite hinzuweisen, diese zu verlinken und den Nutzer zum Weiterlesen zu animieren. Ein klassischer Teaser besteht aus den vier Elementen Bild/Video/Icon, Überschrift, Teaser-Text und Link/Button. In der maximalen Ausprägung können neben diesen Elementen außerdem noch Metainformationen gepflegt werden. Die Inhalte für den Teaser können entweder manuell gepflegt werden oder automatisch aus den Seiteneigenschaften der verlinkten Zielseite gespeist werden.
Als Hintergrund dient ein Container beim Standard-Teaser (UI-Blau, UI-Blau100, Grau100, Weiß oder Weiß mit grauer Kontur) oder ein Bild mit transparenter Fläche hinter den Textelementen beim Vollbild-Teaser. Beide Teaser-Varianten können sowohl einzeln als auch als Teaser-Gruppe (2-4 Teaser in einer Reihe) genutzt werden. Klickbar ist immer die gesamte Komponente.
Das Layout der Teaser-Varianten (z.B. Ausrichtung des Bilds oder Link-Stil) lässt sich flexibel im Magnolia-Editor anpassen.
Der Beschreibungstext für einen Teaser in UI-Blau. Hier steht eine kurze Beschreibung, was sich hinter der verlinkten Seite verbirgt.
Link-Text
Das ist der Beschreibungstext für den Teaser in UI-Blau100 mit Text-Link.
### Überschrift Das ist der Beschreibungstext für den Teaser in UI-Blau100 mit Text-Link. Link-Text
Das ist der Beschreibungstext für den Teaser in Grau100 mit Sekundärbutton und Autoren- sowie Themeninformation.
Max Mustermann Teaser
Das ist der Beschreibungstext für den Teaser in UI-Blau mit Primärbutton.
Der Beschreibungstext für einen Teaser in UI-Blau
Link-Text ### Überschrift
Link-Text ### Eine weitere Variante ist der Teaser im Vollbild-Stil. Dieser ist optional wählbar mit dunkler Schrift auf hellem Hintergrund oder heller Schrift auf dunklem Hintergrund sowie transparenten Containern über dem Bild. Beim Vollbild-Teaser lässt sich das Format auf 3:2 oder 3:4 einstellen.
Das ist die Beschreibung des Vollbild Teasers
Das ist die Beschreibung des Teasers.
Storybook Web Components
Entwickler können unsere Web Components unmittelbar in Webseiten und mobilen Applikationen einsetzen. Somit profitieren Sie von einem fertig verwendbaren Framework.
Zu der CMS-Komponente
