Call To Action

Introduction

The Call To Action Component (CTA) is meant to bring the user’s focused attention to brief, but important, messages and entice the user to take actions. The primary use of this component is to be the first piece of content a user interacts with on a page.

Note: In the One theme, this component is included by default on all home page types at the top of the page. If left unconfigured, the component will vanish on published pages, but remain configurable in edit mode.

The CTA component embeds three additional subcomponents: the Call to Action Link component, the Adaptive Image component, and the Media External component. These components come pre-packaged with the CTA, but must be configured separately.

Note: Please keep in mind that while configuring the look and feel of the CTA, design and accessibility problems may occur. Certain color combinations between the background of the CTA and the color of the Call to Action Link component may be incompatible and must be changed. For example, using a maroon call to action link on a maroon background is inaccessible and does not meet our legal obligations.

Update: The embedded Call to Action Link component will now adjust itself to be an accessible color in situations where the color contrast between the CTA background and the CTA Link background is insufficient. This means that if you choose certain color combinations between the Call To Action and its embedded Call To Action Link, the Call To Action Link color will be overridden to be accessible. These combinations are:

  • CTA: maroon, CTA Link: maroon (and outline version)
  • CTA: maroon, CTA Link: orange (and outline version)
  • CTA: maroon, CTA Link: outline, dark
  • CTA: light, CTA Link: light (and outline version)

 

Configuration

Call To Action component: Messages and Links tab

Call To Action component: Messages and Links tab
Call To Action component: Messages and Links tab

 

Messages and Links

Call(s) to action
This section houses the primary message text, description, and link, and also the secondary calls to action. The user may have up to three calls to action: one primary, and two secondary.

Title: the primary message text, or title message.

Set title to H3: By default, the CTA uses an H2 html heading element for the title text. Sometimes the CTA may fall within the body column and under other page headings. In this case, for accessibility reasons, the title HTML must be adjusted for the document outline and assistive technologies.

Description: the optional descriptive text for the title message.

Hide Call To Action Link: Check this box to hide the Call To Action Link component that comes pre-packaged with the CTA.

Secondary CTA: any optional secondary calls to action. These have the same structure as the primary call to action but are visually distinct from it. Secondary CTAs provide a way for users to promote less important messages.

 

Call To Action component: Media and Presentation tab, inline design options

Call To Action component: Media and Presentation tab, inline design options shown
Call To Action component: Media and Presentation tab, inline design options

Call To Action component: Media and Presentation tab, popover design options

Call To Action component: Media and Presentation tab, popover design options shown
Call To Action component: Media and Presentation tab, popover design options

 

Media and Presentation

Design: choose between two different designs for the CTA.

  • Inline (default) - 50/50 view of text and image
  • Popover - Text is overlayed on top of the image

Inline Options 

Text position: the user may swap the position of the text and the media.

Image crop position: Images are cropped and may be positioned in the center, right, or left, depending on the specific image subject matter.

Media type: the user may choose between an Adaptive Image component, an External Media component, or no media at all.

Popover Options

Popover position: controls the alignment of the text overlay area. Left, center, or right.

Media type: the user may choose between an Adaptive Image component, or no media at all. (External media component currently not supported in this design).

Miscellaneous Presentation Options

Background color: The user may choose between different color combinations.

Highlight text: the primary text may have a highlighted effect behind the text.

Text uppercase: force text to display in all capital letters.

Italic: force text to display in oblique or italic.