shadcn.io is not affiliated with official shadcn/ui
Icons FAQ Block for Ark UI
A cleaning-service FAQ built to be scanned: an icon tile on each question and three short answer lines led by a check, a clock and a shield.
Installation
Overview
An icons FAQ for React with Ark UI. A centred header sits over a framed list of seven questions: a frame open at the foot, so its sides run to the end of the block, with hairline rows inside it. Each question has an icon tile, and each answer is three short lines in the same order: a check for what you get, a clock for when and for how long, a shield for what protects you. The icons repeat, so a reader learns the pattern once and then skims. It's built from Accordion and Guides with lucide icons, with CSS transitions for the entrance and your theme's tokens for every colour. For service pages, home services and booking flows, where people want three facts, not a paragraph.
FAQ
How do I change the answers?
Edit QUESTIONS: each entry has the question, an icon (any lucide icon), and the three lines, get, when and covered. Keep each line to one sentence. If a question has nothing to say about cover or timing, drop that line from the entry and the markup together rather than padding it.
Are the icons read out?
No. Both the tiles and the line icons are decoration and hidden from assistive technology; the three lines are a real list, read in the same order as they appear. The icons add no information the words don't carry.
Are the closed answers in the page's markup?
Yes. The Accordion takes lazyMount={false} and unmountOnExit={false}, so every answer renders from the start, hidden until its question opens. Search engines and server rendering see all seven, and closing an answer doesn't remove it.
How does it work with a keyboard and a screen reader?
Each question is a button inside its own h3 under the section's h2, so a screen reader's headings list shows them all. Tab moves from question to question, Enter or Space opens and closes one, and the button says whether it's expanded. The open answer is labelled by its question.
The Up and Down arrows also move between questions, and Home and End jump to the first and last.