Use these page header components to explain the concept of the page narrative at the top of their respective page templates.
Hero Main Header
It is important that the ovoenergy.com homepage sets the scope for new users and underlines the OVO brand promise. The homepage hero is used to drive home these messages at the top of the homepage.
The ovoenergy.com homepage always begins with a strong brand message
The brand message can only be edited in consultation with brand@ovo.com to ensure consistency across brand channels.
The “Hero Promo” carousel is there to promote high priority products, services or campaigns that are a current priority for OVO. This can can contain from 1 up to 4 rotating promos.
Editors should think carefully about what to show in the carousel. A more limited number of promos in this carousel will increase the chance of them being seen and taken in by users. If there is a key campaign that is really important for OVO, editors should consider only including that as a single promo, which will disable the carousel function.
Functionality:
- Each slide automatically transitions every 5 seconds
- Users can click on tabs to manually select a specific slide
- A pause button lets users stop the automatic slide transitions
- Card transitions are on by default when the page loads
|
Composition |
Specification |
Configurable components |
Nested patterns / content blocks |
|---|---|---|---|
|
Homepage Heading |
Brand message with integrated image. Max character guidance: 50 chars |
|
|
|
Actions |
CTAs pushing to a key OVO message or Postcode input |
1 - 2 CTAs / postcode form / off |
|
|
Promo rail |
Each slide automatically transitions every 5 seconds |
1 - 5 promo slots are available. If only one is populated the Rail tabs will not be shown |
|
|
Rail tabs |
Users can click on tabs to manually select a specific slide |
|
|
|
Pause button |
Rail transitions are on by default when the page loads. Pause button will pause auto rail transitions and all video playback. |
|
|
Hero Main Header Cards
To give the homepage a special sense of impact and make it recognisable for repeat visitors the Hero Promos sit only within the homepage carousel.
They can look drastically different depending on the images used. There is a dark theme which can use green in the title and a version for on green which only uses white for accessibility reasons.
There always needs to be a title and CTA but body copy is optional to allow for a simpler more impactful message if needed..
|
Composition |
Specification |
Configurable components |
Nested patterns / content blocks |
|---|---|---|---|
|
Heading |
Max character guidance: 50 chars |
|
|
|
Body text |
Max character guidance: 150 chars |
on / off |
|
|
Button |
Colour defined within the card theme. |
|
|
|
Link |
Max character guidance : 40 chars |
on / off |
|
|
Image |
Export size: 2270 × 1200
Rendered size: |
|
|
Hero Campaign Header
Campaign pages are designed to market OVO’s big promotions and funnel users to a strong CTA. It’s important that they have a strong brand presence but differ from the homepage.
Users may land on these pages without having visited the site before, so it’s important that the page is visually engaging and clearly communicates both the OVO brand and the attributes of the campaign.
Within each component the “Title” is required. All other elements are optional, these include:
- an optional “eyebrow” which can be text or graphic. This can be used to preface the title with a sub title such as OVO Beyond or OVO Live
- Optional body copy
-
an optional banner that only appears during the campaign's limited run and will display the campaign's end date
There are several flexible options for a campaign page hero.
- Text and logo
- Text only: These are a simple way of spinning up a campaign page without the need for complex imagery. If you are unsure how to get the right imagery for a campaign this is a great fallback option.
- Image & text left aligned.
- Image and text centre aligned
|
Composition |
Specification |
Configurable components |
Nested patterns / content blocks |
|---|---|---|---|
|
Sub title / sub graphic |
There are 2 options here: 1:1 logo or suitable image or short text |
logo / text / off |
|
|
Campaign title |
Max character guidance : 60 chars |
|
|
|
Intro text |
Max character guidance : 250 chars (Centred text 150) |
Intro text: on / off |
|
|
Background media |
Export image size:
Rendered image size: Video has no sound |
image / video / off |
|
|
Banner |
Will only appear during the campaign's limited run and will display the campaign's end date |
Banner: on / timed / off |
|
|
Pause button |
Only shows when video is used |
|
|
Overview Header
Overview pages have been introduced to provide a wider context around OVO products and services to increase the chances of users understanding what’s on offer and continuing their OVO journey.
This is a simple informational header for what should be simple informational pages.
Editors can choose to use an image, but only on desktop as it would take up too much space on mobile and prevent users from seeing options. The intro copy and short legal text is also is also optional.
|
Composition |
Specification |
Configurable components |
Nested patterns / content blocks |
|---|---|---|---|
|
Title |
Max character guidance : 60 chars |
Title colour: start / end / off |
|
|
Intro text |
Max character guidance : 250 chars |
Max character guidance : 250 chars |
|
|
Small text |
Max character guidance : 40 chars |
Max character guidance : 40 chars |
|
|
Image |
Export image size:
Rendered image size: |
|
|
Product Detail Header
Used for larger content sections particularly on destination pages or to describe complex concepts. Can be used to create long sections punctuated by images.
Functionality: Users can navigate through the gallery by clicking or tapping on the pagination. If only one image is used, the gallery controls don’t show.
|
Composition |
Specification |
Configurable components |
Nested patterns / content blocks |
|---|---|---|---|
|
Label |
Max character guidance: 30 chars |
on / off |
|
|
Title |
Max character guidance: 60 chars |
Title colour: start / end / off |
|
|
Body text |
Max character guidance: 600 chars |
|
|
|
Actions |
Max 2 configurable CTAs |
1 - 2 / off |
|
|
Image |
Export image size:
Rendered image size: Layout options for left or right on desktop only |
Layout: Left / Right (desktop only) |
|
|
Small text |
Max character guidance: 40 chars |
on / off |
|
Article Launcher Header
The Hero provides an area to include a featured article which should be a popular subject or thought provoking article that will interest users.
|
Composition |
Specification |
Configurable components |
Nested patterns / content blocks |
|---|---|---|---|
|
Title |
Max character guidance : 60 chars |
Title colour: start / end / off |
|
|
Intro text |
Max character guidance : 250 chars |
on / off |
|
|
Featured article |
Most recently published AND tagged as featured
Export image size:
Rendered image size: |
on / off |
Block - Article |
Article Header
The Article Masthead is used at the top of a Blog or Article page to grab attention and set context for the user.
Users may land on these pages without having visited the site before, so it’s important that the image and heading are engaging and clearly communicate the topic and the OVO brand.
|
Composition |
Specification |
Configurable components |
Nested patterns / content blocks |
|---|---|---|---|
|
Image |
Export image size:
Rendered image size: |
|
|
|
Breadcrumb |
User can click the breadcrumb to jump to a page further up the hierarchy. |
|
|
|
Heading |
Max character guidance: 70 chars |
|
|
|
Badges |
Displays the pages content categories |
|
|
|
Date |
Displays the original publication date |
|
|
|
Button |
Allows users to share the article |
|
|
Generic Header
The Generic page template is there to cover all bases and make sure there is a way of spinning up miscellaneous pages that don’t quite fit into major page templates or the navigation system easily.
This hero is very simple, consisting of a title with optional buttons, imagery and copy
|
Composition |
Specification |
Configurable components |
Nested patterns / content blocks |
|---|---|---|---|
|
Title |
Max character guidance: 60 chars |
|
|
|
Text |
Max character guidance: 600 chars |
on / off |
|
|
Actions |
Max character guidance: 60 chars |
1 / 2 / off |
|
|
Image / gallery |
Export image size:
Rendered image size: |
on / off |
|