(Example) Flip Card Widget in Page Builder

This example shows how to add a Flip Card widget on a custom page.

Other Examples

  • (Example) Custom Page in Page Builder
  • Examples - Step-by-step use case examples, information about what types of examples are provided in the AgilePoint NX Product Documentation, and other resources where you can find more examples.

Prerequisites

Good to Know

  • This example shows how to create a flip card that uses an AgilePoint image as the use case.
  • This is a simple example. It is not intended as a real-world use case.

How to Start

  1. Do one of these:
  2. On the Custom Page Design screen, click Add Row.

    Custom Page screen
  3. Click Add Widget.

    Custom Page Design screen

Procedure

  1. On the Pick A Widget screen, click the Card tab.

    Card Tab
  2. On the Card tab, click Flip Card Flip Card icon.

    Flip Card Widget
  3. On the New Widget - Flip Card screen, in the Image Source field, click Web URL.

    New Flip Card Web URL sreen
  4. In the Image URL field, enter https://agilepoint.com/idea-to-app.png.

    New Flip Card Widget screen
  5. Click Add.

    The Page Builder shows the Flip Card widget with your image.


    Flip Card Widget Custom Page
  6. On the Flip Card widget, enter the value for the fields Card Title, Card Sub Title, and Card description.

    Flip Card Widget Value
  7. Click Save.

    Save Flip Card Widget
  8. Publish a custom page.

    For more information, refer to (Example) Custom Page in Page Builder.

    The Flip Card widget shows on the published page.


    Flip Card Widget Publish Page

    When you hover your mouse over the Flip Card image, the text shows.


    Published Page