Minimal React FAQ Accordion with a Two Line Headline

Pro

The plainest FAQ in the set and the most editorial: a small eyebrow, a headline broken over two lines, and a single column of questions separated by hairlines. No cards, no colour, no call to action.

FAQ Section With Split Headline Accordion block preview

An editorial accordion that stays out of the way

FAQ Section with Split Headline Accordion is a minimal React accordion: one 720px column of questions divided by 1px rules, under a heading you pass as exactly two lines. It has no cards, shadows or accent colour, so it inherits the feel of whatever page it sits on.

Restraint is the feature. On a documentation page, an editorial site or a premium product page, a FAQ dressed in rounded cards and glows can look like an advert. Hairline rows read like part of the article, and the large two line heading gives the section its weight without decoration.

The motion is quieter than the other FAQ blocks too. The answer panel grows over 400ms while the paragraph inside fades and slides down 8px a moment later, which makes opening a question feel like turning a page rather than popping a box.

The pieces of the minimal accordion

Eyebrow and two line heading

A muted eyebrow over an h2 built from a tuple of two strings, with a hard line break between them.

Hairline rows

Each question sits between 1px rules, with no background, at 16 to 17px medium weight.

Layered answer motion

Height animates over 0.4s on a soft ease, while the answer text fades and moves down 8px over 0.28s after a 50ms delay.

Second question open by default

Unlike the other FAQ blocks, this one opens the second item on load, so the reader sees a closed row above an open one and understands the pattern.

Thin plus that turns to a cross

A 14px plus drawn from two 1.5px bars rotates 45 degrees over the same 400ms curve as the panel, so the icon and the answer move as one.

When less design is the better FAQ

Use it when

The FAQ sits inside documentation, a blog post or a long editorial page.
Your brand is restrained and typographic, and cards would look out of place.
You want the FAQ to share the page's width and rhythm instead of standing apart as a feature block.
Answers are prose, a few sentences long, and benefit from a 52 character measure.

Skip it when

You need a contact or booking step inside the section.
The page is visually busy and needs the FAQ to stand out from it.
Your heading does not split naturally into two short lines.
Visitors scan for a contact route first. With no button in the section, add one directly underneath.

Write a two line heading and plain answers

headlineLines takes exactly two strings, so decide where the break falls; the defaults read "Hours, trays," and "and paper stock" for a darkroom. Keep each line short, since the heading is set at up to 48px.

The items are the usual id, question and answer. The sample questions belong to a photo darkroom, so replace them all. If you would rather open the first question, pass its id as defaultOpenId.

Because there is no colour in the block, it takes its character from your type. Set the page font before judging it; the same rows look clinical in a system font and considered in a good serif or grotesque.

npx wensity@latest add faq-section-with-split-headline-accordion --type block

page.tsx

import { SplitHeadlineAccordionFaq } from "@/components/wensity/blocks/faq-section-with-split-headline-accordion";

export function DocsFaq() {
  return (
    <SplitHeadlineAccordionFaq
      eyebrow="Self hosting"
      headlineLines={["Running it yourself,", "the common questions"]}
      defaultOpenId="ports"
      items={[
        { id: "ports", question: "Which ports need to be open?", answer: "443 for the dashboard and 5432 if Postgres runs on another host." },
        { id: "backups", question: "How are backups handled?", answer: "Nightly snapshots to your own bucket, kept for 14 days by default." },
      ]}
    />
  );
}

Props

Prop	Type	Default	Description
`eyebrow`	string	"The darkroom"	The muted label above the heading, a good place for the topic or product name.
`headlineLines`	[string, string]	["Hours, trays,", "and paper stock"]	The heading as two lines, joined by a hard break.
`items`	{ id; question; answer }[]	6 darkroom questions	Your questions and answers, separated by hairlines.
`defaultOpenId`	string	second item	Which question starts open. Defaults to the second one on purpose.
`className`	string	-	Extra classes on the section, for example to remove the vertical padding inside docs.

Weight, motion and markup

Lightest of the FAQ set

About 200 lines with no images, gradients or icons beyond a drawn plus, so it adds very little to a page.

Two stage animation, both optional

The panel height and the text slide are separate animations, and both drop to zero duration when reduced motion is requested.

Collapsed means absent

Questions are always in the HTML, but answers only exist while open. For answers that should be indexed, mirror them in a static page or structured data.

Comfortable reading measure

Answers are capped at 52 characters a line at 14 to 15px, close to the range typographers recommend for body text, so even a long answer stays easy to follow.

Block details

FAQ Section With Split Headline Accordion

Category: FAQ Sections
Renders: JavaScript animation. Paints first, then animates
Theme: Follows the site theme in light and dark
Dependencies: clsxframer-motiontailwind-merge
Source: 199 lines, 7 KB in one file
Install: wensity add faq-section-with-split-headline-accordion --type block
Tags: light, dark, faq, accordion
Last updated: October 13, 2026