Simple Header

Description

The Simple Header Component is the header to be used for most of the content pages whereas the Homestage Component is to be used for Homepages or Main pages of microsites.

This header contains the H1-Headline of the webpage which is the topmost and most important headline.

Usage

There are 2 style (or size) options available:

  • "Normal" is the default value and and should be the standard size for most of the pages.
  • "Small" size is meant for pages with "lower interest" like pages with legal disclaimers etc.

Additional copy text below the headline is optional

The headline text should not exceed 3 lines (about 30 characters).
The additional text should also not exceed 3 lines (about 90 characters).
The component provides character limitations, but we recommend mentioned values.

Demonstration

Below are some examples of simple header component in several variations.

Simple Header with "normal" header style

… and with additional Text

Simple Header with "small" header style

… and with additional Text

Simple Header with "normal" header style

… and with darkened Background Image

Simple Header with "small" header style

… and no darkening mode for background image

How to build a Simple Header Component

Simple Header: General Properties

 

 

 

Insert per "drag&drop" the "Simple Header" component at the top of the page just below the top navigation - see picture on the left. 
Doubleclick on the "Simple Header" or choose the wrench tool at the component to get a setup modal for the Simple Header.

In the "Properties" you can configure:

❶ Header Style: "Normal" or "Small"

❷ The alignment of the text into this header: "Center" or "Left"

❸ The path of the image (if needed).

❹ Headline: The main text for this header/page as well as the formatting of the text (Bold or italics). This will be the H1.

❺ Additional Text: The additional text that will be placed under the H1.

Simple Header: Background Color Properties

In the "Settings" you can configure the backgound type by selecting "Background Color" or "Background Image".

❻ If you want a background-color, please select "Background Color".

❼ You can choose between 5 colors: Orange, Green, Yellow, Light Green or bg-secondary (dark blue-grey).

Simple Header: Background Image Properties

There is an opportunity to apply a background image. Please be sure to have a large contrast between text and background image.

❽ If you want a background-image, please select "Background image".

❾ Place per "drag&drop" an image (selected in the DAM)  on the "Drop an asset here" area.
It is possible to make this background image darker (darked overlay) by checking the box "Is Background Image Darked?". This can be useful in particular when the image has a bright tonality/colors.
In case the Image is too bright a darker option is available.

Some examples are available at the top. Please refer to them.