Card Carousel
The Card Carousel component allows editors to highlight four or more pieces of information with a photo, blurb, and link to additional information.
One side of the “card” has a title, sub-title, photo, and link.
The other side of the card, accessed when the user clicks the “+” sign, has a title, sub-title, text, and link.
![Screenshot of a Card Carousel web component.](/sites/default/files/styles/1136x639/public/2019-11/Screen%20Shot%202019-11-25%20at%202.04.04%20PM.png?fv=4yCH8hyG&itok=p0QnR26y)
![Screenshot of card carousel with one card flipped.](/sites/default/files/styles/1136x639/public/2019-11/Screen%20Shot%202019-11-25%20at%202.04.18%20PM.png?fv=LoXJwSlP&itok=G9gjH2rQ)
When you are creating the card carousel, the editing interface will look like this, with several fields available for you to populate.
![Card carousel editing interface](/sites/default/files/styles/1136x639/public/2019-11/Screen%20Shot%202019-11-22%20at%202.23.18%20PM.png?fv=sbZPi9PM&itok=Zsg0dYOc)
Here, you see:
- Title field
- The option to randomize the order in which the images display each time the page is reloaded
- The call to action url underneath the title for the card carousel
- The link text for the url
This will always appear in the far left of the card carousel in a blue box.
![Card carousel with fields highlighted](/sites/default/files/styles/1136x639/public/2019-11/Screen%20Shot%202019-11-22%20at%201.10.52%20PM.png?fv=_o4RqkcT&itok=ogyMkngT)
Underneath these fields you have an opportunity to add the first card (you need a minimum of three for the carousel to work properly).
![Editing interface for adding a card to the card carousel component](/sites/default/files/styles/1136x639/public/2019-11/Screen%20Shot%202019-11-22%20at%202.35.27%20PM.png?fv=TgJyZnCp&itok=VJKXppGD)
Once you select “Add Card” you will see options to:
- Add an image
- Add a title, subtitle, and text
- Call to action url, and url link text
Once complete, your card will look like this:
![The back side of card in card carousel containing text and call to action](/sites/default/files/styles/1136x639/public/2019-11/Screen%20Shot%202019-11-22%20at%201.11.09%20PM.png?fv=8aCuVsy6&itok=rNG0r_i9)
Once you’ve added your cards, Save your work.