Card carousel

Owned by James O'Dwyer (Unlicensed)
Last updated: 26 Mar, 2024 by Marcella Marino
2 min read

Instructions on how to add a card carousel to a page. This feature displays cards that the user can cycle through.

We recommend only using a maximum of 6 cards in one carousel, or else your users may be cycling through for too long to find what they’re looking for.

To view the front-end design of the carousel, visit the Ripple design system.

There are 2 types of card carousels:

  1. automated

  2. manual.

Add an automated card carousel

Once you've created a number of News or Event content pages, you can feature the latest 6 using the card carousel component.

Open the page where you want to embed a card carousel:

  1. Scroll down to Page content

  2. Click on Add component

  3. Select Card carousel from the components menu

  4. You'll then be presented with Title and a list including Latest Items options - N/A, Events and News

  5. You have a number of options for the Card Carousel:

    • To auto-populate events: check the Events button

    • To auto-populate news: check the News button

Add a manually curated card carousel

You can create a custom carousel and manually add all the cards you want to include. Use this when you think your set of cards will be pretty static. You're more likely to use card promotion and card promotion automated.

Open the page where you want to embed a card carousel:

  1. Scroll down to Page content

  2. Click on Add component

  3. Select Card carousel from the components menu

  4. The Title field is not mandatory. If you enter a title, it will be displayed as a Heading 2 on the page. Choose the radio button labelled N/A - this lets you manually add several types of cards.

  5. To add cards, click on the drop-down arrow on the Add Card Event button. 

    • Add Card event—populate the card with:

      • Title

      • Media: before uploading your image, check it’s in the correct format. Use the image ratios, sizes and component guide.

      • Date range

      • Location

      • Summary

      • URL

      • Link text

      • Topic

    • Add Card event automated: this card will automatically display information from the destination page entered in the 'Referred event' field.

    • Add Key dates card: populate the card using the fields provided - Date, Title, Summary - and you can add a second key date

    • Add Card promotion: populate the mandatory fields (Title, Summary, URL) and non-mandatory fields you want to add (Date posted, Topic, Image and Link text) 

    • Add Card promotion automated: this card will display information from the destination page entered in the 'Referred event' field.

 

 

​