Website elementsContent blocks
Slide box
A reveal card, built into your site with no plugin and no library. A card whose back panel slides in over the front from a chosen direction (up, down, left, right): on hover where there is a mouse, and on click, tap, Enter or Space everywhere, through a real button with aria-expanded. The front is a teaser (icon or image, title, a line), the back its detail (text and a link). Both panels share one height; the one out of view is inert.
Coffee
Roasted on Tuesdays, sold by Friday.
Coffee
Two house blends and a single origin that changes each month. Ask at the counter for a taste of whatever is on the grinder.
See this month’s beansDelivery
Beans at your door in two days.
Delivery
Order by noon and it ships the same day, in a bag that keeps the beans fresh for a month.
How delivery works
Wholesale
For cafés, offices and restaurants.
Wholesale
Weekly deliveries, a grinder on loan and a morning of barista training for your staff.
Ask for a price listTasting mornings
Tap or click: this one ignores hover.
Tasting mornings
The first Saturday of each month, 9 to 11. Six coffees, one table, no booking needed.
Next datesYou'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.
- What slides in over it: 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 shows the headline first and slides up the detail when someone wants it, on a phone as well as with a mouse.
Also called
UABB Slide Boxslide boxreveal cardsliding cardhover reveal boxinfo box with slide-up detailcard overlay
What it replaces
- UABB “Slide Box” module (Beaver Builder), overlay style
- hover-reveal info boxes in Elementor and Divi
- hand-rolled CSS slide-up card overlays
Good for
A grid of teasers whose detail is worth one more gesture: services that each need three lines of explanation and a link, job openings (title on the front, what the job is and Apply on the back), products with ingredients or specifications, team members with a short bio.
Not for
Two faces of equal weight: that is flip-box, which turns a card over to a second, equally important side. Pick slide-box when the front is a teaser and the back its detail sliding over it; pick flip-box when both sides stand on their own. Neither is for anything a visitor must read without interacting: the back never holds the only copy of a price, a phone number or an opening time. And a panel that drops open below the card and pushes the page down (UABB’s other styles) is an accordion.
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 saying whether the back is in and aria-controls pointing at the back. Enter or Space slides it in and out; Escape slides it out and returns focus to the button.
- Both panels are in the DOM. The one out of view is inert and aria-hidden, so its link is not a tab stop and a screen reader reads only what shows. With the back in, Tab goes from the button to the back’s link.
- Focus inside the back keeps it in. Focus leaving the card slides out a back opened from the keyboard; one a pointer clicked in stays until clicked again.
- Hover never works alone: on a touch screen the first tap slides the back in and its link works on the second tap; a tap on the back away from the link slides it out. A corner plus on the front, turned to a cross on the back, says there is more.
- prefers-reduced-motion (tracked live): no sliding; the panels crossfade.
- Without JavaScript the button is never shown and both panels render, the back below the front, link included. Printing shows both.
Where it's live
- superherotech.ai: /elements/slide-box/ (demo)
How to ask for it
“The slide-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, Flip box, 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, 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- Map and directions
Show people where you are and get them there in one tap, without a Google script on every page.
- Responsive table
Timetables, prices and comparisons that read on a phone: a proper table on a wide screen, and a card per row, or a table you can swipe along, on a narrow one.
- Business hours
Open now, closing in 40 minutes, back tomorrow at 8: always right, in the shop’s own time zone.
- Flip box
A card that turns over to say more — works on a phone, not just on hover.
Want the slide box on your site?
Tell us about the business. We build the site with it, launch it, and change it whenever you ask.