Website elementsContent blocks
Info circle
A circular infographic, built into your site with no plugin and no library. Items (an icon or a round image each) spaced evenly round a circle, positions computed at build; the chosen item’s title and text show in the middle. Hover, focus and click choose; each item is a button with aria-pressed and the center is a polite live region. Optional autoplay with a pause button. In a container narrower than 28rem, and without JavaScript, it is a plain list with every item’s text showing.
Listen
An hour on the phone about your customers: what they ask, what they need to find, what makes them call.
Plan
A page list and a sketch of each page, agreed before anything is built, so there are no surprises.
Build
Pages built from tested parts, on a preview address you can click through at any time.
Launch
The new site goes live on your domain, with the old addresses redirected so no link breaks.
Grow
Monthly checks on speed and search, and small changes whenever you ask.
Riverside
By the footbridge. Opens at 7, with the best seats in town for watching rowers.
Riverside hours
You'll need to give us
- Between two and ten items, each with a short title and a sentence or twoNeeded to startAn icon or photo for each helps. We can choose icons if you have none.
Send these with your request and we can start straight away. Everything else is ours to do.
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.
Also called
UABB Info Circlecircular infographiccircle infographicprocess circlecycle diagramradial menuinteractive infographic
What it replaces
- UABB “Info Circle” module (Beaver Builder)
- Ultimate Addons / Elementor “info circle” widgets
- circular infographic images with the text baked in
Good for
Three to eight things of equal weight that belong together: the steps of a process that repeats, the services round one promise, the branches of a small business, the parts of a method. The circle says “these go round together”; the middle gives each its moment.
Not for
Content people must read in order or all at once (a list does that better), more than eight items (they crowd the circle and the text box in its middle), or items with long texts: the middle holds about 30 words. Steps with a start and an end, which are info-list’s vertical timeline. And not a navigation menu, whatever “radial menu” searches suggest: items choose text, they do not go anywhere.
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.
- Each item is a real <button> named by its title, with aria-pressed (exactly one is pressed) and aria-controls pointing at the middle. Hover (with a mouse or trackpad), focus and click all choose it, so Tab alone walks the circle.
- The middle is aria-live="polite": when the choice changes, a screen reader reads the new title and text. While autoplay runs it is not live, so nothing is read out on its own.
- Autoplay has a visible pause button (WCAG 2.2.2), waits while the pointer is on the circle or focus is inside, while off screen and in a hidden tab, stops for good once the visitor clicks an item, and never runs under prefers-reduced-motion (tracked live), which also drops the fade.
- The circle needs about 28rem. In a narrower container it becomes a vertical list with each item’s icon, title and text showing, and there is nothing to press.
- Without JavaScript it is that list, whatever the width: every item’s text is on the page. The list is the only copy of the content; the middle shows a copy of the chosen entry. Print shows the list.
- Icons and images are decorative (the title names the item); items are at least 44px.
Where it's live
- superherotech.ai: /elements/info-circle/ (demo)
How to ask for it
“The info-circle 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, 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- 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.
- 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.
Want the info circle on your site?
Tell us about the business. We build the site with it, launch it, and change it whenever you ask.