Homepage Hero Banner

Text here

Home
Component Library

Hero Banner Masked Small

Small mask. No CTA. Blue. Mask Mobile Bottom.

Hero Banner Masked Small
Hero Banner Masked Small

Hero Banner Masked Large

Mask Large. Stone. CTA. Mobile Mask Bottom.

Contact us
Hero Banner Masked Large
Hero Banner Masked Large

Hero Banner Masked Small

Small mask. Purple. No CTA. Mask Mobile Top.

Hero Banner Masked Small
Hero Banner Masked Small

Hero Banner Mask Large

With CTA. Yellow. CTA. Mobile Mask Top.

Home
Hero Banner Mask Large
Hero Banner Mask Large

Hero banners

There are 3 hero banner types to choose for a page. Screenshots below to show selection name and what it looks like. This is the default background colour. 

Hero Banner
(white BG selected)

This is a full sized image background. This is a good example:

This is a bad example:

Hero Banner Masked
(white BG selected)

This hero can be in purple, stone, blue or yellow.
There are 2 mask options. This is "Small"

This is "Large" mask option.

Hero Banner Narrow
(white BG selected)

Colours available are blue, stone, yellow or purple

Back to Component Library

Back to Component Library

Click here to get back to our component library and view a different type of component.

Component Library