A static FAQ section that shows every answer, with no clicking and no script. Six questions sit in two columns on a pale blue background, each with a small two-digit number, a bold question and a short answer. A white strip at the bottom offers a way to ask something else. On phones the two columns become one and the strip stacks its text above the button.
const faqs = [
{
q: "How often should windows be cleaned?",
a: "Most homes are fine with a clean every eight weeks. Houses near a main road or the coast usually pick a four-week round, because salt and traffic film build up faster.",
},
{
q: "Do I need to be at home?",
a: "No. As long as we can reach the back of the house, we clean while you are out and leave a card through the door with the time we finished.",
},
{
q: "What does a clean include?",
a: "Glass, frames, sills and the front door on every visit. Conservatory roofs, gutters and solar panels are priced separately and can be added to any round.",
},
{
q: "What if it rains on the day?",
a: "We work in light rain, since pure water dries without marks. In heavy rain or high wind we move your clean to the next dry day and text you the new date.",
},
{
q: "How do I pay?",
a: "You get a text with a payment link after each clean. Regular customers can set up a monthly direct debit and stop thinking about it.",
},
{
q: "Can I pause or cancel my round?",
a: "Yes, at any time and without a fee. Reply to any of our texts and we will skip a visit or take you off the round the same day.",
},
];
export default function TwoColumnFaqList() {
return (
<section className="bg-sky-50 px-6 py-16 text-slate-900 sm:py-24">
<div className="mx-auto max-w-5xl">
<div className="max-w-3xl">
<h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">Before you book</h2>
<p className="mt-4 text-lg leading-relaxed text-slate-600">Straight answers on how a Brightside round works, what it covers and how you pay.</p>
</div>
<dl className="mt-14 grid gap-x-16 gap-y-10 border-t border-sky-200 pt-12 md:grid-cols-2">
{faqs.map((item, i) => (
<div key={item.q} className="flex gap-5">
<span aria-hidden="true" className="flex-none pt-0.5 font-mono text-sm font-semibold text-sky-700">{String(i + 1).padStart(2, "0")}</span>
<div>
<dt className="text-lg font-semibold leading-snug">{item.q}</dt>
<dd className="mt-2 leading-relaxed text-slate-600">{item.a}</dd>
</div>
</div>
))}
</dl>
<div className="mt-14 flex flex-col gap-4 rounded-xl bg-white p-6 ring-1 ring-sky-200 sm:flex-row sm:items-center sm:justify-between sm:px-8">
<p className="font-medium">Something we have not covered? We reply to every message within a working day.</p>
<a href="#" className="inline-flex h-11 flex-none items-center justify-center rounded-lg bg-sky-700 px-5 text-sm font-semibold text-white transition hover:bg-sky-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-700 focus-visible:ring-offset-2">
Ask a question
</a>
</div>
</div>
</section>
);
}
Install with one command: npx shadcn@latest add https://we.inc/r/two-column-faq-list.json
Use a list when the answers are short and there are eight or fewer of them. Visitors read more of a list because nothing is hidden. Switch to an accordion when the answers are long or the list would push the rest of the page far down.
No. It has no state, so the HTML version behaves the same. The React file only saves you repeating the markup for each question.
Add a JSON-LD script of type `FAQPage` to the page with the same questions and answers as the visible text. The markup must match what visitors can read.
Two columns halve the height of the section on desktop and keep line lengths comfortable. Long answers read better in one column, so remove `md:grid-cols-2` if yours run past four sentences.
Yes. Add an `id` to each item's wrapper, for example from a slug field in the array, and link to it with a hash such as `#payment`.
Related: FAQ Accordion with Working Open and Close, Large Quote Testimonial with Author and Role, Split Hero with Email Capture, Button Set: Primary, Secondary, Ghost, Icon and Loading.
More faq and accordions or all free UI components. Start for free to have a full site built around it.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.