Mono Hero (teaser)

Description

Hero components in general are sections on their own and shouldn't be nested in Base or Content Layout Container components. The Mono Hero component is meant to be a single teaser or call to action component (CTA).

More text or different positioning of content can be achieved with standard Content Layout Container with equivalent background, Column Control component, Richt Text and Button Component, while Mono Hero component is more concise and faster implemented.

Several background color, background image brightness, background image positioning or button coloring options are shown below in the section "How to built a mono-hero" component.

See Button component for prioritisation (button colors).

Usage

  • The Mono Hero is mainly placed on the homepage (startpage), overview pages or on campaign pages
  • It mustn't being nested inside other components (like the Base Layout Component, Content Layout Container, Column Control, Swiper Slider)
  • Desktop and Mobile 

Component Content

  • Headline (Text input). The headline is currently not rendered as a headline because it does not really introduce a new content section.
  • Teaser text (Text input)
  • Background color or Background-image. Background-image can be optionaly darkened or lightened
  • The background image headline and text is automatically fetched from the page properties of the linked page but can be changed by the content editor.
  • Button (optional) with link 

Demonstration (see below)

Teaser headline up to 30 chars Teaser text up to 90 charakters

Same background image but darken image mode, positioned left bottom

Still the same background image but lighten image mode, positioned center top

Still the same background image but positioned fixed and no brightness option selected

How to build a mono-hero-teaser

 
 
Background properties for "Mono Hero"
Background properties for "Mono Hero"

Once the component has been placed, doubleclick it or choose the wrench tool at the component to get a setup modal and follow the step-by-step instructions.

Enter a "Headline" ❶ and "Teaser Text" ❷ for this component. The amount of text therefor should be short and succinct. We suggest:

  • a maximum of 30 characters for the headline
  • up to 90 characters for the italic styled teaser text. Not more than 3 lines in sum would be best.

❸ Background Type: Determine the type of background you want to have. You can choose between two types of background: Background colour or Background image.

❹ Background colour: if you select it, you have to choose one of the 4 predefined brand-colours.

❺ Background image with following options:

❻ Background Image options: if you select it, you have to choose an image (to be imported from the DAM) and determine how the image will be rendered under three combinable properties:

  • Normal: When the image is dark and the white text is readeable without darkening or lightening.
  • Lighten Image: A white overlay will be added on the image to gain more contrast to the placed text. To use with bright images.
  • Darken Image: A dark overlay will be added on the image to gain more contrast to the placed text. To use with relatively dark images.

❼ Background Image Positions: Positioning the image with one of this eight options:

  • Center: Horizontally and vertically centered
  • Left-bottom: Horizontally aligned on the left and vertically centered 
  • Right-bottom: Horizontally aligned on the right and vertically centered 
  • Centered-top: horizontally centered and vertically aligned on the top 
  • Centered-bottom: horizontally centered and vertically aligned on the bottom
  • Centered-left: vertically centered and horizontally aligned on the left
  • Centered-right: vertically centered and horizontally aligned on the right
  • Fixed: The background image will be "fixed" will not scroll with the page

❽ Background Image Size: This option specifies the size of the background image with one of this two options:

  • Cover: Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges.
  • Contain: Resize the background image to make sure the image is fully visible.

It is strongly recommended to add a CTA button (call to action component) with a link. The button is not part of the "mono-hero-teaser" module. It must be integrated manually. To do this, add by drag&drop a "button component" below the Headline/Teaser Text. It can be styled as explained here.