With CTA Card
A single-column accordion of questions and answers, followed by a muted call-to-action card with a heading, one line of supporting copy, and a button prompting readers who still have questions to get in touch.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/with-cta-card.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/faq/faq14.tsx instead.
Usage
The file also exports faq14Demo, 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 { Faq14, faq14Demo } from "@/components/blocks/faq/faq14"; export default function Page() { return <Faq14 {...faq14Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | string | "Frequently asked questions" | Section heading. |
| description | string | undefined | Optional supporting copy under the heading. |
| items | Faq14Item[] | none | Ordered list of question and answer entries in the accordion. |
| ctaHeading | string | "Still have questions?" | Heading inside the CTA card. |
| ctaDescription | string | "Our support team typically replies within a few hours." | One-line supporting copy inside the CTA card. |
| ctaButtonLabel | string | "Get in touch" | Label for the CTA card's button. |
| className | string | none | Extra classes for the outer section element. |
Types
type Faq14Item = { question: string; answer: string };
Behavior notes
- Real interactivity: the accordion above the CTA card is a genuine single-open-at-a-time accordion with aria-expanded/aria-controls buttons; the first item is open by default.
- The CTA card's button is decorative in this block, it has no href or onClick wired up since the destination is left to the consuming page.
- The CTA card uses a muted background (bg-muted/40) and rounded corners to visually separate it from the plain-list accordion above it.
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.