Title

Subtitle

Hero Banner with hotspot


Subtitle

Standard 1 column hero banner

Uses title, body and button. Text aligned to lower left. Container height is not set and defaults to image height

2 column banner

Parent container classes: full-height-children background--gradient-cobalt-violet

1st column:

Title class: headline-xl

Text alignment: middle left

Text width: 100%

Background classes: pt-5 pb-5

2nd column:

Container class: pt-5 pb-5 rounded-images

Text Over Image

Banner type: Text over Image

Banner height: medium

Text placement: middle left

Text width: 1/3

Title class: h3

Body class: hidden-sm-down (hides text on mobile)

Hero Banner

Full-Bleed, Screen Height

light theme with black text

Short Banner

Text Placement: Middle Left -

Branding prefers text to be bottom left, middle left, or top left.

Medium Banner

Text Placement: Bottom Left

Text Width: 1/4

Text Alignment: Left

Tall Banner

Text Placement: Top Left

Text Alignment: Left

Hero Banner

Text in Card

Hero Banner

Half and Half

Dark theme with light text

Background class: background--brand-primary

Hero Banner

Background video

Hero Banner

Play once and hide video

This will play a 40 second video that will hide when done and then show a "replay" button (Play background video once and hide).


It will also only play the video when the entire video is in the viewport (Play background video only when fully in view).

Banner with embedded Video component

Any Page Designer component can be embedded between a Hero Banner's title and body by using the Embedded Component region.

FOR MOTHER EARTH
Grips that give back to our planet
image alt text

GIF test module

GIF test