FAQ Section With Split Headline Accordion

Pro

Left-aligned two-line headline over a hairline FAQ accordion. Plus rotates to a close mark and the answer unfolds in height. Follows light and dark.

When to use FAQ Section With Split Headline Accordion

Reach for this when the FAQ should be the page, not a card on a still. A grey eyebrow sits above two lines of heading. Questions sit on hairline rows. One row opens at a time. Plus turns into a close mark as the answer unfolds. There is no booking card.

Skip it when you still need a call beside the list, or when the answers are long enough to bury the next section. The shipped copy is a fictional messaging app, so replace Think Time, the voice clip, and the receipts line before this goes to production. The section follows light and dark. Keep the motion if you keep the list. Instant open reads as a bug on a page this quiet.

Block details

Category
FAQ Sections
Renders
JavaScript animation. Paints first, then animates
Theme
Follows the site theme in light and dark
Responsive
Mobile, tablet and desktop breakpoints are already set
Dependencies
clsxframer-motiontailwind-merge
Source
199 lines, 7 KB in one file
Install
wensity add faq-section-with-split-headline-accordion --type block
Stack
React, Next.js, TypeScript and Tailwind CSS v4
Licence
Included with Wensity Pro. The CLI copies the file into your repository and you own it from there
Tags
light, dark, faq, accordion
Last updated

More faq sections