CTA Card

Step-by-Step Instructions

The CTA Card can be added in two formats: within a CTA Card Grid or as a standalone CTA Card. Follow the steps below to create each layout.

CTA Card Grid (Multiple Call to Actions) 

A CTA Card Grid is a layout option where multiple CTA (Call to Action) Cards are arranged in a structured grid. It’s commonly used on top-level navigation pages to present users with a clear set of choices or actions.

1. Add a Cards Grid Section

1. Click the Edit link at the top of the page.
2. Place your cursor where you want the CTA cards to appear.
3. Click the plus icon.
4. Select Cards Grid.

2. Add a Section Header

1. Add a Section Header above your CTA cards.
2. (Optional) Add a teaser that provides supporting context.
3. In Styles, set the header level to H2.

3. Add CTA Cards

1. Place your cursor below the Section Header and add a CTA Card.
2. Add a Title (max 70 characters).
3. (Optional) Add a Teaser (max 300 characters).

Button

• URL: Start typing the title of a piece of content to select it, or enter an internal path (e.g., /node/add) or an external URL.
• Link Text: Provide a clear, contextual action (e.g., “Visit the ABC Lab”).
  • Avoid generic phrases like Learn more or Read more.
  • Max 45 characters.

Styles

• In the Styles tab, select H3 if the cards appear under an H2 Section Header.
• Adjust the header level as needed based on page hierarchy.

4. Add Additional CTA Cards

1. Add at least two more CTA Cards using the steps above. For the best visual layout, we recommend adding cards in sets of three (3, 6, or 9).

Wide CTA Card (One Call to Action)

Use these instructions when placing a single CTA Card on a one-column section.

1. Add a One Column Section

1. Click the Edit link at the top of the page.
2. Move your cursor where you want to place the CTA Card.
3. Click the plus icon.
4. Select One Column.

2. Add the CTA Card

1. Move your cursor within the One Column section.
2. Click the plus icon and select CTA Card.
3. Add a Title (max 70 characters).
4. (Optional) Add a Teaser (max 300 characters).

Button

• URL: Start typing the title of a piece of content, or enter an internal path or external URL.
• Link Text: Provide a clear, contextual action (e.g., “Visit the ABC Lab”).
  • Avoid generic link phrases.
  • Max 45 characters.

Styles

• In the Styles tab, select H2 since the CTA Card is used as a standalone call to action.
• Set Card Width: Wide

Background Colors

We recommend working with a Site Administrator to apply background colors to CTA Card Grids and standalone CTA Cards when you need them to stand out.

Note: Background colors can be applied only within One Column and Card Grid sections.

How to Apply a Background Highlight

1. Open the Styles tab.
2. Choose one of the approved background colors:

• None (default)
• Blue 100
• Blue 300
• Blue 500
• Blue 700
• Sand 300
• Sand 500