Desktop view

Desktop view

How it works
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
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.
Crosslinks
Reference for publisher

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