FAQ pages
Whole help pages: a header with search or buttons, questions in a grid or an accordion, then more ways to get help, between a header and a footer.
Last updated
Each example is a whole help page stacked from blocks: a header navigation, a page header from Header sections (often with a search field) that holds the page’s h1, questions from FAQ sections, then a call to action, the team or a newsletter signup before the footer. Accordion questions are native disclosures and work without JS. Adding a page copies its blocks too. The page renders its own header, <main> and footer, so give it a layout without a <main>.
npx @ava-ui/apogee add faq/faq-page-01---
// src/pages/faq.astro
import Layout from '../layouts/Layout.astro'
import Page from '../components/apogee/pages/faq/FaqPage01.astro'
---
<Layout title="Faq">
<Page />
</Layout>
FAQ page 01A centred heading, line and search field. Then questions in a grid, a call to action with a screenshot and a footer.
FAQ page 02A centred heading, line and search field. Then questions in a grid on grey, the team, a newsletter signup on grey, customer quotes and a footer on dark.
FAQ page 03A split heading, line and two buttons on grey. Then questions in a grid, features beside a photo, a call to action on grey and a footer.
FAQ page 04A centred eyebrow, heading and line. Then questions in a grid, a content section, customer quotes and a footer.
FAQ page 05A centred heading, line and two buttons. Then questions in an accordion, integrations, a newsletter signup on grey and a footer.
FAQ page 06A centred heading, line and search field on dark. Then questions in an accordion, a call to action card, a call to action with images, a newsletter signup and a footer.
FAQ page 07A left-aligned eyebrow, heading and line. Then questions in an accordion, a newsletter signup on the brand colour, a content section and a footer.
FAQ page 08A split heading, line and search field on the brand colour. Then questions in an accordion, a call to action card on the brand colour, features beside a photo and a footer on the brand colour.
FAQ page 09A centred heading, line and search field on grey. Then questions in a grid, a call to action with a screenshot and a footer on grey.
FAQ page 10A centred heading, line and search field. Then questions in an accordion, a content section, a call to action with a photo and a footer on grey.