Flip Card Instructions
Links
Example page: https://www.fairhive.co.uk/testing-cards
<div class="flip-card-wrapper"><div class="front"><h4 class="benchmark">70%</h4><h2 class="current-mark">80%</h2><h3 class="subheading">One line of subheading over 2 lines </h3><p class="date">Last update: 2nd of appril <p></div><div class="back"><p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation<a href="/example link">ullamco</a><p></div></div>
The above needs to be copy pasted in a code droplet
The reason why we approached with code droplets is so that we can let the data interact with each other and have some separation between the front data and the back.
The code underneath is where you would populate the card. The only things you are expected to change is the black text.
- Benchmark - Change 60% to your own number.
- Current Mark - Change 10% to whatever your current value is.
- Subheading - You can write a short description here (1-2 lines).
- Date - Update the date to when the data was last updated.
- Content - This is the detailed text on the back of the card. You can add your own message here. There's also an example link-if adding links is tricky, just let me know and I'll help.
Now, all card need a colour assign to them. I have created 4 placement styles in this example and randomly assigned them