Jumbotron

This is the name for the full width header at the top of this page. It consists of the following elements:

• Image 1366x300 pixels (central content area 414x300)
• Title
• Body text
• Button text and link
• Colour pickers for the text and background colours

Text shouldn't be embedded in these images as it'll be distorted when the image resizes and become completely unreadable in mobile view.

As the page resizes downwards the sides of the image are cropped, the height is always 300px. On most current (June 2021) mobile screens it will crop to 414x300px. In the example above the main content is within a central area 414px wide with negative space either side.

Example of responsive cropping

Below is an example of how the jumbotron looks on a mid sized (laptop) screen. 

Below is an example of how it works on a mobile

Related content

• Effectiveness of rotating carousels