FAQ Section With Illustration Accordion
ProSplit FAQ accordion with a question mark illustration, isolated question cards, chevron toggles, and a partner questions list. Follows light and dark.
When to use FAQ Section With Illustration Accordion
Reach for this when the FAQ should sit next to a picture, not a booking card. The heading and a partner line live on the left. Under them is a drawn question mark, a thick blue stroke with a sheen and two quieter marks beside it. The right column is a stack of bordered cards with air between them. Chevrons flip.
Skip it when you need a call to action in this section. A logistics FAQ next to a giant question mark is still a FAQ, but swap the questions if they are not yours. The shipped copy is a fictional freight desk, so replace the deliveries line and the regions before this goes to production. The section follows light and dark. The mark stays blue in both so it still reads as the same object.
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
- 300 lines, 9 KB in one file
- Install
wensity add faq-section-with-illustration-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, illustration, chevron, saas
- Last updated
