Secondary call-to-action
The secondary call-to-action pattern displays a heading, some introductory text, a call-to-action button and a background image.
Rules for secondary call-to-action
- You must only use one secondary call-to-action per page.
- Can only be used on full width page layouts.
- You may use a transparent overlay over the background by adding
secondary-call--overlay
followed by the colour selector classsecondary-call--color-transparent-overlay
to the secondary-call div. - You must use at least one call-to-action button, but not more than three.
- Heading text must not exceed 100 characters.
- Paragraph text must not exceed 350 characters.
CSS classes for approved background colours
secondary-call--blue-transparent-overlay
secondary-call--orange-transparent-overlay
secondary-call--burgundy-transparent-overlay
secondary-call--purple-transparent-overlay
Options available
Blue transparent overlay
Orange transparent overlay
Burgundy transparent overlay
Purple transparent overlay
Default text center aligned - deprecated
This option is no longer supported
This old method of implementation is deprecated and will be removed in a future version of the digital pattern library.
News and events
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor massa eget metus molestie fermentum. Pellentesque interdum sem nunc, vitae blandit tellus tempus eget.
News and events
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor massa eget metus molestie fermentum. Pellentesque interdum sem nunc, vitae blandit tellus tempus eget.
Text left aligned - deprecated
This option is no longer supported
This old method of implementation is deprecated and will be removed in a future version of the digital pattern library.
News and events
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor massa eget metus molestie fermentum. Pellentesque interdum sem nunc, vitae blandit tellus tempus eget.
News and events
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor massa eget metus molestie fermentum. Pellentesque interdum sem nunc, vitae blandit tellus tempus eget.