Introduction banner

Owned by Jess Pietsch (Unlicensed)
Last updated: 07 Mar, 2024 by Marcella Marino
2 min read

A step-by-step guide for adding the introduction banner component in the CMS

Links used in the introduction banner are part of our life events approach for digital content and should therefore only be used to link to other Landing page content.

To view the front-end design of the Introduction banner, visit the Ripple design system.

How to add an introduction banner

  1. Find your page and select Edit.

  2. Go to the Header extras tab.

  3. Click the Add Component button and choose Introduction banner.

Required fields:

  • Title

  • Summary

  • Banner type

    • Standard

    • With icon – adds an exclamation mark symbol next to the title of your introduction banner

  • Banner display type

    • Featured links – adds an underlined style to your links as well as an arrow at the end

    • Buttons – adds a button style to your links

Optional fields:

  • Links:

    • URL – the link to a page or website you'd like to highlight.

    • Link text / Button label – call to action text used for the featured link or button. 

Usage

The Introduction Banner Component is used to highlight or promote important and relevant information on landing pages. It should not be used to promote or highlight information across multiple pages or include an image with this information. Instead, use the Primary or Secondary Campaign Component.

Design

Featured links and buttons should help users perform key tasks and should not replicate navigation items that exist elsewhere on the page. Featured link text should be no more than 10 words, and button labels should be no more than 3 words.

The exclamation mark icon next to the banner title is not customizable, nor is the background colour of the Introduction Banner Component.

 

 

Â