Promotion card

Guide on how to add a promotion card. This is a narrow card that links to internal or external content. Multiple cards will automatically be arranged in a 2 or 3 column grid.

To see how the Promotion card displays on live sites, visit the Ripple design system.

How to add a promotion card

  1. Click Edit on your page.

  2. Scroll down to the Page content section.

  3. Click Add component.

  4. Select Promotion card from the components.

  5. Add the information:
    - Link (required)
    - Title (required)
    - Summary (optional, but recommended)
    - Card display style (required; defaults to no image)

image-20241107-052947.png

 

Link

This is the link to the page featured on the card.

  • When using an internal link, start typing the page name and select the correct destination node.

  • When using an external link, paste in the full URL, including https://.

  • If you want to use a different page title, summary and/or image than those your destination page, use the full ‘absolute’ URL and fill out the other fields with your custom information. If you choose this way of setting up a promotion card, you don't have the option to display supplemental info (such as displaying the topic on the card).

Title

This is the title that will appear on the card. We recommend using the page title.

Summary

Although this field is optional, we recommended writing a short description. You can use the destination page's introduction text.

Card display style

Promotion cards have 4 display options:

  • no image (or standard)

  • thumbnail

  • profile (round image, mainly used on cards linking to profile content type pages)

  • highlight (top highlight strip option added, controllable by CMS editors)

You won’t see the ‘Select images’ button until you choose a card display style other than No image.

Before you upload an image, check your image has been resized correctly. Visit: Image ratios, sizes and component use.

For the thumbnail and profile image options, the destination page (page you're linking to), needs to have a Feature image uploaded.

image-20241107-053624.png
Examples of all 4 display styles

Â