FAQ Section With Dashed Grid Pills
ProCentered FAQ accordion with a dashed layout grid, charcoal question pills, a portrait beside the open answer, and contact actions. Follows light and dark.
When to use FAQ Section With Dashed Grid Pills
Reach for this when the FAQ should read as a short chat, not a help center. A dashed frame holds the heading, the list, and two actions. Open questions are charcoal pills. The answer sits in a white card with a face to the left. Closed rows keep a plus on the right. The yellow Contact Us pill is the only colour.
Skip it when you cannot staff a real inbox behind Contact Us, or when you need a still beside the list. Empty hashes under Read all FAQ and Contact Us are a brochure. The shipped copy is a fictional video studio, so replace the cost line, the process, the portrait, and both URLs before this goes to production. The section follows light and dark. The yellow action stays yellow in both so it still reads as the next step.
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
- 250 lines, 9 KB in one file
- Install
wensity add faq-section-with-dashed-grid-pills --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, pills, dashed, cta
- Last updated
