Website elementsContent blocks
Info list
A vertical timeline, built into your site with no plugin and no library. Items with a marker (icon, image, number or dot), a title, a line of text and an optional link, stacked or inline in columns. With the connector the markers are joined by a line: a steps list or a vertical timeline. HTML and CSS only; there is no script.
What we do
How it works
- 1
Get in touch
Call, or book a visit online at a time that suits you.
- 2
We visit and quote
A walk round the garden and a written price within two days.
- 3
We do the work
On the agreed day, with the site left tidy every evening.
- 4
You pay when happy
One invoice at the end, once you have seen the result.
Our story
- 1
One van, one mower
The business starts with weekend lawn care for neighbors.
- 2
The first design job
A courtyard garden, and the start of the design side.
- 3
A team of six
Two crews, a designer and an office that answers the phone.
- 4
Water-wise gardens
Drip irrigation and drought-tolerant planting become a service of their own.
You'll need to give us
- The items, each with a title and a line of textNeeded to startAdd a link, an icon or a photo for any item that has one.
Send these with your request and we can start straight away. Everything else is ours to do.
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.
Also called
PowerPack Info ListUABB Info ListElementor Icon Listicon liststeps listprocess stepsvertical timelinefeature list
What it replaces
- PowerPack “Info List” module (Beaver Builder)
- UABB “Info List”
- Elementor Icon List widget
- hand-written icon lists
Good for
Services, “how it works”, process steps, milestones and feature lists.
Not for
Navigation (that is a menu) and long prose (write paragraphs).
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.
- A real list: <ol> when the order matters (connector or numbers), <ul> otherwise, with role="list" so Safari keeps announcing it with list-style removed.
- Each title is a heading at `headingLevel`. Numbers are real text, not generated content.
- A linked item is ONE link, the title, whose hit area is stretched over the item by a pseudo-element: a screen reader hears one link named by its title, and the focus ring outlines the whole item.
- Icons are decorative (aria-hidden) unless an item gives `iconLabel`; images take `imageAlt` (empty by default). The connector is CSS, not markup, so nothing extra is read.
- No script and no motion, so nothing to reduce and nothing to fail.
Where it's live
- superherotech.ai: /elements/info-list/ (demo)
How to ask for it
“The info-list 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, 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- 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.
- Map and directions
Show people where you are and get them there in one tap, without a Google script on every page.
Want the info list on your site?
Tell us about the business. We build the site with it, launch it, and change it whenever you ask.