Modules
Feature Accordion
Image Per Item
Every feature pairs with its own image that swaps into the panel the moment a reader opens that item
Sticky Visual
On desktop the image column stays pinned in view while the reader scrolls through and opens each feature
Inline on Mobile
On tablet and mobile the image collapses inside each item so the layout stays vertical without a heavy image rail
Tuned States
Title, description, divider, and card background each have their own default, hover, and active color values
What it does
The Feature Accordion is an expandable list paired with an image. Each item has its own title, description, and image, and the image panel on the right swaps in to match whichever item is open.
Editors reach for it on feature walkthroughs, product tours, "how it works" sections, FAQs, and step-by-step explainers - anywhere a page needs to show a stack of related ideas without burying them in a wall of text.
Live preview
See the module in action
This is a real render of the Feature Accordion module with default settings.
This is the description for the first accordion item. Add details about a feature, FAQ answer, or step in a process.
This is the description for the second accordion item. Add details about a feature, FAQ answer, or step in a process.
This is the description for the third accordion item. Add details about a feature, FAQ answer, or step in a process.
This is the description for the fourth accordion item. Add details about a feature, FAQ answer, or step in a process.
This is the description for the fifth accordion item. Add details about a feature, FAQ answer, or step in a process.
