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
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.