FAQ Section With Numbered Support Card

Pro

Numbered FAQ accordion with an inverted open row, a blue still have questions card, overlapping faces, and a talk to our team action. Follows light and dark.

When to use FAQ Section With Numbered Support Card

Use this when the answers should feel like a product list, not a blog of objections. Each row is numbered. The open row inverts to charcoal so the visitor can see which question they are in. The left column is a heading, a short line about platform pricing and security, and a blue card that stacks three faces, a You chip, and Talk to our team.

Skip it when you cannot staff a real inbox behind that button, or when the questions are not a sequence a buyer would scan by number. Seven rows that all say we are flexible are a brochure. The shipped copy is a fictional product studio, so replace the services line, the numbered questions, the faces, and the contact URL before this goes to production. The section follows light and dark. The blue card stays blue in both so it still reads as the support 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
290 lines, 10 KB in one file
Install
wensity add faq-section-with-numbered-support-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, numbered, support, saas
Last updated

More faq sections