Theme header

A coloured area/border in the top of a page (above the bread crumbs).

Guidelines

The purpose is to highlight a page a bit more, and make pure text pages less 'bland'.

Usage

The Theme header can be used on any page when there is no Welcome block. The editor can choose theme header colour and it is displayed with a random version of the fifth element.

Behaviour

No special behavior other than that the width will change in regards to the viewport.

Do's and don'ts

Do

  • Use it on pages that lack colour and content, such as a generic page with just an image at the top and then some text.

Don't

  • Don’t use it on a page with a Welcome block.
  • Don't use it on a page where you feel there is important content or conversions at the top (since it moves them down slightly). 

 

Code

Styles

Theme colours: Green, blue, purple, red and yellow