How To
-
1
On a Landing Page
Add or edit a Band. (In this example, a 3-Column Band).
- Add a Band:
- Choose a Column (in this example, Left).
- Edit an existing Band:
Titles
Add Titles, if desired.
- Full Width Top Title — In this example, Band Title.
- This places a Top Title with an underline across the full width of the Band.
- 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).
- This places a Title above the CTA Card.
Add CTA Card
- Under Child Paragraph, choose Add CTA Card from the Add dropdown 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.
- Note: Refer to Site Page Help Topic as necessary.
Add CTA Card
- Choose Add CTA Card from the Add dropdown menu.
-
3
Title
Fields with an asterisk (*) are required.
- Title (*) — Enter a Title for the CTA Card. In this example, Drupal Help Topics.
-
4
Heading Level
- Select a Heading Level for the CTA Card.
- Options include None, h2, h3, h4, and h5. The default value is None.
-
5
Description
- Enter a description that will appear on the CTA Card.
-
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.
- On the Add or Select Media dialog box, click Choose File to upload an SVG file. (Size Limit = 256 MB).
- Or, select an available SVG file and click Insert Selected.
-
7
Link
- Link (*) — Enter a Link for the CTA Card.
- Begin typing the title of a piece of content to select it.
- 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.
- Choose color option Dark or Light.
Dark
- Dark CTA Card example (Durham Theme):
- Dark CTA Card hover example (Durham Theme):
Light
- Light CTA Card example (Durham Theme):
- Light 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.
-
10
Save
- Click Save, at the bottom of the Edit page, to save the page and view results.
