Double Call to Action Bar

A flexible tool for wayfinding

Gallery Image

Demo - Motivate users to take an action

Place your most important link here. Use this space to encourage users to interact with the link.

Action-led link text
Netherlands

A short one line heading

You have up to 60 words to make users want to navigate to your linked page. Use a similar amount of copy each side to maintain a balanced appearance.

Enticing link text

Overview

A flexible tool for wayfinding 

The Double Call to Action Bar is a legacy component designed to encourage user journeys. Primarily, it's used for:

  • Linking to related content

  • Promoting marketing assets like brochures and reports

In many cases, List Spotlights is a more effective option. However, the Double Call to Action Bar can add variety to pages with multiple outward journeys.

Importantly, the Double Call to Action Bar shouldn’t be used to direct users to a form, such as a contact or claims form. There are other components specifically designed to do this, including:

How to use it

Step 1: Create a new content block

When you select the Double Call to Action Bar, you’ll be given two options:

  • Add new content block
  • Add existing content block

Select ‘add new content block’.

Name the content block by completing the ‘block description’ text field. Content blocks are reusable. So it's important to give the block a unique, context-specific name that's easy to search for. For example:

  • Professional Indemnity brochure PDF

Add a heading

The heading should set up the action you want users to take. You have up to eight words (38 characters) to motivate users to interact with the button. Don’t run onto a second line.

Add your text

Use the text box to elaborate on your heading. Check the Rich Text Editor box to format your copy.

You have a word count of up to 60 words. Don’t run onto a fifth line.

Make sure that both text fields occupy the same number of lines. This is important for maintaining symmetry.

Step 2: Make the link

The link is made up of a URL and link text.

Connect the link

Use the ‘button URL’ text field to add the URL. If it’s an internal page, you can search for the page and select it from the dropdown options that appear as you type.

Enter external URLs in full, e.g. https://www.example.com.

Add the link copy

Use the ‘link text’ field to add your link copy.

Effective link copy is clear and actionable. For example:

  • Find out more
  • Download brochure
  • Learn more

Select 'create content block' to save the new content block to the CMS. 

Step 3: Add the images

Choose images that are engaging, work well together, and are relevant to the content you’re linking to.

You need to add an image to both sides individually. If you add an image for one side, then you must add an image for the other.

Select either ‘left image’ or ‘right image’. Then choose ‘select image’.

You can select an existing image or import a new one.

To upload a new image, select ‘import image', then ‘select file’.

Add a title and alternative text, then choose ‘select image’.

For more information about uploading images to the CMS, see the ‘Image Guidelines’ advice.

Do's

  • Maintain symmetry

    What you do to one side of the component, you must do to the other. This includes using images and adding text that occupies the same number of lines.

Don't

  • Don't link unnecessarily

    Only link to content that's relevant and adds value for users.