React FAQ Section with Numbered Questions and a Support Card

Pro

Numbered questions on the right that flip to a dark card when opened, and a blue support card on the left with a stack of team avatars. It reads like documentation, which is exactly what a billing or API FAQ should feel like.

FAQ Section With Numbered Support Card block preview

Numbered answers for questions people come back to

FAQ Section with Numbered Support Card is a React FAQ section where every question carries a number and the open one turns into a high contrast inverted card. In light mode the open row goes near black with white text; in dark mode it goes white with dark text, so the answer you are reading is always the brightest or darkest thing on the screen.

Numbers do a job here. When a support agent can say "see question 4", or a customer can tell a colleague the same, the FAQ becomes a reference instead of a pile of disclosures. That is why the defaults are written for usage based billing: metering, invoice timing, who can see raw events. Questions in that domain get revisited and quoted.

On the left, a gradient blue card shows three overlapping team avatars and a small pill, then a title, a line of copy and a pill shaped button. It tells the reader a named person is on the other end of the help link.

What the numbered FAQ is built from

Numbered rows

The number is a field on each item, rendered before the question as "4. Question". You choose the numbering, so you can keep a question's number stable even after reordering.

Inverted open state

The open row swaps background and text colour and gains a deeper shadow. The plus collapses its vertical bar to become a minus.

Support card

A blue linear gradient card with three 36px avatars overlapping by 10px, a white pill such as "+ Seat", a bold title, one sentence and a dark pill button.

Sticky intro column

The heading, description and support card stay pinned on large screens while the list of questions moves.

When numbered questions help more than plain ones

Use it when

Your FAQ covers billing, limits, permissions or API behaviour, where people link to and quote specific answers.
Support will reference questions by number in replies and help docs.
You want a support handoff that feels staffed by people, not a contact form.
The answers are factual and short enough to read in a single open card.

Skip it when

The questions are casual pre sales objections. Numbers make them feel like terms and conditions.
The list will keep growing past ten items. Long numbered lists belong in a help centre with search.
You do not have three real team photos for the avatar stack.
Blue is not part of your palette and you do not want to edit the gradient constant.

Write the questions, numbers and support handoff

Each item takes an id, a number string, a question and an answer. Because the number is yours, you can number by topic, skip numbers, or keep historic numbers stable. Replace the seven sample billing questions completely, since they describe a fictional metering product.

The support card reads from cta, which holds the title, body, button label, link and the youLabel pill text, and from avatars, a tuple of exactly three image URLs. The avatars render with empty alt text because the names are not in the design; if your team photos matter to the message, say so in the card body instead.

npx wensity@latest add faq-section-with-numbered-support-card --type block

page.tsx

import { NumberedSupportCardFaq } from "@/components/wensity/blocks/faq-section-with-numbered-support-card";

export function BillingFaq() {
  return (
    <NumberedSupportCardFaq
      headline="Billing, answered"
      description="How usage is metered and when invoices close."
      items={[
        { id: "period", number: "1", question: "When does my billing period end?", answer: "On the same calendar day each month, at 00:00 UTC." },
        { id: "overage", number: "2", question: "What happens if I go over my limit?", answer: "Requests keep working and the overage is billed at your plan's unit price." },
      ]}
      avatars={["/team/a.webp", "/team/b.webp", "/team/c.webp"]}
      cta={{ title: "Still stuck?", body: "Our billing team replies within a working day.", buttonLabel: "Email billing", href: "mailto:billing@example.com", youLabel: "+ You" }}
    />
  );
}

Props

Prop	Type	Default	Description
`headline`	string	"Frequently asked questions"	The h2 above the support card.
`description`	string	-	One line under the heading that says what the questions cover.
`items`	{ id; number; question; answer }[]	7 billing questions	Your numbered questions. The number is printed exactly as you pass it.
`cta`	{ title; body; buttonLabel; href; youLabel }	Talk to billing	The blue card's copy and link. youLabel is the white pill that ends the avatar stack.
`avatars`	[string, string, string]	3 sample photos	Exactly three image URLs for the overlapping avatar row.
`defaultOpenId`	string	first item	The question that starts open.
`className`	string	-	Classes on the section. Handy for removing the sticky offset when a fixed header is taller than 64px.

Contrast, motion and crawlability

High contrast open state

The inverted row gives the open answer white on near black, or the reverse in dark mode, which keeps the text readable without relying on a coloured highlight.

Motion that can switch off

The height and opacity animation is skipped entirely when the visitor has reduced motion turned on.

Answers mount on demand

A closed answer is not in the markup, so crawlers read the one open answer. Keep a full text version of the FAQ somewhere indexable if these answers need to rank.

Decorative avatars

The three avatar images have empty alt attributes and are skipped by screen readers, which is right when they are decoration and wrong if they identify people.

Block details

FAQ Section With Numbered Support Card

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