Hero: Actions

Location

Home
Hero: Actions

Favourite
Share

Action modules

Action: Default

Action: Default — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Action: Horizontal · Button External Site

Action: Horizontal · Button External Site — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

External Site

Action: Horizontal · Button New Tab

Action: Horizontal · Button New Tab — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

New Tab

Action: Horizontal · Button size Long

Action: Horizontal · Button size Long — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Action: Horizontal · Button size Small

Action: Horizontal · Button size Small — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Action: Horizontal · Button size Regular

Action: Horizontal · Button size Regular — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Action: Horizontal · Button size Large

Action: Horizontal · Button size Large — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Action: Horizontal · Button style Solid Regular

Action: Horizontal · Button style Solid Regular — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Action: Horizontal · Button style Border Primary

Action: Horizontal · Button style Border Primary — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Action: Horizontal · Button style Border Regular

Action: Horizontal · Button style Border Regular — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Action: Horizontal · Button style Link

Action: Horizontal · Button style Link — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Action: Horizontal · Button style Link Back

Action: Horizontal · Button style Link Back — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Action: Horizontal · Primary scheme · Button style Regular For Primary Background

Action: Horizontal · Primary scheme · Button style Regular For Primary Background — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

All button styles can be used for any layout

Action: Horizontal · Style Moana Blue

Action: Horizontal · Style Moana Blue — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Action: Horizontal · Background Colour Moana Blue · Dark scheme

Action: Horizontal · Background Colour Moana Blue · Dark scheme — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Action: Horizontal · Style Obsidian Black

Action: Horizontal · Style Obsidian Black — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Action: Horizontal · Background Colour Obsidian Black · Dark scheme

Action: Horizontal · Background Colour Obsidian Black · Dark scheme — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Action: Horizontal · Style Volcanic Red

Action: Horizontal · Style Volcanic Red — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Action: Horizontal · Background Colour Volcanic Red · Dark scheme

Action: Horizontal · Background Colour Volcanic Red · Dark scheme — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Action: Horizontal · Style Awa Green

Action: Horizontal · Style Awa Green — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Action: Horizontal · Background Colour Awa Green · Dark scheme

Action: Horizontal · Background Colour Awa Green · Dark scheme — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Action: Horizontal · Narrow intro

Action: Horizontal · Narrow intro — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Action: Horizontal · Top

Action: Horizontal · Top — with vertical alignment set to Top, the title and this multi-line description anchor against the top edge of the row while the button column sits at the same upper baseline. Useful when the body copy is taller than the CTA and the visual emphasis should rest on the heading; the button reads as a subordinate action.

Action: Horizontal · Centre

Action: Horizontal · Centre — with vertical alignment set to Centre, the title and this multi-line description balance against the button column on the row mid-line. This is the default treatment and works for most copy lengths — the heading and the CTA share equal optical weight regardless of how the description wraps.

Action: Horizontal · Bottom

Action: Horizontal · Bottom — with vertical alignment set to Bottom, the title and this multi-line description sink against the bottom edge of the row alongside the button column. Useful when the section sits above another tall element and you want the CTA-and-copy pair to hug the boundary, leading the eye into what follows.

Action: Horizontal · Boxed section

Action: Horizontal · Boxed section — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Action: Horizontal · Background Image · Dark scheme

Action: Horizontal · Background Image · Dark scheme — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Action: Horizontal · Background Video · Dark scheme

Action: Horizontal · Background Video · Dark scheme — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Action: Vertical · Left

Action: Vertical · Left — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Action: Vertical · Centre

Action: Vertical · Centre — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Action: Vertical · Right

Action: Vertical · Right — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Action: Vertical · Boxed section

Action: Vertical · Boxed section — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Action: Vertical · Centre · Background Colour Moana Blue

Action: Vertical · Centre · Background Colour Moana Blue — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Action with Media modules

Action with Media: Default

Action with Media: Default — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Solid Primary

Action with Media: Image

Action with Media: Image — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Solid Primary

Action with Media: Video

Action with Media: Video — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Solid Primary

Action with Media: Testimonial

Action with Media: Testimonial — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

David Attenborough Natural Historian

Solid Primary

Action with Media: Media right

Action with Media: Media right — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Solid Primary

Action with Media: Constrained width · Image left

Action with Media: Constrained width · Image left — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Solid Primary

Action with Media: Constrained width · Image right

Action with Media: Constrained width · Image right — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Solid Primary

Action with Media: Boxed section

Action with Media: Boxed section — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Solid Primary

Action with Media: Style Moana Blue

Action with Media: Style Moana Blue — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Solid Primary

Action with Media: Background Colour Moana Blue · Dark scheme

Action with Media: Background Colour Moana Blue · Dark scheme — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Solid Regular

Action with Media: Style Obsidian Black

Action with Media: Style Obsidian Black — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Solid Primary

Action with Media: Background Colour Obsidian Black · Dark scheme

Action with Media: Background Colour Obsidian Black · Dark scheme — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Solid Regular

Action with Media: Style Volcanic Red

Action with Media: Style Volcanic Red — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Solid Primary

Action with Media: Background Colour Volcanic Red · Dark scheme

Action with Media: Background Colour Volcanic Red · Dark scheme — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Solid Regular

Action with Media: Style Awa Green

Action with Media: Style Awa Green — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Solid Primary

Action with Media: Background Colour Awa Green · Dark scheme

Action with Media: Background Colour Awa Green · Dark scheme — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Solid Regular

Action with Media: Flip order on mobile

Action with Media: Flip order on mobile — this longer description gives the renderer enough copy to wrap onto multiple lines, exercising the module's text-flow, scheme contrast, and intro-width spacing rules in a realistic way.

Solid Primary