BlocksStable

FAQ

Sourcecomponents/blocks/FaqBlock.astro

Split layout

A full FAQ section — an Accordion of Q&As with an Eyebrow + heading. The default split puts the heading on the left, the questions on the right — collapsing to one column below 900px.

Switch viewport — the block renders at each breakpoint's true size, scaled to fit.

Split layout

Stacked layout

layout="stacked" centres the heading above the list — good for a narrower column.

Stacked layout

Centered layout

layout="centered" centres the heading above, then splits the questions into two columns of accordions — best for a longer list of FAQs. The items are balanced across the columns automatically.

Centered — two columns

On dark

surface="dark" flips the whole block — and the Accordion inside it — to the dark treatment.

FAQ

Common questions

How long does a brand project take?

Most projects run four to eight weeks end to end, depending on scope. We agree the timeline up front and keep you in the loop at every step.

Do you build the website too?

Yes — strategy, identity and the site are one flow. You get a brand and a running website, not a handoff.

What do I need to bring?

A sense of where you want to go. We handle the rest, from research to the finished system.

Can we start small?

Absolutely. We can begin with strategy or a single deliverable and grow from there.

Built from

Accordion — the expandable Q&A rows (surface flows through)
Eyebrow — the small label above the heading
Link — the optional "still have questions?" CTA

Props

Prop	Type	Default	Notes
`heading`	string	`—`	Section heading (supports <em> for a serif accent). Required.
`items`	{ title, body, open? }[]	`—`	The Q&A rows. Required.
`eyebrow`	string	`'FAQ'`	Small label above the heading.
`lead`	string	`—`	Supporting line under the heading.
`layout`	'stacked' \| 'split' \| 'centered'	`'split'`	Heading above (one column), heading left / list right, or heading centred above two columns.
`surface`	'light' \| 'dark'	`'light'`	Flows through to the Accordion.
`single`	boolean	`false`	Only one row open at a time.
`ctaLabel`	string	`—`	Optional "still have questions?" link.
`ctaHref`	string	`'#'`	CTA destination.

Usage

Pass your questions as items. Wrap an accent word in <em> for the serif twist.

<FaqBlock
  eyebrow="FAQ"
  heading="Questions, <em>answered</em>"
  layout="split"
  items={[
    { title: 'How long does it take?', body: 'Four to eight weeks.' },
    { title: 'Do you build the site?', body: 'Yes — it’s one flow.' },
  ]}
  ctaLabel="Still have questions?"
  ctaHref="/contact"
/>

Rules

Write real questions people actually ask — in their words.

Use single for long lists so only one answer shows at a time.

Don't

Bury key info here — an FAQ is for secondary detail.

Let answers run long — link out for the full story.