ASSET_SPEC // TWO_COLUMN_FAQ

Two-column FAQFAQ template

A scannable FAQ layout for landing pages with short, independent answers.

Live_Preview_Environment

Questions, answered

Is this responsive?

Yes. The columns stack on smaller screens.

Can I add more columns?

Change the grid-cols-2 to grid-cols-3 or any value that fits your layout.

Does it support dark mode?

Use Tailwind's dark: variant to add dark-mode styles to each element.

How do I customize spacing?

Adjust the gap-8 utility to control spacing between grid items.

When_to_Use

Use the two-column grid when you have many short, independent answers and want maximum scannability on a landing page. Every answer stays visible without a click, which suits pricing and feature comparisons.

Source_Manifest

Source_Inspector // TAILWIND

<section class="mx-auto max-w-5xl" aria-labelledby="faq-heading">
  <h2 id="faq-heading" class="text-3xl font-semibold">Questions, answered</h2>
  <div class="mt-8 grid gap-8 md:grid-cols-2">
    <article>
      <h3 class="font-medium">Is it mobile friendly?</h3>
      <p class="mt-2 text-neutral-600">Yes, the layout automatically adjusts to a single column on mobile devices.</p>
    </article>
    <article>
      <h3 class="font-medium">Is it SEO optimized?</h3>
      <p class="mt-2 text-neutral-600">We use semantic HTML and support structured data for better search visibility.</p>
    </article>
  </div>
</section>

READ_ONLY

type FaqItem = { question: string; answer: string };

const defaultItems: FaqItem[] = [
  { question: 'Is it mobile friendly?', answer: 'Yes, the layout automatically adjusts to a single column on mobile devices.' },
  { question: 'Is it SEO optimized?', answer: 'We use semantic HTML and support structured data for better search visibility.' }
];

export function TwoColumnFaq({ items = defaultItems }: { items?: FaqItem[] }) {
  return (
    <section aria-labelledby="faq-heading" className="mx-auto max-w-5xl">
      <h2 id="faq-heading" className="text-3xl font-semibold">
        Questions, answered
      </h2>
      <div className="mt-8 grid gap-8 md:grid-cols-2">
        {items.map((item) => (
          <article key={item.question}>
            <h3 className="font-medium">{item.question}</h3>
            <p className="mt-2 text-neutral-600">{item.answer}</p>
          </article>
        ))}
      </div>
    </section>
  );
}

READ_ONLY