Website elementsContent blocks
Flip box
A flip box, built into your site with no plugin and no library. An info card with a front (icon or image, title, a line) and a back (longer text, a link) that turns over in 3D: on hover where there is a mouse, and on click, tap, Enter or Space everywhere. Both faces share one height; the hidden face is inert.
Design
Pages drawn around what your customers ask first.
Design
We start from the questions your front desk answers every day, and design the pages so a visitor finds the answer before they reach for the phone.
See the workSupport
A person answers, the same day.
Hosting
Fast pages, served close to your visitors.
Hosting
Every page is prebuilt and served from a network of data centers, so it opens quickly wherever your visitors are, and there is no server of yours to patch.
How hosting worksTraining
Tap or click to turn this one over: it ignores hover.
Training
One hour with your team, recorded, so whoever edits the site next has seen it done.
Book a sessionYou'll need to give us
- The front of each card: a title and a short lineNeeded to startAdd an icon or a photo for a card if you have one in mind.
- The back of each card: the longer text, and where its link goesNeeded to start
Send these with your request and we can start straight away. Everything else is ours to do.
A card that turns over to say more — works on a phone, not just on hover.
Also called
PowerPack Flip BoxUABB Flip BoxElementor Flip Boxflip cardinfo box with hover reveal3D card flip
What it replaces
- PowerPack / UABB / Elementor Pro Flip Box modules
- hand-rolled CSS flip cards
Good for
Services grids, team members, features: three or four cards in a row, where the front names the thing and the back says a little more and links on.
Not for
Content people must read without interacting. The back is optional detail, never the only place a price, a phone number or an opening time lives: put those on the front or on the page.
Accessibility
Written so the page works for every visitor, whether they browse with a mouse, a keyboard or a screen reader, and whether or not they have asked for less motion.
- The card is a real button named from the title, with aria-expanded showing which face is up and aria-controls pointing at the back. Enter or Space turns it; Escape turns it back and returns focus to the button.
- Both faces are in the DOM. The face turned away is inert and aria-hidden, so its links are not tab stops and a screen reader reads only the face that shows. With the back up, Tab goes from the button to the back’s link.
- Focus inside the back keeps it shown. Focus leaving the card turns back a card opened from the keyboard; a card a pointer clicked open stays open until clicked again.
- Hover never works alone: on a touch screen the first tap turns the card and its link works on the second tap; a tap on the back away from the link turns it back.
- prefers-reduced-motion (tracked live): no rotation; the faces crossfade.
- Without JavaScript the button is never shown and both faces render stacked, front then back, with the link. Printing shows both faces.
- A front image carries real alt text, or imageAlt="" when it is decorative on purpose; the build fails if imageAlt is missing. Icons are decorative.
Where it's live
- superherotech.ai: /elements/flip-box/ (demo)
How to ask for it
“The flip-box on our home page, with …”
Name it, say which page and which part of the page it goes on, and say what goes in it: your photos, your words, your colors. That is a complete request. We build it, you approve it, and it goes live. If you know it by another name, from WordPress or from another site, that works too.
More elements you can ask for: Before / After, Particle field, Mega menu, Video background, Parallax band, Scroll reveal, Business hours, News ticker, Instagram feed, Accordion / FAQ, Card slider, Tabs, Info list, Video player, Testimonial carousel, Icon library, Animated text, Cookie consent, Animated background, Modal box, Announcement bar, Image hotspots, Info circle, Slide box, Countdown, Content toggle, Off-canvas panel, Video gallery, Map and directions, Link effects, Tabcordion, Tooltip, Responsive table, Notice, Toast, Loading, Menu button, Radio group, Stepper, Tags, Scrollbox, Sticker. Or see all of them working.
More in Content blocks
See them all working- Info list
Lay out your services, how you work step by step, or your story year by year, each with an icon or a number, in a list that reads on any screen.
- Image hotspots
Put the explanation on the picture: pins on the parts that matter, each opening a line about it — or a guided tour that walks visitors round.
- Info circle
Five things you do, round one circle: point at one and it tells its story in the middle — and on a phone it is simply a list.
- Slide box
A card that shows the headline first and slides up the detail when someone wants it, on a phone as well as with a mouse.
Want the flip box on your site?
Tell us about the business. We build the site with it, launch it, and change it whenever you ask.