How do I add the FAQ block to a Hugo site?

Add a "block: faq" entry to the sections list in your page's front matter, then fill in the content fields. HugoBlox renders it automatically — copy the example config above as a starting point.

Is the FAQ block free to use?

Yes. Every HugoBlox block is free and open-source under the MIT license — use it in personal and commercial projects, with no attribution required.

Can I customize the FAQ block?

Yes. It exposes 12 content options, plus 4 design options, and inherits the shared block settings for background, spacing, and colors. You can also describe the changes you want to Hugo Chat AI and it will edit the config for you.

Does the FAQ block work with any Hugo theme?

The block ships in the open-source HugoBlox kit. Add the kit to any Hugo site and the block becomes available in your page sections — there is no theme lock-in.

hugoblox.com/blocks/faq

FeaturesFree · MITPreact · interactive

FAQ block

Answer last-minute objections in a clean accordion — place it before the final CTA where it lifts conversion.

Customize with AI View source

Add it to any Hugo page's sections list — no build step.

v2.0.0Version

12Options

MITLicense

Quick start

Add the FAQ block

Drop this into your page's front matter, under the sections list. Edit the values, and HugoBlox renders the block — no build step.

Add to your page's sections

- block: faq
  content:
    title: Frequently asked questions
    subtitle: Fast answers for new users
    text: If you do not see your question, open an issue or reach out.
    items:
      - question: How do I enable Pagefind?
        answer: Add `pagefind = true` to your config and run `pnpm build`.
      - question: Can I customize Tailwind tokens?
        answer: Yes. Edit the design tokens in `modules/blox-tailwind/assets/` and run `pnpm format`.
    button:
      text: View full knowledge base
      url: /faq/
      icon: hero/arrow-right
  design:
    spacing:
      padding:
        - 2.5rem
        - "0"
        - 2.5rem
        - "0"

Overview

About the FAQ block

Display frequently asked questions in an interactive accordion format with automatic FAQPage structured data for SEO.

Features

✅ Interactive accordion with Alpine.js
✅ FAQPage Schema.org structured data for Google rich results
✅ Responsive design with Tailwind CSS
✅ Dark mode support
✅ Markdown support in answers

Usage

Add to your page's front matter:

sections:
  - block: faq
    content:
      title: Frequently Asked Questions
      subtitle: Find answers to common questions
      text: Can't find what you're looking for? [Contact us](/contact)
      items:
        - question: What is HugoBlox Kit?
          answer: HugoBlox Kit is a no-code website builder framework powered by Hugo and Tailwind CSS.
        
        - question: Is it free to use?
          answer: Yes! HugoBlox Kit is open source and free to use under the MIT license.
        
        - question: How do I get started?
          answer: |
            Getting started is easy:
            1. Choose a template
            2. Click "Use Template"
            3. Customize your content
            4. Deploy to GitHub Pages or Netlify
      
      button:
        text: View All FAQs
        url: /faq/
        icon: arrow-right
    design:
      spacing:
        padding: ["6rem", "0", "6rem", "0"]

Structured Data

This block automatically generates FAQPage structured data for better SEO and eligibility for Google's FAQ rich results.

Customization

Accordion behavior: One item open at a time (default)
Colors: Automatically adapts to your theme
Spacing: Customizable via design.spacing
Background: Customizable via design.background.color

Reference

Configuration

Every option the FAQ block accepts, generated from its schema.

Content options

Properties set under the block's content key.

Property	Type	Default	Description
`title`	`string`	—	Block title
`subtitle`	`string`	—	Block subtitle
`text`	`string`	—	Introductory text (Markdown supported)
`items`required	`object[]`	—	FAQ items
`items[].question`	`string`	—	The question
`items[].title`	`string`	—	Alias for question
`items[].answer`	`string`	—	The answer (Markdown supported)
`items[].text`	`string`	—	Alias for answer
`button`	`object`	—	Call-to-action button
`button.text`required	`string`	—	Button text
`button.url`required	`string`	—	Button URL
`button.icon`	`string`	—	Button icon name

Design options

Properties set under the block's design key — shared background, spacing, and color settings apply on top.

Property	Type	Default	Description
`spacing`	`object`	—	—
`spacing.padding`	`string[]`	20px,0,20px,0	Padding [top, right, bottom, left]
`spacing.padding_sm`	`string[]`	3rem,0	Responsive padding for smaller screens [top, bottom]
`spacing.margin`	`string[]`	0,0,0,0	Margin [top, right, bottom, left]

Compose

Works well with

Blocks that pair naturally with FAQ on the same page.

Contact Info CTA Card

Frequently asked

FAQ block FAQ

Add a "block: faq" entry to the sections list in your page's front matter, then fill in the content fields. HugoBlox renders it automatically — copy the example config above as a starting point.

Ready to build with the FAQ block?

Customize with AI View source