Staaarter

Two Column Q&A

A row-based layout with a question column and a wider answer column side by side per row, separated by hairline dividers. Every answer is always visible, well suited for a balanced, side-by-side presentation.

By Staaarter Team
FAQ
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/two-column-qa.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/faq/faq17.tsx instead.

Usage

The file also exports faq17Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Faq17, faq17Demo } from "@/components/blocks/faq/faq17";

export default function Page() {
  return <Faq17 {...faq17Demo} />;
}

Props

PropTypeDefaultDescription
headingstring"Frequently asked questions"Section heading.
descriptionstring"Questions on the left, straight answers on the right."Supporting copy under the heading.
itemsFaqItem[]noneQuestion and answer pairs, one per row.
classNamestringnoneExtra classes for the outer section element.

Types

interface FaqItem {
  question: string;
  answer: string;
}

Behavior notes

  • Always-open, static layout, there's no accordion toggle, both columns render for every row at once.
  • The two-column grid (`grid-cols-[1fr_2fr]`) only applies at the `sm` breakpoint and up, rows stack into a single column on mobile.
  • Rows are separated by a `divide-y` hairline border rather than individual card borders.