Hero Banners

1 column text with background

Simple hero component with 1-col text element. Utilises a background image element.

Implementation tip
When selecting non-CMS hero images, use combo classes. I.e. remove the .bg-placeholder class from .c-hero and apply a unique combo class (.bg-forest or .bg-services).

Heading 1

Heading 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.

2 column text + CTA

Hero component that utilises 2-col text layout. Stacks on mobile landscape.

Implementation tip
When selecting non-CMS hero images, use combo classes. I.e. remove the .bg-placeholder class from .c-hero and apply a unique combo class (.bg-forest or .bg-services).

Heading 1

Heading 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Button Text

2 column text + form

Hero component that utilises 2-col text layout with 3 field form on right-hand side. Stacks on mobile landscape.

Implementation tip
When selecting non-CMS hero images, use combo classes. I.e. remove the .bg-placeholder class from .c-hero and apply a unique combo class (.bg-forest or .bg-services).

Heading 1

Heading 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

Heading

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

1 column text with form

Hero component with 1-col text and 3 field horizontal form.

Implementation tip
When selecting non-CMS hero images, use combo classes. I.e. remove the .bg-placeholder class from .c-hero and apply a unique combo class (.bg-forest or .bg-services).

Heading 1

Heading 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

1 column text with breadcrumbs

Breadcrumbs hide on mobile landscape and below. Can be combined with other hero types (form, cta etc.)

Implementation tip
When selecting non-CMS hero images, use combo classes. I.e. remove the .bg-placeholder class from .c-hero and apply a unique combo class (.bg-forest or .bg-services).

Heading

Heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.
Parent 2
Parent 1
Current Page

1 column text with dual CTAs

Hero component with 2 CTAs

Implementation tip
When selecting non-CMS hero images, use combo classes. I.e. remove the .bg-placeholder class from .c-hero and apply a unique combo class (.bg-forest or .bg-services).

Heading 1

Heading 2

Praesent dapibus, neque id

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Button Text

Phasellus ultrices nulla qis nibh

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Button Text

1 column text with primary form, secondary content

Hero component with form and secondary CTA content

Implementation tip
When selecting non-CMS hero images, use combo classes. I.e. remove the .bg-placeholder class from .c-hero and apply a unique combo class (.bg-forest or .bg-services).

Heading 1

Heading 2

Primary form header

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.