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.

Druck

Beispiel

example.jpg
a. Standard Teaser mit Polsterung
b. Standard Teaser ohne Polsterung
Druck

Variation mit oder ohne Polsterung

variation with.jpg

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

Druck

Responsives Verhalten: Ohne Polsterung

responsive behaviour.jpg

≥ 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)

Druck

Responsives Verhalten: Mit Polsterung

with padding.jpg

≥ 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.

Druck

Beispiel Kategorie Teaser

example category teaser.jpg
Druck

Drei Typen von Spezial-Teasern

three types of special.jpg

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

Druck

Responsives Verhalten

responsive behaviour.jpg

≥ 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.

Druck

Beispiel

example.jpg
Druck

Farbvarianten

color variation.jpg

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

Druck

Responsives Verhalten

responsive behaviour.jpg

≥ 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.

Druck

Beispiel

example.jpg
Druck

Elemente

elements.jpg
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.
Druck

Datum und Ort-Teaser

date and venue teaser.jpg
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.
Druck

Event-Titel

event tiles.jpg
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.
Druck

Event-Listen

event lists.jpg
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).
Druck

Responsives Verhalten

responsive behaviour.jpg
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.

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!

Druck

Beispiel download teaser (Titel)

example.jpg
Druck

Download teaser (Titel)

download teaser tiles.jpg

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

Druck

Responsives Verhalten: download teaser (Titel)

responsive behaviour.jpg

≥ 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)

Druck

Download teaser (Liste)

download teaser list.jpg
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
punkt h.jpg
h. Wenn nur ein Link da ist, wird der Text in eine L-Spalte platziert.
Druck

Responsives Verhlatenr: download teaser (Liste)

responsive behaviour2.jpg

≥ 768

XL: Einer in einer Reihe (Text auf der rechten Seite)

767 - 320

XL: Einer in einer Reihe (Text unter den Bilderns)

 

Kontakt und Feedback

Das Team Brand Consultancy berät Sie gerne bei Fragen: Kontakt.
Wir freuen uns über ein Feedback zum Brand Portal.