A bullet point is a dot. An icon is a promise about what the point actually is.
The Stylish List block pairs each line of text with its own icon, and adds interactive touches most plain lists don’t have — hover backgrounds, small pinned labels, tooltips, and a Read More toggle for long lists.
Before You Start
- Edition: Free — the Stylish List block works in Nexter Blocks (free) and Nexter Blocks Pro.
- Block to enable: Stylish List, switched on under Nexter > Blocks in your WordPress dashboard.
Steps
- Add the Stylish List block and add a row for each item, with its own text and icon.
- Pick an icon for each row — a Font Awesome icon, an uploaded image, or an SVG.
- Add a link if a row should be clickable.
Layout Type switches the whole list between a vertical stack and a horizontal row.
What Each Item Can Carry
| Feature | What it adds | Guide |
|---|---|---|
| Hint | A small pinned label badge on that row | Pin Hint labels |
| Tooltip | Text that appears on hover | Item tooltips |
| Read More | Collapses a long list to a few items | Read More button |
How It Behaves
- Hint Text alone does nothing. Measured: filling in Hint Text without switching on Hint for that row rendered no label at all. Switch Hint on first.
- Background Hover Effect starts with the first item already highlighted, before any hover happens — measured. Hovering another item moves the highlight there instead. See the hover background guide.
- Interactive Links dims every other item while you hover one — measured as computed opacity, the hovered item stays fully visible and the rest fade to partial opacity. Set to Global and it can connect several separate list blocks. Global reaches other Stylish List blocks on the same page. Measured with two separate blocks sharing the same Global ID: hovering an item in one dimmed items in both, even though only one was ever touched. See the interactive footer links guide.
- Each row’s icon can be a Font Awesome icon, an uploaded image, or an SVG — a per-row choice, not a block-wide one.
Limitations
- Hint Text needs the Hint toggle switched on for that row, or it never appears — measured.
- The global Interactive Links connection only reaches other Stylish List blocks, not other block types.
- SVG icons render as an embedded object, not inline markup, which limits how far their colours can be styled through the block’s own controls.
Troubleshooting
My hint label isn’t showing
Check Hint is switched on for that row, not just Hint Text filled in — measured, the text alone does nothing.
The wrong item looks highlighted before I’ve hovered anything
That is expected with Background Hover Effect — the first item starts highlighted by design, measured.
The block is missing from the inserter
Switch Stylish List on under Nexter > Blocks.
