Flip Card (Single) Component
The Single Flip Card component lets the learner interact with a single flip card to get more information. The Single Flip Card component is useful for small pieces of learning content.
This article provides an overview of the Single Flip Card component, component setup and behavior, and examples of Single Flip Card component configurations.
The Single Flip Card component is flexible and lets you select one background front card image and a different background for the back card image to be displayed to learners. It is also possible to style your texts on the Single Flip Card's front and back.
The Single Flip Card component is fully responsive.
Component set up
Follow these steps to add the Single Flip Card component to a Block:
- Click Add Component.
- Use the component search or scroll to find the Single Flip Card component.
- Click the Single Flip Card component and select Add Left, Add Full, or Add Right.
Click the Edit Component icon on the newly added Single Flip card component to begin set up.
In the General section:
Add Flip Card Title, or a Flip Card Display Title, as needed. Flip Card Display Title is seen by learners.
Scroll down and add Flip Card Body, as needed. Use the text editor to style and format your text.
Add Flip Card Instruction Text that tells users how to use the component.
Include an Aria Label for screen readers, as needed.
Interaction Label section
In the Interaction Label section, you can enable an Interaction Label. The Interaction Label allows you to add a widget before or after the Single Flip Card component that can display an icon and label prior to the Single Flip Card component completion, which changes to a different icon and label once the Single Flip Card component is completed.
Flip Card section
In the Flip Card section, you add Card Front Image and Front Content Image, as needed.
Scroll down and enter Front Content Image Alt Text and toggle Position After Text to position the image after the front text. Enter Front Text to be displayed on the front of the Flip Card. Use the text editor to style and format your text, as needed.
Add Card Back Image and Back Content Image, as needed.
Enter Back Content Image Alt Text and toggle Position After Text to position the image after the back text. Enter Back Text that appears on the back of the Flip Card. Use the text editor to style and format your text, as needed.
- In the Appearance section, you set Front Text Styles and Back Text Styles, as needed.
- Set Flip Card Content Alignment. You can select to set content vertical alignment to Center, Top, or Bottom. The default setting is Center.
The Single Flip Card component gives you a lot of flexibility. Below are examples that illustrate different Single Flip Card component setups:
Example 1 – displays Single Flip Card with a Front Image and some Front text.
Example 2 - displays Single Flip Card Back Image with some Back text.
Did this article help?
Let us know by leaving a star rating or review at the top of this article.