Quote Style Cards

A grid of FAQ cards styled like editorial pull-quotes: each question is set in a large heading-font statement, with a large, faint Quote icon anchored in the top-right corner as a decorative flourish. The answer follows underneath in regular body copy.

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 badge dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/quote-style-cards.json

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

Usage

The file also exports faq32Demo, 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 { Faq32, faq32Demo } from "@/components/blocks/faq/faq32";

export default function Page() {
  return <Faq32 {...faq32Demo} />;
}

Props

Prop	Type	Default	Description
badge	string	"FAQ"	Small label shown above the heading.
heading	string	"Questions worth asking"	Section heading.
description	string	"The things prospective customers ask us most."	Supporting copy under the heading.
items	{ question: string; answer: string }[]	none	FAQ cards.
className	string	none	Extra classes for the outer section element.

Behavior notes

Fully static: the Quote icon in each card's corner is purely decorative (aria-hidden), there is no accordion state, every answer is always visible, which is why this is a safe server component.

More FAQ Blocks

View all →

collapsible-accordion

Collapsible Accordion

Stacked cards with expandable sections, for full-length answers in a compact format.

open-list-layout

Open List Layout

Questions with answers displayed directly below in a simple always-open list.

three-column-grid

Three Column Grid

Q&A pairs arranged in a responsive grid layout, always open.

tabbed-categories

Tabbed Categories

Sidebar navigation with category tabs and an accordion of that category's questions.

searchable-accordion

Searchable Accordion

Search input that filters accordion items in real-time by question and answer text.

grouped-sections

Grouped Sections

FAQs organized into titled sections, each with its own independent accordion below it.