70%
80%
One line of subheading over 2 lines
Last update: 2nd of appril
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 ullamco
70%
80%
One line of subheading over 2 lines
Last update: 2nd of appril
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 ullamco
70%
80%
One line of subheading over 2 lines
Last update: 2nd of appril
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 ullamco
70%
80%
One line of subheading over 2 lines
Last update: 2nd of appril
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 ullamco
70%
80%
One line of subheading over 2 lines
Last update: 2nd of appril
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 ullamco
70%
80%
One line of subheading over 2 lines
Last update: 2nd of appril
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 ullamco
Flip Card documentation
< 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
// - Colour Primary : primary
// - Colour Secondary : secondary
// - Colour Tertiary : tertiary
// - Colour Quaternary : quaternary
When cards are placed in the layout you can have them sit in many different orientation and they will almost always adjust themselves. 4 in a row is the max for now and you can have as little as one