Staaarter

FAQ With Contact Image

Centered header above a two-column FAQ: a portrait image with a contact prompt and CTA on the left, and an expandable plus/minus accordion of questions on the right.

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

npx shadcn add https://staaarter.com/r/faq-with-contact-image.json

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

Usage

The file also exports faq75Demo, 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 { Faq75, faq75Demo } from "@/components/blocks/faq/faq75";

export default function Page() {
  return <Faq75 {...faq75Demo} />;
}

Props

PropTypeDefaultDescription
badgestringnoneSmall eyebrow badge above the centered heading.
headingstringnoneCentered section heading.
descriptionstringnoneCentered supporting copy under the heading.
contactImageMediaSlotImagenonePortrait photo shown in the left column.
contactNamestringnoneName shown under the portrait.
contactRolestringnoneRole shown beside the contact name.
contactPromptstringnoneShort line inviting the visitor to reach out.
ctaLabelstring"Get in touch"Label on the contact CTA button.
ctaHrefstringnoneIf set, the CTA renders as a link to this path.
itemsFaq75Item[]noneOrdered list of questions and answers.
classNamestringnoneExtra classes for the outer section element.

Types

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

Behavior notes

  • "use client" because the right column is a real accordion: each question toggles its own answer's visibility in local state.
  • The open/closed state of each row is shown with an explicit Plus/Minus icon swap rather than a rotating chevron.
  • The portrait renders through MediaSlot and falls back to a decorative placeholder when no contactImage is supplied.
  • The contact CTA is inert: there is no real messaging backend wired up, it renders as a plain button or a Link-backed button depending on whether ctaHref is set.