FAQ System

RailsFast UI - FAQ Frequently Asked Questions component

The Frequently Asked Questions section is arguably one of the highest-converting sections of any website, and even more important than the question and the answers themselves is whether the questions can be linked to uniquely and individually as "sub-pages".

The FAQ component in RailsFast does this: not only it allows any arbitrary content in your answers, but it also provide you with unique links to each question, to help LLMs and search engines understand your website and product better, and to help users share specific questions with one unique link.

It's almost as if with RailsFast you have FAQ questions automatically mounted as independent blog posts searchable by Google.

The FAQ component renders a beautiful accordion, and auto-generates unique, shareable links per question (great for SEO, LLMs, and support).

Use it like:

<%= render "components/railsfast/marketing/faq",
  title: "Frequently Asked Questions",
  subtitle: "Everything you need to know before getting started.",
  theme: "light" %>

The component draws all questions from config/faqs.yml (via Rails.configuration.x.faq[:faqs]).

Linking / stable URLs:

Each question gets an id="faq-..." so it can be linked as #faq-your-question-slug.
If you rely on stable links, set an explicit id per FAQ item so you can safely edit the question text later.

Example config:

development:
  faqs:
    - id: pricing
      question: "Do you have a free trial?"
      answer: |
        <p>Yes — you can try it for 14 days.</p>

If you don’t set id, the anchor is derived from the question text. Since each question gets its unique link based on the question text, do not change the question text or it'll break the link.

Parameters:

items: array of FAQ items (optional; overrides config)
ids: only include specific FAQ IDs (optional)
limit: max number of items to show (optional)
title: section heading (optional)
subtitle: section subheading (optional)
section_id: HTML id for the whole section (default: "faq")
multiple_open: allow multiple items to be open at once (default: true)
padding: section padding classes (default: "py-12 sm:py-16")
theme: light (default) or dark

Style overrides (override theme defaults):

item_bg, item_border, item_shadow, item_rounded, item_hover
question_text, answer_text, icon_color
item_gap