The Instructions on how to add a card carousel to a page. This feature displays cards that the user can cycle through.
| Info |
|---|
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 two 2 types of card carousels:
...
automated
...
manual.
Add an automated card carousel
Once you've created a number of News /wiki/spaces/SHCD/pages/2271871245 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:
Scroll down to Page content
Click on Body content Add component
Select Card carousel from the Componentscomponents menu
You'll then be presented with Title and a list including Latest Items options - N/A, Events and News
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:
Scroll down to Page content
Click on Body content Add component
Select Card carousel from the Componentscomponents menu
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.
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.
...
To see live examples of card carousels on vic.gov.au, visit the card carousel feature page.