Flip Card

Flip Card

Flip Card

Flip card interactive elements are user interface components that flip to reveal additional content when clicked or hovered over. They provide a dynamic way to present information, combining both front and back content areas to maximize space and engagement.

Here is a short video on how Flip Card works:


How to create a Flipcard?
 To create a Flipcard interactive, follow these steps:
  1. Click on the "Create" button located in the Flip card interactive section.
  2. You will be redirected to the page mentioned below, where you can start building your Flipcard interactive.
 
 

Once the form is open, you’ll see the following fields to complete:


  1. Interactive Title: Enter a title for your Flipcard interactive. This title appears prominently at the top and serves as the main label for the interactive set.

  2. Front View: This is the initially visible side of the Flipcard. It is typically used to display a summary, prompt, or engaging visual to capture the learner’s attention. The Front View includes a bubble menu editor, allowing you to add and format text, images, and other elements.

  3. Back View: This section appears when the flip card is turned. It is used to provide more detailed information, supporting content, or interactive elements such as text, images, links, or multimedia. The Back View also includes the bubble menu editor for easy customization.

Add Section for Flip card:

    1. Click the 'Add Section' button to add collapsible sections below existing ones in the Flipcard form.
    2. A '+' icon appears on the section line to 'Add Section Below' for adding new sections.
    3. Use the up or down arrow icons to move sections instead of dragging.
    4. Click the 'Delete' icon on the section line, confirm in the 'Remove Section' window, then click 'Remove' to delete.



Notes
Please Note: Whenever a new section is added, users will be redirected to this section, and will not be required to manually navigate around. Users will always be able to return to previous sections by scrolling up (when many sections are present).

Customize Options:

  1. Personalize fonts, colors, styles, and spacing to suit specific preferences or branding needs.
  2. Enhance visual appeal and usability, meeting diverse user requirements effectively.
Card Type

Customize the appearance of your cards, including their type, number per row, and event interactions to match your page's aesthetics.

Type: Select either Square or Portrait for the card shape.

Number of Cards per Row: Choose how many cards to display per row, with options ranging from 1 to 4, to ensure optimal visual organization.

Event Options: Configure interactions such as hover effects or click actions to enhance user engagement.

 
Card Front

Enhance the front of your card to create engaging initial views that capture attention and encourage interaction. Highlight key information and make a memorable impression with the following customization options:

  1. Height: A height input field is now available in the Design section. The default height is set to 318 px, and you can adjust it anywhere between 100 px and 999 px. This feature supports both text and image content, giving you more control over the layout and visual presentation.

    This option is specifically enabled when using the     Portrait layout and selecting the Card Front (it’s not applicable for square layouts).

  2. Padding (px): Controls the space inside an element’s border, improving readability and overall layout.

  3. Color: Allows you to set the border color using the color palette or by entering Hex/RGBA values for precise customization.

  4. Border Size (px): Defines the thickness or width of the border in pixels.

  5. Border Style: Lets you choose the border’s visual style, such as Solid, Dashed, Dotted, Double, Groove, or Ridge.

  6. Border Radius: Adjusts the roundness of the border corners to create a softer, more modern look.

  7. Background Color: Sets the background color behind the text to enhance contrast and visibility, using either the color picker or custom Hex/RGBA codes.


Card Back

Enhance the card back in flip cards to provide detailed information or additional content, enriching user interaction and understanding. It mirrors the Card Front customization options.


 


Preview:

The PREVIEW option is conveniently located in the far right corner of the form section for all interactive elements, allowing easy access for reviewing your changes.


THANK YOU!


    • Related Articles

    • Loree Interactives

      Loree Interactive content engages its consumers by requiring active participation. This type of content fosters better interaction between the creator and the audience, making learning easier and more interesting. It presents concepts in an engaging ...

    • Release notes for Loree - Canvas A2203.4

      Loree Container background color issue As a Loree user, When we are working on the Loree editor, we add a container on a row and applied the background color and we can see the parent background color then if we click on the clear button we can see ...

    • Loree Interactives

      Loree Interactive content engages its consumers by requiring active participation. This type of content fosters better interaction between the creator and the audience, making learning easier and more interesting. It presents concepts in an engaging ...

    • Release notes for Loree A2502.3

      Published on: 30/05/2025 New Feature New & Improved Image Cropping UI The image cropping experience has been completely redesigned for greater flexibility, speed, and creative control. Users can now launch the editor via a new "Edit Image" button, ...

    • Release notes for Loree A2502.1

      Published on: 16/05/2025 Feature Enhancements Background Color Inheritance for Iframes in Interactives Previously, when applying a background color (e.g., red) to a row containing an iframe-based interactive, the iframe would ignore the color and ...