CTA 3 – 1 to 3 Card Carousel

CTA 3 – 1 to 3 Card Carousel

Description

This section is a full-width card carousel featuring one to three cards with headline, short text and a link icon. Choose from two background options.

View this Section in the Section Gallery

Fields and Character Limits

*required fields

Headline*

  • Character limits: Recommended limit of 50 characters including spaces
  • Help text: Enter the headline text. There is a recommended limit of 50 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.

Card Headline*

  • Character limits: Recommended limit of 50 characters including spaces
  • Help text: Enter the card headline text. There is a recommended limit of 50 characters including spaces.

Card Short Text

  • Character limits: Recommended limit of 125 characters including spaces
  • Help text: Enter the card short text. There is a recommended limit of 125 characters including spaces.

Card Closing Text (optional)

  • Character limits: Recommended limit of 40 characters including spaces
  • Help text: Enter the card closing text. There is a recommended limit of 40 characters including spaces.

Link 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.

Available Style Options

Background*

  • Sky Background with Stripes
  • Fog Lightest Background

Where Can You Use This Section?

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

Templates

  • Marketing
  • Start

Content types

  • Landing Page

Using on a cloneable Marketing or Start Template

  1. Locate the CTA 3 - 1 to 3 Card Carousel in the Body area
  2. Select Edit
  3. Replace the placeholderHeadline and Short Text
  4. Replace the placeholderCard Headline, Card Short Text, Card Closing Text and URL
  5. Repeat steps 3 and 4 for Card #2 and Card #3
  6. Go to the Style Options tab and select the Background
    View ScreenshotGo to the Style Options tab and select the Background
  7. Select Save at the bottom left of the form

Adding to a new Landing Page

  1. Select Add Body Section
  2. Locate CTA 3 - 1 to 3 Card Carousel, select Add
    View ScreenshotLocate CTA 3 - 1 to 3 Card Carousel, select Add
  3. Enter the Headline and Short Text
  4. Enter the Card Headline and Card Short Text
  5. Enter the card Closing Text if desired
  6. Enter the Link URL
  7. Repeat steps 5 - 7 for Card #2 and Card #3 if desired
  8. Go to the Style Options tab and select the Background
    View ScreenshotGo to the Style Options tab and select the Background
  9. Select either Save as Draft or Published with the drop-down menu
  10. Select Save at the bottom left of the form

Accessibility

  • Dark blue text over blue stripe may be difficult to see for users with a visual impairment

Guidelines and Best Practices

  • The is a limit of three cards per section
  • The button URL appears as arrow icon
  • The cards are left aligned regardless of the number. If you only have one card, it will appear left-aligned.

Removing a Section

To permanently remove a section from a page:

  1. 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
  2. Select Save at the bottom left of the form