UI MarCom

Hero Block Stable Dark theme

The Hero Block works well for a conspicuous entrance, for example, on product pages or special topic detail pages where the content starts with one hero image.

General guidance

There are two types of the Stage available. The dark version including the key visual has a strong brand character. The light version is used with editorial images.

The Hero Block contains a text area on the left side and an image area on the right side. The headline in the text area is mandatory. Subheadline and copy text are optional. The image format is set by the aspect helper to 16:9. The Hero Block can also contain a video – if so the aspect ratio is also fixed to 16:9. Videos play directly in the image area; the text panel will not move.

Hero Block usage sample on desktop
Hero Block usage sample on desktop

A Hero Block can be used when there is no Stage or Multimedia Container.

Structure

Hero-block structure
Hero Block structure on desktop
Hero-block structure
Hero Block structure on mobile
  1. Headline Mandatory
  2. Subheadline Optional
  3. Image Mandatory
  4. Intro text Optional