Teaser

Use the teaser component to attract attention and build excitement and expectations through curiosity.

It consists of an image and a text to underline the visual meaning.

Recommendations#

  • Always use the text in a single line scenario.
  • If you select a teaser with text, look at it’s contrast to the picture – i.e. choose gray for an image with a bright subject and vice versa.
  • Try to keep the 4:3 ratio for teasers to guarantee the right display in each breakpoint.
  • Otherwise it’s ratio is completely free adjustable.

Overall styling#

  • The components has rounded corners of 2px.
  • It uses the shadow-default.
TypesGrayWhite
titletitle: gray title: white
With subheadwith-subhead: graywith-subhead: white

States#

  • The change of state is mainly shown in the bar and overlay of the image.
  • The title gets underlined and the image gets an overlay of basic-white with 50% opacity.
StatesGrayWhite
Defaultdefault: gray default: white
Hover / focushover/focus: grayhover/focus: white

Bars#

  • The title uses the text-style large bold.
  • The subhead comes in the text-style small.
  • The line-height is set to default.
  • The background-color always has an opacity of 90%.
TypesAttributesPreview
Gray text-color: basic-white
background: gray-darker		bar gray
White text-color: gray-darker
background: basic-white		bar white

Spacing & measurements#

 TypesAttributesPreview
 Horizontal spacingpadding: 16pxHorizontal spacing
Vertical spacingpadding: 16px
distance: 2px		Vertical spacing
Spacingmargin-bottom: 16pxSpacing
Sizedefault size of 4:3Spacing

What can be modified?#

  • Override the text and bars.
  • Adjust the ratio to any size but please try to stick to a 4:3-ratio.

Our workflow in Sketch#

  • Use the "Overrides" function to customize the teaser in the three possible variants (for example, select "None" for the bar element to display just an image teaser).

Change log#

10.0.0 Fundamental & 10.0.0 Web - 2022-05-30#

Changed#

  • Sketch: "Teaser" | Adjusted to new grid settings

9.0.0 Fundamental & 9.0.0 Web - 2022-05-03#

Changed#

  • Sketch: "Teaser" | Adapted component to new grid settings

8.1.0 Fundamental & 8.1.0 Web - 2021-07-22#

Changed#

  • Doc: "Teaser" | Clean up the documentation for the right structure and sentence case

6.0.0 Fundamental & 6.0.0 Web - 2021-03-22#

Changed#

  • "Teaser" | Changed symbols: with layer-style settings

5.6.0 Fundamental & 5.6.0 Web - 2021-01-26#

Fixed#

  • "Teaser" | Fixed symbols: overrides function and bar settings

4.4.1 Core & 4.4.1 Web - 2020-05-07#

Fixed#

  • "Teaser" | Fixed symbols: line height and height of bars

4.2.0 Core & 4.2.0 Web - 2020-01-16#

Changed#

  • "Teaser" | Changed symbols to new smart layout of Sketch