Teaser

Teasers are available in different sizes and can serve various purposes.

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.

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.

Druck

Example

example.jpg
a. Standard teaser with padding
b. Standard teaser without padding
Druck

Variation with or without padding

variation with.jpg

Standard teasers without padding
To be used in sizes S/M/L on plain sites without background images or background colors.

Contains:
a. 
Image 16:9
b. Headline
c. Copy teaser (with link icon)
d. Link (optional)

Standard teasers with padding
To be used in sizes S/M/L on sites containing background images or background colors. The margin „y“ only appears if the teaser is in the last row of the section.

Contains:
a. 
Image 16:9
b. Headline
c. Copy teaser (with link icon)
d. Link (optional)
e. White background
f. Background image or background color

Druck

Responsive behavior: without padding

responsive behaviour.jpg

≥ 992

S: Max. three in a row
M: Max. two in a row
L: One in a row (text on right side)

991 - 768

S: Max. two in a row (slider optional)
M: Max. two in a row
L: One in a row (text on right side)

767 - 320

S: One in a row (slider optional)
M: One in a row (slider optional)
L: One in a row (text underneath images)

Druck

Responsive behavior: with padding

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)

Special teasers have specialized tasks. There are three variations so far: category-, editorial- and download magazine teasers. The height of the components depends on the other teasers and components in the same row.

Druck

Example category teaser

example category teaser.jpg
Druck

Three types of special teasers

three types of special.jpg

Category teaser
Visualizes the respective category and optionally link to category overview site, provided there is one. Use S only.

Contains:
a. 
Background corporate color
b. Infographic Icon, ratio 1:1
c. Headline light
d. Headline bold


Editorial teaser
Link to magazine editorial. Use S only.

Contains:
a. 
Background corporate color
b. Issue headline & subline (SVG)
c. Description or quote
d. Quote Image, ratio 1:1, name and description
e. Link with icon


Download magazine teaser
Option to download magazine in different languages. Use S only. In this teaser all items are centered.

Contains:
a. 
Background corporate color
b. Headline
c. Image magazine
d. Download links with icons, document type and size

Druck

Responsive behavior

responsive behaviour.jpg

≥ 992

S: Max. three in a row

991 - 768

S: Max. two in a row (slider optional)

767 - 320

S: One in a row (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.

Shows the most popular links to articles, stories, etc. There are three variations: in corporate color, white or pale color.

Druck

Example

example.jpg
Druck

Color variation

color variation.jpg

Corporate color
Use S only.

Contains:
a. 
Headline
b. Description copy
c. Number, 40% white
d. Headline listing
e. Divider line, 30% white, always on the top of the list item
f. Background corporate color


White and pale color
Use S only.

Contains:
a. 
Headline
b. Description copy
c. Number, light grey
d. Headline listing, corporate color
e. Divider line, middle grey, used as divider between two list items
f. Background color white or pale
g. Background image or background color

Druck

Responsive behavior

responsive behaviour.jpg

≥ 992

S: Max. three in a row

991 - 768

S: Max. two in a row (slider optional)

767 - 320

S: One in a row (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.

With this component, you can highlight or list one or several events on your page.

Druck

Example

example.jpg
Druck

Elements

elements.jpg

Event teasers are based on the same elements, some of which can be used optionally.
a. Month and date
b. Headline of the event
c. Copy (optional)
d. Add to calendar link (optional)
e. Learn more Link (optional, links to the detail page of the event)

The list- and tile version contain a background box in box grey. The event date box is available in the corporate colors.

Druck

Date and venue teaser

date and venue teaser.jpg
This version can be used on the detail page of your event to show date and venue in bold. The “Add to Calendar” link is optional.
Druck

Event tiles

event tiles.jpg

If you want to highlight your event or have more than one to display, you can choose the event tile version.
a. Example three tiles in an S column
b. Example one tile in a floating S Column next to text

You can also combine the event tile with other suitable components like download teasers, contact tiles or the slider.

Druck

Event lists

event lists.jpg
For a more detailed event description or if you have several events to show, the event list is the perfect choice. In case you would like to highlight a special event, you can set it into the matching color pair of the corporate color used (this applies for the event tiles as well).
Druck

Responsive behavior

responsive behaviour.jpg

Left: In the three largest viewports, the event teasers behave the same (they scale proportionally to the grid and the defined breakpoint rules apply).

Right: In the smallest viewport, all event teasers run over 12 columns. Event lists are displayed like event tiles.

This component offers different download and link options. There are two variations: Tiles and List. The tiles are available with or without padding. A mixture of both is not allowed!

Druck

Example download teaser (tiles)

example.jpg
Druck

Download teaser (tiles)

download teaser tiles.jpg

Teasers without padding
Download option on plain sites without background images or background colors. Use in S on plain sites without background images or background colors.

Contains:
a. 
Image (optional). Formats: 16:9/ DIN portrait/ DIN landscape (in case of poor image quality a small version is possible)
b. Date
c. Headline
d. Description copy
e. Link with icon


Colored teasers with padding
Download option on all sites. Use in S.

Contains:
a. 
Image (optional). Formats: 16:9/ DIN portrait/ DIN landscape (in case of poor image quality a small version is possible)
b. Date
c. Headline
d. Description copy
e. Link with icon, white or corporate color (depends on BG color)
f. Background color: white, corporate or pale

Druck

Responsive behavior: download teaser (tiles)

responsive behaviour.jpg

≥ 992

S: Max. three in a row

991 - 768

S: Max. two in a row (slider optional)

767 - 320

S: One in a row (slider optional)

Druck

Download teaser (list)

download teaser list.jpg

Listed download items. Use in XL on plain sites without background images or background colors.

Contains:
a. 
Image (optional). Formats: 16:9/ DIN portrait/ DIN landscape (in case of poor image quality a small version is possible)
b. Date
c. Headline
d. Description copy
e. Language indication
f. Link with icon
g. Divider line, middle grey, always on the top of the list item

punkt h.jpg
h. If there is only one link, the text is placed in L column.
Druck

Responsive behavior: download teaser (list)

responsive behaviour2.jpg

≥ 768

XL: One in a row (text on right side)

767 - 320

XL: One in a row (text underneath images)

Related topics

 

Kontakt und Feedback

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