Hero banner

The Hero banner pattern displays a large heading, introductory text and a call to action over an optional, large background image.

Background image template

So that it can be positioned reliable across a variety of screen sizes, the background image must follow this template. Use the Photoshop template below to generate new banners that are compatible.

• Hero banner Photoshop template

Usage

• Background images are optional, but if present should be 1905px x 362px and created with the Photoshop template (see above).

Syntax

Options

• By default there is no background image, you'll need to supply this by attaching inline style on <div class="hero-banner">. For example: <div class="hero-banner" style="background-image: url(path/to/image.jpg)">.

Examples