FAQ sections

Frequently asked questions; in a grid with or without icons, beside a photo, or in an accordion of plain rows or cards, on the page or the brand colour.

Last updated

Each example is a block: a heading over the questions, laid out as a grid of answers or as an Accordion that opens one at a time, with a panel to get in touch.

npx @ava-ui/apogee add faq/simple-01

Copy is props

Every block in this family takes the same content props (FAQContent in sections/_shared/faq.ts), with its sample copy as the defaults. A block ignores the props it has no place for, so you can swap one block for another and keep the copy. The FAQ section takes the same names for the props they share.

  • eyebrow: The small label above the heading.

  • heading: The heading.

  • description: Where a block links its description, asterisks mark the link text, which points at primaryAction.href.

  • label: Landmark name when there is no heading.

  • items: Questions.

  • primaryAction: The contact button (and the description link’s target).

  • Pass null to hide an optional part, such as description={null}.

  • Some blocks add props of their own; the top of each block’s file lists them.

Simple 01A centred heading over six questions with icons, and a panel to get in touch.
Simple 02A heading with a chat link over six questions with icons, and a panel to get in touch.
Simple 03A heading with a chat link over four questions with icons beside a photo.
Simple 04A heading with a chat link over six questions without icons, and a panel to get in touch.
Accordion 01A centred heading over six questions that open one at a time, and a panel to get in touch.
Accordion 02A centred heading over six question cards that open one at a time.
Accordion 03A heading with a chat link beside six questions that open one at a time.
Accordion 04A heading with a chat link beside six question cards that open one at a time.
Simple 01 brandA centred heading over six questions with icons, and a panel to get in touch, on the brand colour.
Simple 02 brandA heading with a chat link over six questions with icons, and a panel to get in touch, on the brand colour.
Simple 03 brandA heading with a chat link over four questions with icons beside a photo, on the brand colour.
Simple 04 brandA heading with a chat link over six questions without icons, and a panel to get in touch, on the brand colour.
Accordion 01 brandA centred heading over six questions that open one at a time, and a panel to get in touch, on the brand colour.
Accordion 02 brandA centred heading over six question cards that open one at a time, on the brand colour.
Accordion 03 brandA heading with a chat link beside six questions that open one at a time, on the brand colour.
Accordion 04 brandA heading with a chat link beside six question cards that open one at a time, on the brand colour.

Related

AccordionA stack of collapsible disclosure panels; expand one to read it, collapse it to reclaim space.
Featured iconAn icon in a tinted tile, the glyph that leads an empty state, an alert, a stat or a feature card.
AvatarGroupOverlapping avatars for a compact "who's involved" cluster, with an optional +N overflow chip.