Teaser
Teasers sind in verschiedenen Größen vorhanden und können verschiedene Themen abdecken.
The Standard Teaser is the main teaser used across BASF sites. Two different variations exist: with and without padding. Please do not use both within one section.
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
a. Standard Teaser mit Polsterung
b. Standard Teaser ohne Polsterung
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)
Shows the most popular links to articles, stories, etc. There are three variations: in corporate color, white or pale color.
Shows the most popular links to articles, stories, etc. There are three variations: in corporate color, white or pale color.
Shows the most popular links to articles, stories, etc. There are three variations: in corporate color, white or pale color.
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)
With this component, you can highlight or list one or several events on your page.
With this component, you can highlight or list one or several events on your page.
Mit dieser Komponente können Sie ein oder mehrere Ereignisse auf Ihrer Seite markieren oder auflisten.
Beispiel
Elemente
Event-Teaser basieren auf denselben Elementen, von denen einige optional verwendet werden können.
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.
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
Diese Version kann auf der Detailseite Ihrer Veranstaltung verwendet werden, um Datum und Ort in Fettdruck anzuzeigen. Der Link "Zum Kalender hinzufügen" ist optional.
Event-Titel
Wenn Sie Ihr Ereignis hervorheben möchten oder mehr als ein Ereignis anzeigen möchten, können Sie die Ereignis-Kachel-Version auswählen.
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.
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
Für eine detailliertere Ereignisbeschreibung oder wenn Sie mehrere Ereignisse anzeigen möchten, ist die Ereignisliste die perfekte Wahl. Wenn Sie ein spezielles Ereignis hervorheben möchten, können Sie es in das entsprechende Farbpaar der verwendeten Unternehmensfarbe einstellen (dies gilt auch für die Ereignisfelder).
Responsives Verhalten
Links: In den drei größten Ansichtsfenstern verhalten sich die Ereignisteaser gleich (sie werden proportional zum Raster skaliert und die definierten Haltepunktregeln gelten).
Rechts: Im kleinsten Ansichtsfenster werden alle Event-Teaser über 12 Spalten ausgeführt. Ereignislisten werden wie Ereignisfelder angezeigt.
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)
Aufgelistete Download-Elemente. Verwendung in XL 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. Sprachangabe
f. Link mit Symbol
G. Trennlinie, mittelgrau, immer ganz oben auf dem Listeneintrag
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
h. Wenn nur ein Link da ist, wird der Text in eine L-Spalte platziert.
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)