Concrete CMS Add-ons

Go beyond flat, static UIs and discover how to engage users with these accessible CSS flip cards.

These Concrete CMS CSS flip cards create interactive elements that rotate to reveal hidden content when users click a button. Using the CSS transform property and 3D space techniques, these dynamic two-sided flip cards add depth to any website without complex JavaScript. The CSS card flip effect has four templates (Flip Card Right, Flip Card Left, Flip Card Down, Flip Card Up), there is an option to add a background colour to the back of the card, float the flip card block to the left, centre or right within an area. The titles, back text, front flip card button areas have a semi transparent background and the block has a subtle drop shadow with a white border. There are eleven link button colours to choose from (colours are chosen for accessibility and cannot be changed) and a small piece of javascript to activate the CSS animation.