Overview
The H1 Large banner area is a block designed to be used in the top level pages of the programmes’.
It has two variations. One with a total black area on the left and a more squarish image and one with a transparent black area and a wider image that extends behind the black area.
There block has also two variations regarding its height. There is one with 469px fixed height and one with 585px fixed height.
It consists of the breadcrumbs, a tag line, a title, a description, an image and CTAs.
Τhe cards on first view display an image a category and a title. Then, on hover an animation is being triggered showing also a description and a CTA.
This is an example of a 469px height with non transparent background.
(You can not add more than one H1 large banners in a page so we can’t examples with the other variations here)
H1 Large banner area
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue est at ante egestas aliquam et at neque. Praesent fringilla magna non tempus suscipit. Quisque vestibulum aliquam elit at varius. Maecenas finibus odio massa, nec placerat metus scelerisque vel. Nunc sit amet lacus lacus.
Rules
You should only use this block on top of the page right below the mega menu navigation. Also, it should take up the whole screen and it should never be placed in columns.
Analytically for each news feed block:
- Tag line: (mandatory) – A very short tag line relevant to the programme. Automatically converted to caps
- Title: – Completed automatically, it is the page name
- Description: (optional) – Short paragraph complementing the title. Recommended height: 4-5 rows
- CTA: (optional) – Two or one CTAs. Use them only for the top actions you want the user to take in the page.
- Image: (mandatory) – An image relative to the programme.