Flip Card¶

A Vaadin Flow add-on that renders a card with two faces that flip between each other with an animation.

Overview¶

Use the Flip Card add-on to display a card with a front and back face that reveal each other with a flip animation. It wraps the flip-card-wc web component. Both faces are arbitrary Vaadin components, and the card can be configured to flip on hover or on click. Its appearance — dimensions, transition duration, and background colors — can be customized through CSS variables. It is a good fit for info cards, feature highlights, or any UI where additional detail should be revealed on interaction.

Features¶

Card flips on hover or on click, selected via FlipCardVariant.
Front and back faces are arbitrary Vaadin Components.
Styling can be overridden through CSS variables (defaults: 100px height, 800ms transition duration, white backgrounds).

Supported versions¶

Add-on version	Vaadin version
1.x	24–25

Refer to the Vaadin Directory page for exact version compatibility.

Installation¶

From the Vaadin Directory¶

Available in the Vaadin Directory.

Maven dependency¶

<dependency>
    <groupId>org.vaadin.addons.flowingcode</groupId>
    <artifactId>flip-card-addon</artifactId>
    <version>X.Y.Z</version>
</dependency>

Replace X.Y.Z with the latest released version. Add the Vaadin add-ons repository to your pom.xml:

<repository>
    <id>vaadin-addons</id>
    <url>https://maven.vaadin.com/vaadin-addons</url>
</repository>

For snapshot builds, see maven.flowingcode.com/snapshots.

JavaDoc is published at javadoc.flowingcode.com.

Usage¶

Create a FlipCard with a front and back component. The default variant flips on hover:

FlipCard onHoverFlipCard =
    new FlipCard(new Span("front side"), new Span("back side"));

Flip on click instead:

FlipCard onClickFlipCard =
    new FlipCard(new Span("front side"), new Span("back side"), FlipCardVariant.CLICK);

Special configuration when using Spring¶

When running on Spring, allow-list the com.flowingcode package so Vaadin Flow can discover the add-on's components. See Common configuration for details.

API reference¶

Headline types exposed by the add-on:

FlipCard — the card component; extends Div. Constructors: FlipCard(Component front, Component back), FlipCard(Component front, Component back, FlipCardVariant variant). Key methods: setVariant(FlipCardVariant), getVariant(), setFrontComponent(Component), setBackComponent(Component).
FlipCard.FlipCardVariant — nested enum of flip triggers (HOVER, CLICK); defaults to HOVER when no variant is supplied.

For the full API surface, browse the published JavaDoc.

Demo¶

A live demo is available at addonsv25.flowingcode.com/flip-card. To run the demo locally:

git clone https://github.com/FlowingCode/FlipCard.git
cd FlipCard
mvn clean install jetty:run

Then open http://localhost:8080/.

Source code¶

FlipCard on GitHub — distributed under Apache License 2.0.