Timeline FAQ
An FAQ laid out as a vertical timeline, walking visitors through questions in order. Suited to onboarding or step by step guides where sequence matters.
An FAQ laid out as a vertical timeline, walking visitors through questions in order. Suited to onboarding or step by step guides where sequence matters.
The Marketing (Legacy) Collection unlocks the source for every Marketing (Legacy) block. All Access unlocks every Collection.
Already purchased? Log in
Timeline FAQ opens with a centered heading and subtitle, then renders two or more topic sections stacked vertically. Each section has its own centered title and question, followed by a vertical rail with numbered circle markers on the left and a card on the right for every step. The card holds a title, a short description, and a supplementary detail paragraph. The final card in each section adds a footer row with a "Process complete" indicator and a ghost button for further reading. Below all sections a closing panel offers two buttons: one to browse FAQs and one to contact support.
Each topic section is independent, so you can add or remove sections without affecting the others. Within a section the number of steps is flexible, the card copy is fully replaceable, and the closing footer buttons can point anywhere. The support panel at the bottom can be kept or removed depending on whether you want a direct escalation path on the page.
This layout fits pages where a process needs to be explained in strict order, not just answered at a glance. For a product analytics SaaS it works well on a dedicated help or onboarding page where new users need to understand a multi-step setup before they see value, and where a plain accordion would obscure the sequence. The numbered rail makes dependencies between steps obvious in a way that a card grid or centered accordion cannot.
A natural flow around it on a Marketing (Legacy) page:
Before
After
Each section maps one question to an ordered series of steps. A few ways to adapt it:
Tip: keep each section to five steps or fewer so the rail stays readable without scrolling past it entirely before the next section.