Teaser

• Der Bild-Teaser ist dafür gedacht, Nutzer*innen durch eine visuelle Ansprache gezielt weiterzuleiten. Ein Bild, eine prägnante Überschrift und ein Link bilden eine kompakte Einheit. Besonders geeignet ist er, um auf Themenbereiche, Aktionen oder Kampagnen aufmerksam zu machen.
• Nicht verwenden sollte man ihn für reine Textinformationen oder umfangreiche Bilderstrecken.

• Überschrift (optional, empfohlen) + Header Class (Überschriften-Stil) mit den Optionen H2, H3, H4, verborgen, nur für Screenreader.  
• ggf. Preline/Dachzeile, z. B. für eine Kategorisierung der Seite
• Verlinkung der Zielseite

• Erlaubte Formate: .jpg, .jpeg, .png
• Empfohlene Größe: mindestens 600 px
• Einheitliche Formate für mehrere Teaser nebeneinander empfohlen

• Titel/Überschrift: max. 60 Zeichen.
• Preline: max. 30 Zeichen.

Bilder-Teaser werden in Reihen platziert. Kombination von „klein“ und „groß“ ist möglich, sollte aber sparsam erfolgen, um ein ruhiges Gesamtbild zu bewahren.

Teaser werden automatisch untereinander dargestellt. Bild, Hintergrundfarbe und Link passen sich der Bildschirmbreite an.

• Aussagekräftige Bilder einsetzen
• Klare, kurze Überschriften formulieren
• Farben konsistent einsetzen
• Links regelmäßig prüfen

• Das Element eignet sich als großformatiger Teaser auf Startseiten oder Landingpages. Es betont ein Thema durch ein dominantes Bild und eine kurze Headline.
• Nicht geeignet ist es für lange Texte oder mehrere gleichwertige Themen nebeneinander.

• Überschrift (optional, empfohlen) + Header Class (Überschriften-Stil) mit den Optionen H2, H3, H4, verborgen, nur für Screenreader.  
• ggf. Preline/Dachzeile, z. B. für eine Kategorisierung der Seite
• Verlinkung der Zielseite

• Erlaubte Formate: jpg, jpeg, png
• Empfohlene Breite: mindestens 1.200 px
• Einheitliche Bildqualität sicherstellen

• Titel/Überschrift: max. 60 Zeichen.
• Preline: max. 30 Zeichen.

Das Element wird in der Hauptspalte als großflächiger Eyecatcher eingesetzt. Es sollte nur einmal pro Seite vorkommen.

Das Bild wird automatisch skaliert und die Überschrift oberhalb angezeigt. Der Link bleibt mobil anklickbar.

• Hochwertige, emotionale Bilder verwenden
• Klare, kurze Überschrift setzen
• Teaser sparsam einsetzen (Highlight-Funktion)
• Barrierefreiheit mit Alternativtext sicherstellen

Ein Farbteaser wird verwendet, wenn du einen thematischen Einstiegspunkt oder eine visuell auffällige Verlinkung zu einer Themenseite erstellen möchtest. Es handelt sich um eine Kachel mit Hintergrundfarbe, Titel, optional Bild und Link. Sie eignet sich besonders gut, um Nutzer*innen auf weiterführende Inhalte hinzuweisen, etwa auf spezifische Themen, Aktionen oder Bereiche der Website.

Für einen Farbteaser sollten folgende Felder gepflegt werden:

• Titel – zentrale Überschrift der Kachel, die das Thema klar benennt.
• Hintergrundfarbe – zur visuellen Hervorhebung; Auswahl gemäß Styleguide-Farbpalette.
• Optionales Bild – zur inhaltlichen oder emotionalen Unterstützung.

• Linkziel – wohin die Kachel führt (z. B. Themenseite, Landingpage, externer Link).

  Diese Angaben sorgen dafür, dass der Farbteaser funktional, optisch ansprechend und redaktionell konsistent ist.

Auf mobilen Geräten bricht der Farbteaser automatisch um und wird in der Regel untereinander dargestellt – auch wenn er im Desktop-Layout z. B. im 33/33/33-Raster nebeneinander platziert wurde.

Beim Einsatz von Farbteasern solltest du zusätzlich folgende Punkte beachten:

Barrierefreiheit

• Textfarbe und Kontrast müssen ausreichend sein – verwende nur Farbkombinationen laut Styleguide.
• Alternativtexte für Bilder sind Pflicht, auch wenn das Bild nur dekorativ wirkt.
• Linktexte müssen eindeutig sein (z. B. „Mehr zu Thema XY“ statt „Hier klicken“).

Redaktionelle Qualität

• Nutze eine klare, prägnante Sprache im Titel.
• Vermeide Redundanzen bei Teasern, die auf ähnliche Ziele verlinken.
• Achte auf Konsistenz im Layout (z. B. alle Teaser gleich hoch, gleiche Bildformate).

Inhaltliche Funktion

• Farbteaser dienen als Einstieg zu Themenseiten oder Aktionen – überlege genau, ob das Element diesen Zweck erfüllt.
• Verwende sie nicht inflationär, sonst verlieren sie ihre visuelle Wirkung.

Pflege und Aktualität

• Stelle sicher, dass verlinkte Inhalte aktuell und korrekt sind.
• Farbteaser sollten regelmäßig überprüft werden – v. a. bei Kampagnen oder saisonalen Inhalten.

Diese Punkte helfen, den Farbteaser sowohl optisch ansprechend als auch funktional sinnvoll einzusetzen.