Tabbed FAQ
A tabbed FAQ that splits questions into Projects, Pricing, and Logistics tabs, each revealing its own accordion of answers below a centered heading.
A tabbed FAQ that splits questions into Projects, Pricing, and Logistics tabs, each revealing its own accordion of answers below a centered heading.
Search blocks by description or jump to a page.
The source for every Portfolio block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Tabbed FAQ splits its questions across three topic tabs, Projects, Pricing, and Logistics, and reveals a separate accordion under each. A centered heading and lede sit above the tab bar, inviting the visitor to pick the topic on their mind before reading a single answer. Projects covers engagement type and embedded work, Pricing states fixed numbers and payment timing, and Logistics answers time zones, start dates, NDAs, and file ownership.
The three tabs are one typed array of FaqTab objects, each holding its own FaqItem list. Every tab renders a shadcn Tabs panel wrapping a bordered single Accordion whose first item opens by default. Splitting by topic means a visitor with only a budget question opens Pricing and never scrolls past logistics they do not care about.
Reach for this block on a services or contact page where questions fall into clear buckets and one long list would bury the answer a visitor actually wants. The installer swaps the three tab labels and their questions for their own most-asked topics, keeping the fixed-price Pricing tab as a template for stating numbers plainly.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the projects, pricing, and logistics split for a freelance designer. Other groupings:
Tip: label tabs by the question in the visitor's head, not by your internal categories; Pricing works where Commercials sends them somewhere else.