CTA Card

Calling Website Visitors to Action

Summary

CTA (Call to Action) Cards highlight links to important information when website visitors are asked to do something specific. CTA Cards can be placed on Site Pages and Landing Pages.

Audience

Web Managers and Publishes can add CTA Cards.

Example CTA Cards

Drupal Help Topics CTA Card example.

Drupal Training Videos CTA Card example.

How To

  • 1

    On a Landing Page

     Add or edit a Band. (In this example, a 3-Column Band).

    • Add a Band:

    Add Band button.

    Add Band menu.

    • Choose a Column (in this example, Left).

    Left Column dropdown.

    • Edit an existing Band:

    Edit Band button.

    Titles

    Add Titles, if desired.

    • Full Width Top Title — In this example, Band Title.

    Full Width Top Title field.

    • This places a Top Title with an underline across the full width of the Band.

    Full Width Top Title.

    • Left Top Title — In this example, Drupal. (Left Top Title indicates the Title is being placed in the Left Colum of a 3-Column Band).

    Left Top Title field.

    • This places a Title above the CTA Card.

    Add CTA Card

    • Under Child Paragraph, choose Add CTA Card from the Add dropdown menu.

    Add Article Card menu.

    • In this example, Left Child Paragraph indicates the Card is being placed in the Left Column of a 3-Column-Band.
  • 2

    On a Site Page

    • Edit the Page.

    Add CTA Card

    • Choose Add CTA Card from the Add dropdown menu.

    Add CTA Card menu.

  • 3

    Title

    Fields with an asterisk (*) are required.

    • Title (*) — Enter a Title for the CTA Card. In this example, Drupal Help Topics.

    Title field.

  • 4

    Heading Level

    • Select a Heading Level for the CTA Card.
    • Options include None, h2, h3, h4, and h5. The default value is None.

    Heading Level menu.

  • 5

    Description

    • Enter a description that will appear on the CTA Card.

    Description field.

  • 6

    Icon

    • Select an icon to appear on the CTA Card.

    SVG Icon

    An SVG  (Scalable Vector Graphics) icon can be added to the card. SVG is an XML-based two-dimensional graphic file format for sharing vector images on the Internet.

    To add an SVG Icon:

    • Click Add Media.

    Add Media button.

    • On the Add or Select Media dialog box, click Choose File to upload an SVG file. (Size Limit = 256 MB).

    Choose File button.

    • Or, select an available SVG file and click Insert Selected.

    SVG Icon example.

    Insert Selected button.

  • 7

    Link

    • Link (*) — Enter a Link for the CTA Card.
    • Begin typing the title of a piece of content to select it.

    Link field.

    • Enter an internal path such as /about or an external URL such as https://digitalcommons.nc.gov/.

    Additional Options

    • Enter <front> to link to the front page.
    • Enter <nolink> to display link text only.
    • Enter <button> to display keyboard-accessible link text only.
  • 8

    Card Accent Color

    To choose a background color for the CTA Card:

    • Select a color from the Card Accent Color menu.

    Card Accent Color menu.

    • Choose color option Dark or Light.

    Dark

    • Dark CTA Card example (Durham Theme):

    Dark CTA Card example, Durham Theme.

    • Dark CTA Card hover example (Durham Theme):

    Dark CTA Card hover example, Durham Theme.

    Light

    • Light CTA Card example (Durham Theme):

    Dark CTA Card example, Durham Theme.

    • Light CTA Card hover example (Durham Theme):

    Dark CTA Card hover example, Durham Theme.

  • 9

    Text

    If working on a Landing Page:

    •  Text entered in the Text field appears directly below the CTA Card.
    • In this example, Left Text indicates the Card is being placed in the Left Column of a 3-Column-Band.

    Left Text field.

  • 10

    Save

    •  Click Save, at the bottom of the Edit page, to save the page and view results.

    Save button.