Flip Card (Single) Component
Outline
This component is suitable for use when creating accessible courses.
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.
Component overview
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
To add this component, follow the steps in this article:
Intellum
Add a Component
Explore everything there is to know about Evolve. This collection begins with the basics of Evolve and completes with information on the tool's more advanced features. Feel free to start from the beginning or hop around to the specific section that suits your needs.
The Property Panel for the newly added component will then open automatically for you to customize set-up.
Or click anywhere on an existing component to open the Property Panel.
General section
In the General section:
Add Title, or a Display Title, as needed. Display Title is seen by learners.
Scroll down and add Body, as needed. Use the text editor to style and format your text.
Add 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. This widget 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.
Appearance section
- 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.
Component Examples
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.