How To
-
1
Insert a CTA Card
- On Landing Pages or Site Pages, first insert a Band.
- Select the Add Component button.
- 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.
-
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.
- 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.
- Select Add Media.
-
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.
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
-
5
Save
- Save the component.
- Save the content type (page).