Teaser
Teasers sind in verschiedenen Größen vorhanden und können verschiedene Themen abdecken.
Der Standard-Teaser ist der Haupt-Teaser, der an allen BASF-Standorten verwendet wird. Es gibt zwei verschiedene Varianten: mit und ohne Polsterung. Bitte verwenden Sie nicht beide innerhalb eines Abschnitts.
Beispiel
b. Standard Teaser ohne Polsterung
Variation mit oder ohne Polsterung
Standard Teaser ohne Polsterung
Zur Verwendung in den Größen S / M / L auf einfachen Standorten ohne Hintergrundbilder oder Hintergrundfarben.
Enthält:
a. Bild 16: 9
b. Überschrift
c. Teaser kopieren (mit Link-Symbol)
d. Link (optional)
Standard Teaser mit Polsterung
Zur Verwendung in den Größen S / M / L auf Websites mit Hintergrundbildern oder Hintergrundfarben. Der Rand „y“ erscheint nur, wenn sich der Teaser in der letzten Zeile des Abschnitts befindet.
Enthält:
a. Bild 16: 9
b. Überschrift
c. Teaser kopieren (mit Link-Symbol)
d. Link (optional)
e. weißer Hintergrund
f. Hintergrundbild oder Hintergrundfarbe
Responsives Verhalten: Ohne Polsterung
≥ 992
S: Max. drei in einer Reihe
M: Max. zwei in einer Reihe
L: Einer in einer Reihe (Text auf der rechten Seite)
991 - 768
S: Max. zwei in einer Reihe (Slider optional)
M: Max. zwei in einer Reihe
L: Einer in einer Reihe (Text auf der rechten Seite)
767 - 320
S: Einer in einer Reihe (Slider optional)
M: Einer in einer Reihe (Slider optional)
L: Einer in einer Reihe (Text unter Bildern)
Responsives Verhalten: Mit Polsterung
≥ 992
L: One in a row (text underneath images)
M: Max. two in a row
S: Max. three in a row
991 - 768
L: One in a row (text underneath images)
M: Max. two in a row
S: Max. two in a row (slider optional)
767 - 320
L: One in a row (text underneath images)
M: One in a row (slider optional)
S: One in a row (slider optional)
Spezielle Teaser haben spezielle Aufgaben. Bisher gibt es drei Varianten: Kategorie-, Editorial- und Download-Magazin-Teaser. Die Höhe der Komponenten hängt von den anderen Teasern und Komponenten in derselben Reihe ab.
Beispiel Kategorie Teaser
Drei Typen von Spezial-Teasern
Kategorie-Teaser
Visualisiert die jeweilige Kategorie und verlinkt optional auf die Kategorieübersichtsseite, sofern eine vorhanden ist. Verwenden Sie nur S.
Enthält:
a. Hintergrund Unternehmensfarbe
b. Infografik-Symbol, Verhältnis 1: 1
c. Schlagzeile Licht
d. Überschrift fett
Redaktioneller Teaser
Link zur Magazinredaktion. Verwenden Sie nur S.
Enthält:
a. Hintergrund Unternehmensfarbe
b. Ausgabe Überschrift & Unterzeile (SVG)
c. Beschreibung oder Zitat
d. Zitat Bild, Verhältnis 1: 1, Name und Beschreibung
e. Link mit Symbol
Magazin-Teaser herunterladen
Option zum Herunterladen des Magazins in verschiedenen Sprachen. Verwenden Sie nur S. In diesem Teaser sind alle Elemente zentriert.
Enthält:
a. Hintergrund Unternehmensfarbe
b. Überschrift
c. Bildmagazin
d. Download-Links mit Symbolen, Dokumenttyp und -größe
Responsives Verhalten
≥ 992
S: Max. drei in einer Reihe
991 - 768
S: Max. zwei in einer Reihe (Slider optional)
767 - 320
S: Einer in einer Reihe (Slider optional)
Zeigt die beliebtesten Links zu Artikeln, Geschichten usw. an. Es gibt drei Variationen: in Unternehmensfarbe, weiß oder blass.
Beispiel
Farbvarianten
Unternehmensfarbe
Verwenden Sie nur S.
Enthält:
a. Überschrift
b. Beschreibung kopieren
c. Anzahl, 40% weiß
d. Überschriftenliste
e. Trennlinie, 30% weiß, immer ganz oben auf dem Listeneintrag
f. Hintergrund Unternehmensfarbe
Weiße und blasse Farbe
Verwenden Sie nur S.
Enthält:
a. Überschrift
b. Beschreibung kopieren
c. Nummer, hellgrau
d. Überschriftenliste, Unternehmensfarbe
e. Trennlinie, mittelgrau, wird als Trennlinie zwischen zwei Listenelementen verwendet
f. Hintergrundfarbe weiß oder blass
G. Hintergrundbild oder Hintergrundfarbe
Responsives Verhalten
≥ 992
S: Max. drei in einer Reihe
991 - 768
S: Max. zwei in einer Reihe (Slider optional)
767 - 320
S: Einer in einer Reihe (Slider optional)
Mit dieser Komponente können Sie ein oder mehrere Ereignisse auf Ihrer Seite markieren oder auflisten.
Beispiel
Elemente
a. Monat und Datum
b. Überschrift der Veranstaltung
c. Kopieren (optional)
d. Zum Kalenderlink hinzufügen (optional)
e. Weitere Informationen Link (optional, Links zur Detailseite der Veranstaltung)
Die Listen- und Kachelversion enthält ein Hintergrundfeld in Feldgrau. Das Event-Datumsfeld ist in den Unternehmensfarben erhältlich.
Datum und Ort-Teaser
Event-Titel
a. Beispiel drei Kacheln in einer S-Spalte
b. Beispiel einer Kachel in einer schwebenden S-Spalte neben dem Text
Sie können das Ereignisfeld auch mit anderen geeigneten Komponenten wie Download-Teasern, Kontaktfeldern oder dem Slider kombinieren.
Event-Listen
Responsives Verhalten
Rechts: Im kleinsten Ansichtsfenster werden alle Event-Teaser über 12 Spalten ausgeführt. Ereignislisten werden wie Ereignisfelder angezeigt.
Diese Komponente bietet verschiedene Download- und Linkoptionen. Es gibt zwei Varianten: Kacheln und Liste. Die Fliesen sind mit oder ohne Polsterung erhältlich. Eine Mischung aus beidem ist nicht erlaubt!
Beispiel download teaser (Titel)
Download teaser (Titel)
Teaser ohne Polsterung
Download-Option auf einfachen Websites ohne Hintergrundbilder oder Hintergrundfarben. Verwenden Sie in S auf einfachen Websites ohne Hintergrundbilder oder Hintergrundfarben.
Enthält:
a. Bild (optional). Formate: 16: 9 / DIN Hochformat / DIN Querformat (bei schlechter Bildqualität ist eine kleine Version möglich)
b. Datum
c. Überschrift
d. Beschreibung kopieren
e. Link mit Symbol
Farbige Teaser mit Polsterung
Downloadmöglichkeit auf allen Seiten. Verwenden Sie in S.
Enthält:
a. Bild (optional). Formate: 16: 9 / DIN Hochformat / DIN Querformat (bei schlechter Bildqualität ist eine kleine Version möglich)
b. Datum
c. Überschrift
d. Beschreibung kopieren
e. Verknüpfung mit Symbol, Weiß oder Unternehmensfarbe (abhängig von der Hintergrundfarbe)
f. Hintergrundfarbe: weiß, korporativ oder blass
Responsives Verhalten: download teaser (Titel)
≥ 992
S: Max. drei in einer Reihe
991 - 768
S: Max. zwei in einer Reihe (Slider optional)
767 - 320
S: Einer in einer Reihe (Slider optional)
Download teaser (Liste)
Enthält:
a. Bild (optional). Formate: 16: 9 / DIN Hochformat / DIN Querformat (bei schlechter Bildqualität ist eine kleine Version möglich)
b. Datum
c. Überschrift
d. Beschreibung kopieren
e. Sprachangabe
f. Link mit Symbol
G. Trennlinie, mittelgrau, immer ganz oben auf dem Listeneintrag
Responsives Verhlatenr: download teaser (Liste)
≥ 768
XL: Einer in einer Reihe (Text auf der rechten Seite)
767 - 320
XL: Einer in einer Reihe (Text unter den Bilderns)