ComponentsSite blocks

FAQ

Questions and answers — parking, cancellation, payment — and long-tail search content. Zero JS: native <details name> makes an exclusive accordion, ::details-content animates the height where supported, and closed answers stay findable with in-page search. The renderer emits FAQPage JSON-LD.

Native details / summary blocks/site/faq.tsx, blocks/site/registry-1.ts, styles/blocks.csstheme · material · accent · density · font

Visiting

Before you book

Can’t find your question?Message us on WhatsApp (opens in a new tab)

Is there parking?

Yes — the Piazza garage, level −2. Show your receipt at the exit for three hours free.

Can I cancel or move a booking?

Free until 24 hours before. After that we keep the ₺500 deposit per person, or move it to another date within a month.

Do you cater for allergies and vegetarians?

Tell us when you book. Every dish on the menu lists its 14 allergens, and two-thirds of the meze are vegetarian.

Can we bring a cake?

Of course. We’ll keep it cold and bring it out with candles; there’s no plating charge.

Do you take card and Troy?

Visa, Mastercard, Amex and Troy. We don’t accept cheques or meal cards.

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { Faq, faqJsonLd } from "@vamos-ui/react/blocks";

<Faq
  title="Before you *book*"
  items={[{ q: "Is there parking?", a: "Yes — the Piazza garage, level −2." }]}
  contact={{ link: { href: "https://wa.me/905321234567", label: "Message us", newTab: true }, style: "link" }}
/>

Examples

Stacked, several open (SaaS billing)

Answers are RichDoc with links and lists; exclusive={false} drops the details name.

Billing questions

Ledgerly bills per workspace, monthly or yearly. Prices exclude VAT.

What happens when the trial ends?

Nothing is charged automatically. Pick a plan within 14 days or the workspace becomes read-only — your conversations stay.

Can I pay by bank transfer?

Yes, on yearly plans. We send an e-Arşiv invoice; transfer within 7 days to:

Garanti BBVA, Kadıköy branch
Reference: your workspace id

How do refunds work?

Unused months of a yearly plan are refunded pro rata. See the terms.

Columns (clinic)

No accordion: a two-column definition list, every answer visible.

Good to know

Can’t find your question?Ask us anything

How long is a session?: Laser sessions take 20–45 minutes depending on the area.
How many sessions will I need?: Six to eight, four to six weeks apart.
Does it hurt?: It feels like a rubber band snap. We cool the skin throughout.
Can I go in the sun after?: Avoid direct sun for two weeks and use SPF 50.

API

Faq

Prop	Type	Default
`variant` Layout (see examples).	`"split" \| "stacked" \| "columns"`	`"split"`
`items` 1–30 questions. id defaults to faq-<slug of q> (Turkish-aware), so #faq-is-there-parking deep-links.	`{ q: string; a: RichDoc \| string; id? }[]`	`—`
`eyebrow / title / lead` Section header.	`ReactNode`	`—`
`exclusive` One answer open at a time (details name).	`boolean`	`true`
`openFirst` Open the first answer.	`boolean`	`false`
`contact` “Can’t find your question?” link under the title.	`SiteCta`	`—`
`deepLink` A 200-byte inline script that opens the item matching location.hash.	`boolean`	`true`
`theme / anchor / id / className / labels / locale / components / editMode / headingLevel` Questions are one heading level below the title.	`BlockBaseProps`	`—`

faqJsonLd(items)

Prop	Type	Default
`returns` A FAQPage node with Question / Answer pairs (answers as plain text).	`object`	`—`

Export

Feature grid