Hero
A summary of a pages content that sits at the top of a page.
Breakdown
Header is a complex grouping of components that appears at the top of a page. It contains components of various heading sizes, buttons and colours.
There are multiple headers available, each houses an image container or varied sizes to best suit the type of supporting image that is required on a page.
Hero - General
Hero - General uses an inset image with a ratio of 3:2.
Heading 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a felis quis nulla mollis interdum eu a risus.
Hero - Banner
Hero - Banner uses an overlap wide image with a ratio of 10:4.
Hero - Full bleed
Hero - Full bleed uses a 50/50 image that goes to each edge of the header container.
Heading 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a felis quis nulla mollis interdum eu a risus.
Hero - Full height
Hero - Full height uses a image that goes to the top and bottom edges of the header container.
Heading 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a felis quis nulla mollis interdum eu a risus.
Hero - Sim card
Hero - Sim card uses a crop of the brand octopunct for an image container.
Heading 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a felis quis nulla mollis interdum eu a risus.
Hero - Video (Informational)
Hero - Video (Informational) allows the placement of video content to be used in the hero space. When the play button is clicked, the text container disappears revealing the video and video controls. When pause is pressed the text container reappears. The text container is styled using the same spacing rules as the other headers.
Heading 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a felis quis nulla mollis interdum eu a risus.
Hero - Video (Decorative)
Hero - Video (Decorative) allows the placement of video content to be used in the hero space. The video auto plays on page load and only has a pause and play control.
Heading 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a felis quis nulla mollis interdum eu a risus.
Usage
Hero banners are to be used at the top of a page, following the navigation. The type of content needed depends on the type of hero needed. The Hero banner is a versatile pattern.
Anatomy
