Blue Centered Text CTA


Inserts a full-width text block, on a blue background, with a title, optional description text, and up to 3 buttons.

On-page Example

To preview a live example of the component or inspect the code, click the link below

Blue Centered CTA example 

Component Specifications

Item/Field Description Required/Optional
Title Field type: Single line text
Text: H2 Heading
Character Recommendation: 30
Wrapping: Single line
Description Field type: Multi line text
Text: Paragraph
Character Recommendation: 140
Wrapping: Wrap to multiple lines

Hover: Outline closes and background changes to
Number: Up to three buttons may be added

Buttons - Text Field type: Single line text
Text: Styled text
Character Recommendation: 30
Wrapping: Single line
Buttons -
Field type: Link field Required
Mobile Response Scale and stack NA
Page Placement  Full width  NA
Accessibility Buttons are included in tab through, left to right  NA

When to Use

  • On pages with full-width Page layouts
  • When you have content you want to call attention to on the website
  • When you want to link to important content not located on the current page

When to Consider Something Else

  • On text-heavy content
  • On content requiring more than 3 links/buttons

How to Use

Fill in the title and optional description text as desired. At least one of the three buttons is required. Fill in the required button text and destination fields. If more buttons are required fill in the corresponding button text and destination fields as desired.

Accessibility Tips

  • Make sure the links, if used, has text that describes the destination sufficiently, even when out of context.
  • Make sure the text is accessible against the background color.