FAQ

Questions and answers as an accordion or a two-column list. Zero JS.

Last updated

Questions

The ones we hear most.

Do I need to install a package at runtime?

No. Components and sections are copied into your repository and build to plain HTML.

Can I change the brand colour?

Yes. Edit one file of hue inputs and rebuild the tokens; the contrast gate checks every pair.

Does it work without JavaScript?

Every section renders and works without JS; a few controls add small islands for convenience.

Is it accessible?

Every page in the docs passes an automated accessibility check in both themes, and the components follow the ARIA patterns.

Show code
<FAQ heading="Questions" items={[{ question, answer }, …]} />

Add

npx @ava-ui/apogee add faq

API

Prop Type Default Category Description
eyebrow, heading, description string — content Optional section header.
items { question, answer }[] — content Required.
label string English content Landmark name when there is no heading.
layout 'accordion' | 'two-column' 'accordion' layout The accordion opens one at a time.
align 'start' | 'center' 'start' layout Header alignment.
background, spacing, headingLevel, id layout As on every section.

Layouts

Two columns

Do I need to install a package at runtime?

No. Components and sections are copied into your repository and build to plain HTML.

Can I change the brand colour?

Yes. Edit one file of hue inputs and rebuild the tokens; the contrast gate checks every pair.

Does it work without JavaScript?

Every section renders and works without JS; a few controls add small islands for convenience.

Is it accessible?

Every page in the docs passes an automated accessibility check in both themes, and the components follow the ARIA patterns.

On a tint

Do I need to install a package at runtime?

No. Components and sections are copied into your repository and build to plain HTML.

Can I change the brand colour?

Yes. Edit one file of hue inputs and rebuild the tokens; the contrast gate checks every pair.

Does it work without JavaScript?

Every section renders and works without JS; a few controls add small islands for convenience.

Show code
<FAQ layout="two-column" items={…} />
<FAQ background="neutral-faded" align="center" items={…} />

Accessibility

  • The accordion is native details elements with a shared name, so keyboard and screen-reader support come from the browser; the two-column layout uses headings one level below the section heading.