CTA Card

Call to Action: A paragraph component that prompts visitors to act.

Summary

CTA Cards (Call to Action) highlight links to important information and prompt visitors to do something specific. CTA Cards can be placed many places and are most often seen on Site Pages and Landing Pages. 

Audience

Editors, Publishers, and Web Managers can create CTA Cards. 

Learn more about Platform User Roles and Permissions.

How To

  • 1

    Add CTA Card

    Inside a Band

    • Add a Band with the desired number of columns to the page.
    • Inside a column, select the Add Component button.
    • Select CTA Card from the Choose Component dialogue box.

    Inside a Tabs/Accordion

    • Expand Advanced Settings.
    • Choose the desired Sidebar:
      • First Sidebar content appears before the Item Text of the Tabs/Accordion Item.
      • Second Sidebar content appears after the Item Text of the Tabs/Accordion Item.
    • Select the caret to expand the Component menu.
    • Select Add CTA Card.
  • 2

    Add an Icon

    Icons help capture users' attention, break down language barriers, and guide users to perform a target action. Icons should aid navigation and enhance the user's experience. When Icons are used to convey meaning, the meaning should be clearly represented in either the CTA Card text or in the icon's alternative text field in the Media Library. Icons are not required but add value to your CTA Card.

    Learn about sensory characteristics and alternative text. 

    • Select Add Media.
      • Select an existing SVG file from the Media Library, or
      • In the Add or Select Media dialog box, select Choose File to upload a new SVG file.
    • Insert Selected
    • A thumbnail image of the SVG file you selected appears. 

    Icons Help Topic

  • 3

    Complete the Form Fields

    Fields with an asterisk (*) are required.

    • CTA Card Title (*) - Enter a Title for the CTA Card. Example: Find a Lactation Consultant.
    • Title Heading Level - If desired, select the appropriate heading for the CTA Card Title. Learn about heading accessibility.
    • Link (*) - Enter a Link for the CTA Card.
      • Links within your website - Start typing the Title of the content to which you want to link and select it from the search results. You can also enter an internal path, such as /node/add.
      • External links - Paste the URL if it points to a website other than your own.
    • Description - If desired, enter a Description for the CTA Card. It appears as paragraph text on the card. Example: Search our database for a certified lactation consultant in your area. 
    Example CTA Card with a light background and dark icon.
    Appearance of a completed CTA Card using the settings described above.
  • 4

    Card Background Color

    Use the drop-down menu to select a background color for the CTA Card from the menu. 

    • Light - The card is secondary light background color and changes upon rollover.
    • Dark - The card is the primary background color and changes upon rollover. 

    Actual colors are determined by the color palette your website uses. The platform dynamically styles the text and icon color to contrast with the selected background color for proper visual contrast. 

    CTA Card Examples

    Accordion
  • 5

    Save

    • Save the component.
    • Save the content type (page).