Desktop view

screenshot slogan header desktop

Desktop view

screenshot slogan header mobile

How it works

  • The 'Slogan' consists of a colored background (full width) with a Slogan over it with high contrast (from a set of color combinations, e.g.: White slogan text over dark grey). The slogan is not a headline, the main headline (h1) will be kept, after the slogan.
  • This style can either be shown on all viewports or limited to only XS and S viewports.
  • Four background colours are available. In addition to white, chocolate (default), tundora and carbon can be combined.
  • Three text sizes are available, the middle is default.

How to use it

  • The slogan style page head is a special header in order to have a continuous visual experience from social channels like Instagram to ubs.com. These channels are consumed mainly on mobile devices, an option allows therefore to display only on XS and S view ports.
  • If the slogan style is applied to all viewports, the font sizes large or extra large should be used in order to have a good visual hierarchy of the typography on larger screens.

Reference for publisher

AEM view

For creating slogan style page head, first you have to activate "Slogan Style" in the page head component.

AEM view