Brand
convert.com

FAQ

A centered question-and-answer section, an eyebrow, a heading, and an Accordion of common questions.

Example

A composed FAQ: a centered .kicker eyebrow and heading, followed by an .accordion of common questions, the first one open by default.

FAQ

Questions, answered

Is there a free trial?
Yes, 15 days, no credit card required.
Do you support server-side testing?
Yes, the same targeting engine powers client- and server-side experiments.
How is my data handled?
First-party only, GDPR/CCPA ready, never shared.
Can I migrate from another tool?
Our team handles migration from most major platforms.

Composition

The FAQ centers an eyebrow and heading over a single Accordion:

  • Eyebrow, the .kicker label that frames the heading above the questions.
  • Accordion, the .accordion of <details> items, one question and answer each.

Usage

The FAQ collects the questions people actually ask before they commit. Keep it short and direct.

  • Group the 4-8 most common questions, don't turn it into a documentation dump.
  • Lead with the trial or pricing question, that's what most visitors look for first.
  • Keep answers to 1-2 sentences, link out for the full detail.
  • Leaving one item open by default is fine, it signals the section is interactive.

Code

Link accordion.css, set the section on a cream surface, center the eyebrow and heading, then list the questions as white <details> cards.

<link rel="stylesheet" href="/_shared/components/accordion.css">

<div class="faq" style="background:var(--color-surface-cream)">
  <div class="faq__header">
    <p class="kicker">FAQ</p>
    <h2>Questions, answered</h2>
  </div>

  <div class="accordion" style="border-top:none">
    <details class="accordion__item" open style="background:#fff;border:1px solid var(--color-border-cream);border-radius:var(--radius-md);padding:4px 20px;margin-bottom:12px">
      <summary>Is there a free trial?</summary>
      <div class="accordion__body">Yes, 15 days, no credit card required.</div>
    </details>
    <details class="accordion__item" style="background:#fff;border:1px solid var(--color-border-cream);border-radius:var(--radius-md);padding:4px 20px;margin-bottom:12px">
      <summary>Do you support server-side testing?</summary>
      <div class="accordion__body">Yes, the same targeting engine powers client- and server-side experiments.</div>
    </details>
  </div>
</div>