An FAQ answers the questions people ask before they decide, in the place they are deciding. It is an accordion: native <details> rows, so every answer is in the page for search engines and for find-in-page, and no script is needed to open one.
FAQ
<section class="container-inline px-lg py-4xl" aria-labelledby="faq-title"> <div class="flex flex-col gap-xl max-w(720) mx-auto"> <header class="flex flex-col gap-sm"> <p class="eyebrow">Questions</p> <h2 class="heading heading-2xl" id="faq-title">Before you decide</h2> </header> <div class="accordion"> <details class="accordion-item" name="faq" open> <summary class="accordion-trigger">Is there a free plan?</summary> <div class="accordion-content">Yes. Hobby is free for as long as you like, with one project and previews for every branch. It does not ask for a card.</div> </details> <details class="accordion-item" name="faq"> <summary class="accordion-trigger">What counts as a member?</summary> <div class="accordion-content">Anyone who can deploy. People who only view previews or leave comments are free on every plan.</div> </details> <details class="accordion-item" name="faq"> <summary class="accordion-trigger">Can I use my own domain?</summary> <div class="accordion-content">On every plan. Point the domain at Atlas, and the certificate is issued and renewed for you.</div> </details> <details class="accordion-item" name="faq"> <summary class="accordion-trigger">What happens if I go over my plan?</summary> <div class="accordion-content">Nothing breaks. We email you at 80% and at 100%, and your sites stay up while you decide.</div> </details> <details class="accordion-item" name="faq"> <summary class="accordion-trigger">Do you offer discounts?</summary> <div class="accordion-content">Students, open source projects and non-profits get Pro for free. Write to us from the address of your organization.</div> </details> <details class="accordion-item" name="faq"> <summary class="accordion-trigger">How do I cancel?</summary> <div class="accordion-content">From the billing page, in two clicks. You keep what you paid for until the end of the period.</div> </details> </div> <p class="m(0) fg-text-muted">Something else? <a class="link" href="#">Write to us</a>, and a person answers.</p> </div></section>Blocks are markup to copy. They take the page's own text color and size; the previews set fg-text-body text-sm on the body. Each block is a size container, so it reflows by its own width.
#What is in it
- A reading measure.
max-w(720) mx-auto: questions and answers are prose, and prose wants a column. - One open at a time. The rows share a
name, which makes the browser close one when another opens. Leave thenameout to let several stay open. - The first is open. It shows the pattern, and its answer is usually the one most people came for.
- A way out. One line under the list for the question that is not there.
Write the question the way a visitor would ask it, and answer in the first sentence. An answer that starts with "Great question" has not started.
#Beside its heading
From 56rem of block the heading takes one column of three and the questions two. On a wide page this keeps the lines of the answers short.
Beside its heading
<section class="container-inline px-lg py-4xl" aria-labelledby="faq-split-title"> <div class="grid gap-xl max-w(1040) mx-auto grid-cols(3)@container(--4xl)"> <header class="flex flex-col gap-sm"> <p class="eyebrow">Questions</p> <h2 class="heading heading-2xl" id="faq-split-title">Before you decide</h2> <p class="m(0) leading-md">Something else? <a class="link" href="#">Write to us</a>, and a person answers.</p> </header> <div class="grid-col-span(2)@container(--4xl)"> <div class="accordion"> <details class="accordion-item" name="faq-split" open> <summary class="accordion-trigger">Is there a free plan?</summary> <div class="accordion-content">Yes. Hobby is free for as long as you like, with one project and previews for every branch. It does not ask for a card.</div> </details> <details class="accordion-item" name="faq-split"> <summary class="accordion-trigger">What counts as a member?</summary> <div class="accordion-content">Anyone who can deploy. People who only view previews or leave comments are free on every plan.</div> </details> <details class="accordion-item" name="faq-split"> <summary class="accordion-trigger">Can I use my own domain?</summary> <div class="accordion-content">On every plan. Point the domain at Atlas, and the certificate is issued and renewed for you.</div> </details> <details class="accordion-item" name="faq-split"> <summary class="accordion-trigger">What happens if I go over my plan?</summary> <div class="accordion-content">Nothing breaks. We email you at 80% and at 100%, and your sites stay up while you decide.</div> </details> <details class="accordion-item" name="faq-split"> <summary class="accordion-trigger">Do you offer discounts?</summary> <div class="accordion-content">Students, open source projects and non-profits get Pro for free. Write to us from the address of your organization.</div> </details> <details class="accordion-item" name="faq-split"> <summary class="accordion-trigger">How do I cancel?</summary> <div class="accordion-content">From the billing page, in two clicks. You keep what you paid for until the end of the period.</div> </details> </div> </div> </div></section>#Accessibility
- Each question is a
<summary>: a button to assistive technology, with its open state. Find-in-page opens a closed row that holds a match. - If the questions are the main content of the page, make each a heading inside its summary:
<summary class="accordion-trigger"><h3>…</h3></summary>. - For search engines, add
FAQPagestructured data from the same source as the markup, so the two cannot drift.