How to create flip cards with custom HTML

With custom HTML and CSS, you can fully customize your cards visualization! Follow the steps below to see how you can create flippable cards, or see our other help docs to explore more layout options.

In this article

Note: When using these examples, remember to change the column names displayed with Handlebars syntax {{ }}. This needs to exactly match  the column headers in your own visualization for the custom code to work as expected. For example, if the code reads {{Title}}, you should have an equivalent column in your datasheet with a header name that reads “Title”.

WARNING: These instructions provide initial guidelines on how to customize your visualization. Since the Cards template allows for greater flexibility with custom HTML and CSS, you will most probably have to adjust the code provided below to create the desired output.

Create flippable cards on hover

1
Create your Cards visualization by choosing one of our existing blueprints.
2
In the Preview tab, head to Cards > Card layout and select Image overlay.

TIP: The following HTML code only works in this mode, but don't worry if you don't have an image to use for the front – you can alter the front card content according to your own dataset. We also recommend adjusting all padding to 0, in order for the front content to take up the whole card's width.

3
Under Cards, enable the Customize card HTML toggle.

4
Add the following card structure – and don't forget to replace the {{placeholders}} with your column headers.
The following structure adds an image at the front, and additional information at the back.
All data you would like displayed at the front needs to be added under div class="flip-card-front".
Everything that shows up after the flip should be positioned under the div class="flip-card-back" div tag.
You can also adjust the image's width and height using the style property.
5
Now it's time to add styling. Add the following snippet below your HTML structure:

Create flippable cards on click

1
Create your Cards visualization by choosing one of our existing blueprints.
2
In the Preview tab, head to Cards > Card layout and select Image overlay.

TIP: The following HTML code only works in this mode, but don't worry if you don't have an image to use for the front – you can alter the front card content according to your own dataset. We also recommend adjusting all padding to 0, in order for the front content to take up the whole card's width.

3
Under Cards, enable the Customize card HTML toggle.

4
Add the following card structure – and don't forget to replace the {{placeholders}} with your column headers.
Under step 3 in the previous section, you can learn more about where each element should be positioned, depending on whether you would like it displayed at the front or at the back of your card.
5
We now need to add styling. Paste the following snippet below the rest of your code.

What does each styling section do?

Let's take a look at each styling section individually.
1
.flip-card {
This section affects the overall visualization. Depending on which Card layout you have selected, the outcome of the snippet above may be different.

If you've chosen the Image overlay layout, your visualization may work when the width and height have been adjusted to 100%. However, in Landscape or Portrait modes, you need to set a fixed size – for example, 300px.
The background-color has been set to transparent, as the underlying visualization already has a color category assigned to each card. You can always replace this with any color.
2
.flip-card-inner {
This container is needed to position the front and back side on top of each other, which is achieved by the width and height being 100%. In this section, you can also adjust the speed of your transition – for longer animation, increase the transition: transform to something like 1.5s.
3
The next two CSS sections are essential for the flip animation we are trying to achieve. The .flip-card:hover .flip-card-inner setting introduces the rotation, whereas the .flip-card-front, .flip-card-back bit ensures that the content is being displayed as expected (and not mirrored).
4
We have also added a fallback styling in the case where you don't have an image for the front section of your cards. You can use the background-color and color settings to apply a desired color for the font and background of your front part.
5
.flip-card-back {
The last part of the styling section affects the back of your cards. You can choose whether to set a fixed background color, add padding to your text and adjust any element that appears after the cards flips. If your text gets cut off, you may want to reduce the width under the .flip-card CSS section, as well as add a margin.

TIP: You may want to adjust your CSS differently for mobile screen sizes. Use the CSS @media rule for more flexibility.

Related Articles