FAQ

Organize frequently asked questions

Use the FAQ component to organize frequently asked questions and answers in a clear, accessible format, enhancing user experience by addressing common inquiries. You can set your FAQ items using the Accordion component, set a heading for the section, and pass any element to display it under the heading:

---
const accordionItems = [{
    title: 'Do you offer support?',
    content: 'We provide 30 days of support.'
}, {
    title: 'Can I request changes?',
    content: 'Yes!'
}, {
    title: 'Are there any refunds?',
    content: 'Hopefully.'
}]
---

<FAQ items={accordionItems}>
    <span class="muted">Looking for a specific page? Find them below:</span>

    <Tiles items={[
        { icon: 'github', label: 'GitHub', href: '' },
        { icon: 'file', label: 'Documentation', href: '' }
    ]} columns={1} />
</FAQ>

The FAQ block uses the Accordion component internally. To set the FAQ items, pass an items prop to the FAQ component with the same structure as Accordion items.

See the documentation of the Accordion component to learn more about how to use it with and without this block.

You can pass additional elements as the children to the component to render extra content next to your FAQ items. In the above example, the Tiles block was used as the children. To read more about the Tiles block, visit its documentation page. To set the title of the block, use the title prop:

<FAQ
    items={[ ... ]}
    title="FAQ"

    {/* Accordion-specific props: */}
    icon="plus"
    reverse={true}
>
    <span class="muted">Addition text set as the children</span>
</FAQ>

Customize HTML

By default, the title will be set using an h2 element. To change this, specify the titleTag prop. The entire block is rendered into a section element. This can also be customized using the element prop:

<FAQ
    items={[ ... ]}
    title="FAQ"
    titleTag="h3"
    element="article"
/>

API

type FAQProps = {
    element?: string
    title?: string
    titleTag?: string
    items: {
        title: string
        content: string
        reverse?: boolean
    }[]
    icon?: 'plus' | 'none'
    reverse?: boolean
    className?: string
}