Back to all components

Flip Cards

A "flip card" element provides an interactive card that flips to reveal additional content when hovered or clicked. 

It adds dynamic visual effects and is useful for displaying more information in a compact space.

Key Features 
  • Interactive Animation: Cards flip to reveal hidden content, enhancing user engagement.
  • Compact Design: Displays more information without cluttering the page.
  • Customisable: Easily styled with custom classes, supporting images, text, and links on both sides.
  • Responsive: Adjusts smoothly across different screen sizes.
Examples
  • Team Profiles: Show basic info on the front and more details (e.g., bio or contact info) on the back.
  • Product Showcases: Display product images on the front and descriptions or prices on the back.
  • FAQ Sections: Present a question on the front and flip to show the answer.
Example Flip Card

22
,
22
22
00

Size 3 Flip Card. With Counter value of 2220

Example Text. Example Text. Example Text. Example Text. Example Text. Example Text.

Example Flip Card

Thanks for visiting Mition!

Example Flip Card

Size 3 Flip Card.

Example Text. Example Text. Example Text. Example Text. Example Text. Example Text.

Example Flip Card

Thanks for visiting Mition!

Example Flip Card

Size 3 Flip Card. 

Example Text. Example Text. Example Text. Example Text. Example Text. Example Text.  

Example Flip Card

Thanks for visiting Mition!

Example Flip Card

Size 3 Flip Card. 

Example Text. Example Text. Example Text. Example Text. Example Text. Example Text.  

Example Flip Card

Thanks for visiting Mition!


Variations

Different colour styles and sizes can be utilised here. Click here for more details.

You can also use custom animations and layout tools which can be found here.



Example Flip Card

22
,
22
22
00

Size 4, Orange Flip Card.

Example Text. Example Text. Example Text. Example Text. Example Text. Example Text.

Example Flip Card

Thanks for visiting Mition!

Example Flip Card

Size 2, Lavender Flip Card.

Example Text. Example Text. Example Text. Example Text. Example Text. Example Text.

Example Flip Card

Thanks for visiting Mition!

Example Flip Card

Size 4, Aqua Flip Card.

Example Text. Example Text. Example Text. Example Text. Example Text. Example Text.

Example Flip Card

Thanks for visiting Mition!


Next

Footer

A footer element sits at the bottom of a page, providing essential information and navigation. You are able to use an image as a background on the footer. You can also add an image by adding the source text into the custom HTML area.

Read More