Call to Action Component

← Return to the Drupal User Guide

The Call to Action (CTA) component inserts lead text and an accompanying button designed to capture the user's attention and direct them to another part of the website. The Call to Action component can be inserted into any of the main page content regions.

Elements

1. Title (required, not displayed)
2. CTA Lead Text
3. CTA Link
4. CTA Style (required)
   1. Options: Double Border (lead text + link), Minimal (lead text + link, default), Big Button (link only; lead text is not displayed)

Figure: The Call to Action component fields.

Examples

Interactive Example

The preview below shows the Call to Action component using its default configuration.

To experiment with different styles and other settings, open the interactive component playground.

Open Component Playground

Step-by-step Instructions

1. Provide a Title for the component. Note: This is used for internal purposes only and is not displayed to visitors.
2. Enter the CTA Lead Text (limited to 115 characters). This message should encourage users to click the accompanying button (if using a style that displays both lead text and a button).
3. Add a CTA Link that points to another page. You can search for an internal page by typing its title into the Link field. After selecting the page, you may edit the automatically generated Link text if desired.
4. Select the CTA Style for the component. There are three options: Double Border, Minimal, and Big Button. See the interactive example above. Note: The Big Button style displays only the CTA Link; the lead text is not shown.
5. Click Save to create or update the component.