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.  

How To

  • 1

    Insert a CTA Card

    Add Component buttons are outlined in red.
    • Select CTA Card from the Choose Component dialogue box. 

    CTA Cards can also be placed on other Content Types. For example, a CTA Card may be placed within a Tab/Accordion of a How-To Content Type. The interface differs, but the steps are similar. 

    • Select the caret to expand the menu options. 
    • Choose the Add CTA Card paragraph component.  
    Add a paragraph component into a Tab/Accordion Paragraph
  • 2

    Add an Icon

    Icons are not required but add value to your CTA Card. See the Icons Help Topic for full details. 

    Select add media to include an SVG icon on your CTA Card.
    • 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. 
    After adding an icon to your CTA Card a thumbnail preview of the selected icon displays.

    Icons Help Topic

  • 3

    Complete the Form Fields

    CTA Card 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 in the Durham Color Palette

    Accordion
  • 5

    Save

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