Flip Card Component

This component is suitable for use when creating accessible courses.

The Flip Card component is an engaging component that lets the learner interact with flippable cards to get more information. The Flip Card component is suitable for smaller pieces of learning content.

This article provides an overview of the Flip Card component, component setup and behavior, and examples of Flip Card component configurations.

Component overview

The Flip Card component is flexible and can be set in a column layout between one and four, and it is also possible to set a different number of columns per device. The Flip Card component can have the same front card image for all Flip Cards or add a specific card image for each Flip Card item.

The Flip Card component is fully responsive.

Component set up

To add this component, follow the steps in this article:

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 & Behavior sections

In the General section:

Add Title, or a Display Title, as needed. Display Title is seen by learners.

Add Body, as needed. Use the text editor to style and format your text.

1. Add Instruction Text that tells users how to use the component.
2. Include an Aria Label for screen readers, as needed.

In the 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 Flip Card component. This widget can display an icon and label prior to the Flip Card component completion, which changes to a different icon and label once the Flip Card component is completed.

In the Card Images section:

The Flip Card component can be set up to deliver the same Card Front Image and Card Back Image across all cards.

You can enable Use Front Image on Back Image to display the front card image on the back of each Flip Card Item.

You can enable Set Images On Individual Items to display custom images for each Flip Card item you create.

In the Behavior section:

In the Behavior section you can enable to only have one card flipped at a time.

In the Appearance section:

In the Appearance section, you can set the number of Flip Card Items per row by device size. The Flip Card component is set to 2 columns for desktop and tablets and 1 column for smartphones by default.

Set Front Text Styles and Back Text Styles. These settings can be overridden in each Flip Card item, as needed.

Set Flip Card Item Content Alignment, as needed. You set vertical content alignment for all Flip Card items. Select Center, Top, or Bottom.

In the Animations section:

In the Animations section, you set what animations to run when the Flip Card component first comes into view on the page.

Add Flip Cards

In the Flip Cards section you add Items to your Flip Card component.

For each Flip Card Item:

Add Front Text that should appear on the front of the Flip Card.

1. Add Card Front Image, as needed.
2. Add Front Content Image, as needed.
3. Add Front Content Image Alt Text, as needed.
4. Toggle Position After Text, as needed.

Add Back Text. Format the text as needed. The Back Text is displayed to the learner when the Flip Card Item interacts.

1. Add Card Back Image, as needed.
2. Add Back Content Image, as needed.
3. Add Back Content Image Alt Text, as needed.
4. Toggle Position After Text, as needed.

Add, duplicate, or delete Flip Card Items as needed.

Note: You may need to add images to each Flip Card Item depending on the component setup for Set Images on Individual Items in the Card Images section.

Component Examples

The Flip Card component gives you a lot of flexibility. Below are examples that illustrate different Flip Card component setups:

Example 1 – displays Flip Cards with the same Front image and the same Back image for all Flip Card items in a row.

Example 2 - displays Flip Cards with different Front images for different items.

Note: If you set different images for different Flip Card Items, you may need to adjust the size of the images to make them the same size. Image size displayed will be the original size that was uploaded.

Example 3 – displays Flip Cards with the setting 2 Flip Card Items in a row.

Example 4 - displays Flip Cards with one single Flip Card flipped at a time.

Did this article help?

Let us know by leaving a star rating or review at the top of this article.