CTA 2 – 1 to 3 Buttons

Description

This section is full-width and includes a headline, short text and one to three buttons. Choose from several background color options. Buttons are available for all color options. A link is available on the Steam Lightest background option only.

View this Section in the Section Gallery

Fields and Character Limits

*required fields

Headline

Character limits: Recommended limit of 70 characters, including spaces
Help text: Enter the headline text. There is a recommended limit of 70 characters including spaces. This field renders as an <h2>. See Headers for guidelines and best practices for headlines and sub-headlines.

Short Text

Character limits: Recommended limit of 150 characters, including spaces
Help text: Enter the short text. There is a recommended limit of 150 characters including spaces.

Button URL*

Help text: Start typing the title of a piece of content to select it. You can also enter an internal path such as /node/add or an external URL such as http://example.com. Enter <front> to link to the front page. Enter <nolink> to display link text only.

Link Text*

Character limits: Recommended limit of 25 characters including spaces.
Help text: Enter the link text. There is a recommended limit of 25 characters including spaces. Avoid link text like Click Here, Learn More and More. See Links for more info, including accessibility concerns, examples and best practices.

Available Style Options

Background Color*

Dark Blue
Lake
Steam Lighter
- NOTE: The Steam Lighter Background option uses a Serif font.
Steam Lightest
White

Link Type*

Button
Link

Where Can You Use This Section?

The section is available in the following templates and content types:

Templates

Basic + Content
Marketing
Start

Content types

Content Page
Landing Page

Using on a cloneable Template

Locate the CTA 2 – 1 to 3 Buttons in the Body area
Select Edit
Replace the placeholderHeadline and Short Text
Replace the placeholderbutton URL and Link text
Go to the Style Options tab and select the Background Color and Link Type
View ScreenshotGo to the Style Options tab and select the Background Color and Link Type

NOTE: The only background that can use a link is Steam Lightest. All other background options use a button. The Steam Lighter Background option uses a Serif font.

Select Save at the bottom left of the form

Adding to a new Content or Landing Page

Select Add Body Section
Locate CTA 2 - 1 to 3 Buttons, select Add
View ScreenshotLocate CTA 2 - 1 to 3 Buttons, select Add
Enter the Headline and Short Text
Enter the URL and Link Text for each of the Buttons you wish to include
Go to the Style Options tab and select the Background Color and Link Type
View ScreenshotGo to the Style Options tab and select the Background Color and Link Type

NOTE: The only background that can use a link is Steam Lightest. All other background options use a button. The Steam Lighter Background option uses a Serif font.

Select either Save as Draft or Published with the drop-down menu
Select Save at the bottom left of the form

Accessibility

Avoid link text like Click Here, Learn More and More. See Links for more info, including accessibility concerns, examples and best practices.

Guidelines and Best Practices

The buttons include the ability to drag to reorder if using 2 or 3 buttons
When used with 1 button this section works well to draw attention directly to your call to action.
Alternatively, this section can be used to direct site visitors to other relevant pages.

Removing a Section

To permanently remove a section from a page:

Select the vertical ellipsis to the right of the Edit button at the top-right of your section, select Remove
View ScreenshotSelect the vertical ellipsis to the right of the Edit button at the top-right of your section, select Remove
Select Save at the bottom left of the form