Ornamental background

Enhanced Text With CTA - Component Detail

This page serves as a guide to understanding the Enhanced Text with CTA component and the options you are given to style the componet and how it functions. 
BACK TO ALL COMPONENTS

Specifications for the Enhanced Text with CTA component

The Enhanced Text with CTA component features an H2 Headline, Paragraph Text and an CTA button. 

It can be used to introduced a new section leveraging the H2 Headline, which can be used by itself. The Paragaph Text and CTA can also be used when introducing a new section on a page. 

There are two major orientations for the Enhanced Text with CTA: left-aligned and center-aligned. 

Specifications for the Hero Banner, all of its elements, and the background image size

Authoring Experience: Enhanced Text with CTA

Below are screenshots and authoring notes regarding the authoring of the Enhanced Text with CTA component. Authoring notes are found in red text on the screenshots and below images as captions. 

Start authoring the Enhanced Text with CTA by selecting the Wrench icon which will bring up the Configure menu. Adding a Headline and Paragraph text.
Modifying the CTA button label, adding a CTA button link, and selecting a link target for the CTA button

Enhanced Text with CTA: Paintbrush Styles Options

The Paintbrush "Styles" icon allows you to make visual changes to your component, including:

  • Video Icon: Adds Video Icon to CTA when the CTA initiates a video
  • Left-Align component
  • Center-Align componen
Showing the Styles Menu, displayed by clicking on the "Paintbrush" Icon. Left and Center aligned options shown.

Live component examples

For viewing and reference only. Go to the Example Component here to practice authoring.

Example Enhanced Text with CTA (left-aligned)

This component gives authors the chance to introduce a new section of content with a Headline, Paragraph Text and an optional CTA. 

The Enhanced Text with CTA can be styled to be left-aligned or center-aligned to best fit the author's needs with their content.  

Example Enhanced Text with CTA (center-aligned)

This is an example of the center-aligned version of the Enhanced Text with CTA component. This is often used to "start a new conversation" on your page, having a visual indicator to acknowledge that the content is of a different variety from this point. 

Gradient