FAQ Section With Accordion Call Card

Pro

Split FAQ accordion with a sidebar book-a-call card, stacked question rows, plus and close icons, and a peach glow behind the answers. Follows light and dark.

When to use FAQ Section With Accordion Call Card

Reach for this when the page still needs a human next to the answers. The heading and a booking card sit on the left. Six question cards stack on the right. The first row opens, plus turns into a close mark, and the answer stays in the DOM. A screenshot of an accordion is not a FAQ section.

Skip it when the answers are one line each, or when you cannot put a real calendar behind Book a Free Call. An empty hash under a 15 minute promise is a brochure. The shipped copy is a fictional AI product studio, so replace the questions, the answers, the portrait, and the booking URL before this goes to production. The section follows light and dark. The orange action stays orange in both so it still reads as the only CTA.

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
263 lines, 9 KB in one file
Install
wensity add faq-section-with-accordion-call-card --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, cta, agency, saas
Last updated

More faq sections