Skip to content
Uxelith
Sign in
Prov1.0.0Marketing blocks

FAQ Section

Frequently asked questions: a large heading, an animated accordion, an optional search that narrows and highlights answers, a contact card and FAQPage structured data.

Installs with Uxelith ProHow
Customise in StudioPricing
Licence
Pro
Packages
2
Updated
10 Oct 2026
Live

Installation

Usage

example.tsx
import { FaqSection } from "@/components/faq-section"

export default function Page() {
  return <FaqSection />
}

Props

PropTypeDefaultDescription
title / subtitlestring"Questions, answered" / …Heading and intro.
faqs{ question: string; answer: string }[]5 examplesThe questions, in order.
contact{ text; label; href } | nullContact us → /contactA way out for unanswered questions; null hides it.
layout"split" | "centered""split"Heading beside the questions, or above them.
headingLevel1 | 22Section heading level; questions are one below.
structuredDatabooleantrueAdd schema.org FAQPage JSON-LD. Google retired FAQ rich results in 2026; other search engines and AI assistants may still read it.
searchablebooleanfrom 7 questionsA search box that narrows and highlights questions.
eyebrowstring"FAQ"Small label above the heading.

Accessibility

  • A labelled section; each question is a real heading one level below the section's.
  • Answers open in an accessible accordion (aria-expanded, regions, arrow keys).
  • The FAQPage data holds plain text and is escaped, so an answer can never inject markup.
  • The search box is labelled and the number of matches is announced; with no match, the contact link is offered.

Changelog

  1. v1.0.0Latest

    First release.

More in Marketing blocks

All 8 in Marketing blocks
  • Marketing blocksPro

    Bento Feature Grid

    A features section as a bento grid: five tiles with live CSS illustrations (motion curves, a theme cycling, frameworks, a typing terminal, a focus ring stepping with Tab), a shared spotlight and scroll-driven entrances.

  • Marketing blocksFree

    Hero Section

    A landing-page hero: a large headline that comes into focus, a magnetic call to action, customer marks and a live product shot with a self-drawing chart, a visiting cursor and floating cards.

  • Marketing blocksPro

    Pricing Section

    A monthly/yearly switch with the saving shown, three plans whose prices roll to their new value (the monthly price struck through on yearly), a full comparison table and a no-script FAQ.