shadcn.io is not affiliated with official shadcn/ui
FAQ Accordion Hero Block for Vue
A compact hero on ruled bands between solid rails: a headline and a Shine Button, then a band with four common questions in an accordion that opens one at a time, beside a short note.
Installation
Overview
A compact hero with an inline FAQ accordion, for Vue with Ark UI, laid out on ruled bands between the page's solid rails. A header band holds a bold headline and one sentence for a fictional bookkeeping app at the start, and a Shine Button and an outline Button as links at the end. Under its rule, a second band is split by a hairline divider: a short "Before you start" note beside four questions in our Accordion, which answer the most common objections right below the calls to action. Each band draws its rule with + marks where it meets the rails and the divider. One answer opens at a time and any can be closed again; each panel slides open with the Accordion's own transition. The rest of the hero fades up once on load with CSS transitions, and nothing moves for visitors who ask for reduced motion. Made for SaaS product pages and pricing pages, where the setup time, the free plan or the cancellation terms are what stand between the visitor and the sign-up.
FAQ
How do I change the questions in the hero?
Edit the QUESTIONS array at the top of the file. Each entry has a question, an answer and an id, which is the accordion item's value: keep it stable and unique, so opening a question by default or tracking it doesn't depend on the order. Three to five short questions keep the hero compact (the file has four); answers are plain text, and a link inside one is underlined by the Accordion's own styles.
How do I open a question by default, or let several stay open?
Give Accordion a defaultValue with the ids to open, such as ["setup"], and add multiple to let several stay open at once.
How do keyboard and screen reader users use the accordion?
Each question is a button inside an h3, under the visible "Before you start" h2, so a screen reader can jump to the questions by heading. The button says whether its answer is expanded and which panel it controls. Tab moves between questions and Enter or Space opens or closes one.
The arrow keys, Home and End also move between the questions.
The headline is the page's one h1.
How can I see which questions visitors open?
Listen to the accordion's change event and send the opened id to your analytics: the questions people open most are the objections to answer higher up, in the headline or the subtitle.
Use onValueChange: its details.value lists the open ids.
How does the FAQ hero fit on a phone?
Below the md breakpoint the header band stacks: the headline and sentence, then the two calls to action, which wrap onto their own row and sit on the first screen. The note and the questions follow in the second band, the divider turns into the band's rule, and a long question wraps beside its chevron. Nothing scrolls sideways down to 320px.
When should I answer questions in the hero instead of a separate FAQ section?
Put them in the hero when two or three objections block the sign-up, such as setup time, a free tier or cancellation, and the answer fits in two sentences. Keep a full FAQ section or page for ten or more questions across topics, and link to it from the last answer if you need both.