Step 1

 ¶ 

Select the Flip Card on the page.

Step 2

 ¶ 

Select the Options tab.

Step 3

 ¶ 

The Options tab has a number of control and design options for the Flip Card as a whole.

You can set a Trigger, add a Border, set how the content will align within the Flip Card, add a Flip Icon and add a background fill color.

Select Borders to add a border to the Flip Card.
 

Step 4

 ¶ 

Select Flip Icon to add an icon cue to help the learner understand how to interact with the Flip Card.

Step 5

 ¶ 

To edit the content within the Flip Card, double click on it.

Step 6

 ¶ 

In the breadcrumb above the Stage, you can see that you are editing the Front of the Flip Card.

You can also see that the Options tab is different, because it has options for design and control of the Front of the Flip Card.

You can set the Front to show a header, a footer or both. If those options are chosen you can control if the front panel should be allowed to collapse or to start collapsed as well as show controls for that state. You can also set a Border for the front of the Flip Card and choose to show a left or right icon in the Header field.

On the front of the Flip Card, you can choose from several content layout options.

Select the single-body content option.

Step 7

 ¶ 

A Placeholder will be added.

Select the Image icon to add an image.

Step 8

 ¶ 

The Media Browser will open. You can upload a new image or use one that has already been uploaded.

Select the ShareContent_grey image.

Step 9

 ¶ 

Select Insert.

Step 10

 ¶ 

The image has been added to the Placeholder.

You can use the + icon to add more content layouts to the front of the Flip Card.

To edit the Back of the Flip Card, select the icon at the top of the Flip Card to switch sides.

Step 11

 ¶ 

The breadcrumb above the Stage now shows that you are editing the Back.

Select the Header and Body content layout.

Step 12

 ¶ 

Placeholders are added.

Select the text in the Header Placeholder.

Step 13

 ¶ 

For this example we have added text to the Header Placeholder and center-aligned it.

Select the lower space to add the body placeholder text. 

Step 14

 ¶ 

For this example we have added text to the Body Placeholder and center-aligned it.

Select outside of the Placeholder to save the text change.

Step 15

 ¶ 

You can use the + icon to add more content layouts to the back of the Flip Card.

Select the Exit button to leave edit mode and return to the main Page content.

Step 16

 ¶ 

Preview the Current Page to see how the Flip Card 

will look and behave for your learners.

  0     0

Similar Projects

thumbnail image
Add a Flip Card Set Element to a Page and Configure Flip Card Content
2026-08-27

Steps to add and a Flip Card Set element to a page and configure the Flip Cards within the set.

Flip Card Sets are one of many elements available on the Engage tab.

avatar
Christopher Mines
Adding narrations in the Flip card
2023-10-15

New in Claro!
The goal is to narrate when someone flip the card. 
I have added the flip card on my slide but I am not able to add narration in it.  Can someone give the instructions on how to add triggers in the flip card? I would highly appreciate that. 
 
Regards,
MH

avatar
mohammadhassam
thumbnail image
Add a Flip Card Set Component to a Page and Configure Flip Card Content
2021-08-10

Steps to add and a Flip Card Set component to a page and configure the Flip Cards within the set.

Flip Card Sets are one of many components available on the Engage tab.

avatar
Laura Bertrand
thumbnail image
Add a Flip Card element to a Page
2026-08-06

Steps to add a Flip Card element to a Page.

A Flip Card is one of many options available on the Engage tab's Interactive Elements section. It allows you to add a single Flip Card to your page.

The learner can interact with the card to flip it from the front side to the back side.

There is also a Flip Set element in the Widgets area of the Engage tab which we recommend using if you want to have more than one flip card. The Flip Set offers better control over matching height than you might ...

avatar
Christopher Mines
thumbnail image
Edit a Card Element
2026-08-24

Use cards to set apart certain information, and assign headers, footers, borders and styles as you see fit. This lesson covers controlling the display properties of the Card element to suit your design needs.

Note: Cards are available in multiple styles with or without a Button. The buttons are easily set up just like any other button in dominKnow | One.

avatar
Christopher Mines
thumbnail image
Edit a Tile Card Element
2026-08-07

Steps to edit a Tile Card element.

You can edit the text, change the icon on the Tile Card, as well as control the background display options.

avatar
Christopher Mines
thumbnail image
Edit a Card Component
2021-07-26

Use cards to set apart certain information, and assign headers, footers, borders and styles as you see fit. This lesson covers controlling the display properties of the Card component to suit your design needs.

Note: Cards are available in multiple styles with or without a Button. The buttons are easily set up just like any other button in dominKnow | One.

avatar
Laura Bertrand
Tooltip Not Working on Hover
2023-05-31

Hi, I added a tooltip to the word "hover" in one of my projects. However, when previewing the project, the tooltip does not appear when I hover, instead if I click on the tooltip it will then appear. I have the tooltip inside a flip card. When I click on the word 'hover' the flip card flips and then shows the tooltip. This is not the action I was wanting. 
 

avatar
b.belbin
Add interactivity to existing elements
2024-04-03

I want to change the style and add some interactivity to flip cards and tab table elements. Can I add html, css, javascript to flip cards or other elements and if so, what is the workflow?
 

avatar
bouldrickd
thumbnail image
Edit a Card or Billboard Element Button
2026-08-28

Steps to edit a Card or Billboard element button.

avatar
Christopher Mines

Questions  ( 0 )

Sign in to ask or answer a question.

Comments ( 0 )

Sign in to join the discussion.