Teaser

ROW

TEASER | 3 Teaser – Links – Icons (Row)

Drei Teaser-Elemente nebeneinander, die keine Verlinkung und keine Icons enthalten. Sie können beispielsweise für Features oder Highlights eines Produkts genutzt werden, das keine Unterseite hat und für die es schwierig ist passende Icons zu finden.

Dos and Don’ts

• Teaser Title kurz halten (max. 30 -50 Zeichen)
• Teaser Body kurz formulieren einsetzen (max. 150-200 Zeichen)
• Bei drei Spalten immer 3, 6 oder maximal 9 Teaser nutzen
• Bei 4 Teasern sollte ein 2×2 Raster eingesetzt werden
• Lässt sich eine ungerade Anzahl nicht vermeiden, kann ein Kontakt-Teaser ergänzt werden
• Ausschließlich für die Verlinkung auf Unterseiten einsetzen.
• Als CSS-Klasse muss hier teaser-grid-3 gesetzt werden, damit das Raster funktioniert

ROW

TEASER | 6 Teaser – Links – Icons (Row)

Sechs Teaser-Elemente nebeneinander, die keine Verlinkung und keine Icons enthalten. Sie können beispielsweise für Features oder Highlights eines Produkts genutzt werden, das keine Unterseite hat und für die es schwierig ist passende Icons zu finden.

Dos and Don’ts

• Teaser Title kurz halten (max. 30 -50 Zeichen)
• Teaser Body kurz formulieren einsetzen (max. 150-200 Zeichen)
• Bei drei Spalten immer 3, 6 oder maximal 9 Teaser nutzen
• Bei 4 Teasern sollte ein 2×2 Raster eingesetzt werden
• Als CSS-Klasse muss hier teaser-grid-3 gesetzt werden, damit das Raster funktioniert

ROW

TEASER | 6 Teaser – Links + Icons (Row)

Sechs Teaser-Elemente nebeneinander, die keine Verlinkung, aber jeweils ein Icon enthalten. Sie können beispielsweise für Features oder Highlights eines Produkts genutzt werden, das keine Unterseite hat.

Dos and Don’ts

• Teaser Title kurz halten (max. 30 -50 Zeichen)
• Teaser Body kurz formulieren einsetzen (max. 150-200 Zeichen)
• Bei drei Spalten immer 3, 6 oder maximal 9 Teaser nutzen
• Bei 4 Teasern sollte ein 2×2 Raster eingesetzt werden
• Lässt sich eine ungerade Anzahl nicht vermeiden, kann ein Kontakt-Teaser ergänzt werden
• Ausschließlich für die Verlinkung auf Unterseiten einsetzen.
• Als CSS-Klasse muss hier teaser-grid-3 gesetzt werden, damit das Raster funktioniert

ROW

TEASER | 6 Teaser + Links + Icons (Row)

Sechs Teaser-Elemente nebeneinander, die Verlinkungen und Icons enthalten. 

Dos and Don’ts

• Teaser Title kurz halten (max. 30 -50 Zeichen)
• Teaser Body kurz formulieren einsetzen (max. 150-200 Zeichen)
• Bei drei Spalten immer 3, 6 oder maximal 9 Teaser nutzen
• Bei 4 Teasern sollte ein 2×2 Raster eingesetzt werden
• Lässt sich eine ungerade Anzahl nicht vermeiden, kann ein Kontakt-Teaser ergänzt werden
• Ausschließlich für die Verlinkung auf Unterseiten einsetzen.
• Als CSS-Klasse muss hier teaser-grid-3 gesetzt werden, damit das Raster funktioniert

ROW

TEASER | 4 Teaser + Links + Icons (Row)

Sechs Teaser-Elemente nebeneinander, die Verlinkungen und Icons enthalten. 

Dos and Don’ts

• Teaser Title kurz halten (max. 30 -50 Zeichen)
• Teaser Body kurz formulieren einsetzen (max. 150-200 Zeichen)
• Ausschließlich bei 2 oder 4 Teasern einsetzen
• Als CSS-Klasse muss hier teaser-grid-2 gesetzt werden, damit das Raster funktioniert

ROW

TEASER | 3 Cards (Case Studies) +Stichpunkte +Links (Row)

Drei Teaser-Cards mit Verlinkungen auf Leistungsseiten, die ausschließlich auf den Detailseiten der Case Studies genutzt werden.

Dos and Don’ts

• Card Title möglichst kurz halten, entspricht dem jeweiligen Leistungsbereich (z.B. Konzeption & Design, Entwicklung, Online-Marketing oder Wissenstransfer)
• kein Fließtext, sondern max. 5-7 kurz formulierte Stichpunkte
• Verlinkungen anpassen, wenn der Leistungsbereich angepasst wird.

ROW

TEASER | 2 Cards (Case Studies) +Stichpunkte +Links (Row)

Zwei Teaser-Cards mit Verlinkungen auf Leistungsseiten, die ausschließlich auf den Detailseiten der Case Studies genutzt werden.

Dos and Don’ts

• Card Title möglichst kurz halten, entspricht dem jeweiligen Leistungsbereich (z.B. Konzeption & Design, Entwicklung, Online-Marketing oder Wissenstransfer)
• kein Fließtext, sondern max. 5-7 kurz formulierte Stichpunkte
• Verlinkungen anpassen, wenn der Leistungsbereich angepasst wird.

ROW

TEASER | 2 Teaser mit Image-Overlay (Row)

Zwei präsente Teaser-Elemente mit Hintergrund-Bild und farbigem Overlay, sowie einer großen Headline und eine Subheadline. Werden aktuell ausschließlich auf der Startseite eingesetzt.

Dos and Don’ts

• Subheadline kurz halten (max. 2-3 Worte)
• Headline kurz halten (max. 2-3 Worte)
• Headline auf zwei Zeilen verteilen, sofern mehr als ein Wort genutzt wird
• Niemals Kurztexte im Teaser platzieren.
• Verlinkung nicht vergessen
• Bilder mit Duotone-Effekt in den Hintergrund legen (Maße: 800 x 800px)

ROW

TEASER | 2 Teaser (Weiß & Blau) mit Image & Image-Overlay (Row)

Ein weißer Teaser mit einem Bild oberhalb und einem Text im unteren Bereich. Ein blauer Teaser mit einem Hintergrund-Bild und einem Text im unteren Bereich.

Dos and Don’ts

• Headline kurz halten (max. 25-30 Zeichen)
• Beschreibungstext möglichst kurz formulieren (max. 150 Zeichen)
• Beim blauen Teaser ein Hintergrundbild mit Duotone-Effekt nutzen (Maße: 800 x 800px)

ROW

TEASER | CTA-Störer mit Headline, Text + Button (Row)

Ein auffälliges Störer-Element, dass Aufmerksamkeit ziehen soll. Kann als Support-Element verwendet werden, um auf wichtige Unterseiten aufmerksam zu machen.

Dos and Don’ts

• Headline kurz halten (max. 30-50 Zeichen)
• Text möglichst kurz formulieren (max. 150 Zeichen)