FAQs With Dashed Lines
An accordion-style FAQ component with animated dashed grid lines that appear on active items. Features grouped sections with smooth expand/collapse transitions.
Frequently Asked Questions
Everything you need to know about deploying AI agents and automating your workflows.
Pricing
Agents
Legal
Questions are organized into titled sections (Pricing, Agents, Legal in the demo). Each section displays its title followed by a stack of clickable FAQ items.
Clicking a question expands it with a smooth height animation. The plus icon rotates 45 degrees to form an X when active. Only one question can be open at a time across all sections.
Active items get a subtle background change with a shadow and ring border. Four dashed grid lines appear at the edges of the active card, extending slightly beyond the card boundaries with fade effects at the ends. The lines use CSS custom properties for easy color customization.
Clicking outside the FAQ container collapses any open question. The component handles dark mode with appropriate color adjustments for backgrounds, text, and the dashed line colors.
More from Frequently asked questions
Included with All-Access
One payment unlocks the code for this block and every other block, template and page.
Get All-AccessExplore more
About this block
Questions are organized into titled sections (Pricing, Agents, Legal in the demo). Each section displays its title followed by a stack of clickable FAQ items.
Clicking a question expands it with a smooth height animation. The plus icon rotates 45 degrees to form an X when active. Only one question can be open at a time across all sections.
Active items get a subtle background change with a shadow and ring border. Four dashed grid lines appear at the edges of the active card, extending slightly beyond the card boundaries with fade effects at the ends. The lines use CSS custom properties for easy color customization.
Clicking outside the FAQ container collapses any open question. The component handles dark mode with appropriate color adjustments for backgrounds, text, and the dashed line colors.