Staaarter

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.

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

npx shadcn add https://staaarter.com/r/with-cta-card.json

Prefer 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

PropTypeDefaultDescription
headingstring"Frequently asked questions"Section heading.
descriptionstringundefinedOptional supporting copy under the heading.
itemsFaq14Item[]noneOrdered list of question and answer entries in the accordion.
ctaHeadingstring"Still have questions?"Heading inside the CTA card.
ctaDescriptionstring"Our support team typically replies within a few hours."One-line supporting copy inside the CTA card.
ctaButtonLabelstring"Get in touch"Label for the CTA card's button.
classNamestringnoneExtra 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.