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.

.

Example

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

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

.

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)

.

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.

.

Example category teaser

example category teaser.jpg
.

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

.

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.

.

Example

example.jpg
.

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

.

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.

.

Example

example.jpg
.

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.

.

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

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.

.

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

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!

.

Example download teaser (tiles)

example.jpg
.

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

.

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)

.

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

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.