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.
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.jsonPrefer 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
| Prop | Type | Default | Description |
|---|---|---|---|
| badge | string | none | Small eyebrow badge above the centered heading. |
| heading | string | none | Centered section heading. |
| description | string | none | Centered supporting copy under the heading. |
| contactImage | MediaSlotImage | none | Portrait photo shown in the left column. |
| contactName | string | none | Name shown under the portrait. |
| contactRole | string | none | Role shown beside the contact name. |
| contactPrompt | string | none | Short line inviting the visitor to reach out. |
| ctaLabel | string | "Get in touch" | Label on the contact CTA button. |
| ctaHref | string | none | If set, the CTA renders as a link to this path. |
| items | Faq75Item[] | none | Ordered list of questions and answers. |
| className | string | none | Extra 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.
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.