Flip Card Component

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

Follow these steps to add the Flip Card component to a Block:

1. Click Add Component.
2. Use the component search or scroll to find the Flip Card component.
3. Click the Flip Card component and select Add Full.

Click the Edit Component icon on the newly added Flip Card component to begin set up.

General & Behaviour sections

In the General section:

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

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

1. Add Flip Card 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 that 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 Behaviour section:

In the Behaviour 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.

In the Appearance section, set Front Text Styles and Back Text Styles. These settings can be overridden in each Flip Card item, as needed.

In the Appearance section, you 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.

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.

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

Heads up!

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

Heads up!

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.