Skip to main content
Intellum

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:

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:

Screenshot of General settings

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

Screenshot of General settings

Scroll down and add Body, as needed. Use the text editor to style and format your text.

Screenshot of General settings
  1. Add Instruction Text that tells users how to use the component.

  2. 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

Screenshot of Flip Card settings

In the Flip Card section, you add Card Front Image and Front Content Image, as needed.

Screenshot of Flip Card settings

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.

Screenshot of Flip Card settings

Add Card Back Image and Back Content Image, as needed.

Screenshot of Flip Card settings

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

Screenshot of Appearance settings
  1. In the Appearance section, you set Front Text Styles and Back Text Styles, as needed.
  2. 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.