FAQ section

How to use it

Use as a full help section on a pricing or support page where questions fall into clear topics; the two columns collapse into one on narrow screens. For a short, single list of questions inside a panel, use the accordion instead. Replace the topics, questions and answers with your own, give each topic heading a unique id, and point the contact link at your real support page.

Accessibility

A <section> with an <h2>, then one <h3> per topic and a <ul> of questions labelled by that topic, so screen readers can jump topic to topic by heading and hear how many questions each holds. Every question is a native <details>/<summary>, reached with Tab, toggled with Enter or Space and announced as expanded or collapsed without ARIA; the +/- sign is decorative CSS. Questions #0f172a on white (#f1f5f9 hovered) are 17.85:1 (16.30:1), answers #334155 on white 10.35:1, topic headings #1e3a8a on white 10.36:1, and the intro link #1d4ed8 on white 6.70:1.

Source (copy-ready)

Copy code

<section class="dcl-faq" aria-labelledby="dcl-faq-title">
  <h2 id="dcl-faq-title" class="dcl-faq__title">Frequently asked questions</h2>
  <p class="dcl-faq__intro">Answers to what teams ask most, grouped by topic. Cannot find yours? <a href="../about.html" class="dcl-faq__link">Contact support</a>.</p>
  <div class="dcl-faq__groups">
    <div class="dcl-faq__group">
      <h3 id="dcl-faq-topic-1" class="dcl-faq__topic">Getting started</h3>
      <ul class="dcl-faq__list" role="list" aria-labelledby="dcl-faq-topic-1">
        <li class="dcl-faq__entry">
          <details class="dcl-faq__q">
            <summary class="dcl-faq__summary">How long does setup take?</summary>
            <p class="dcl-faq__answer">Most teams create their first board in under five minutes. You can import tasks from a spreadsheet file.</p>
          </details>
        </li>
        <li class="dcl-faq__entry">
          <details class="dcl-faq__q">
            <summary class="dcl-faq__summary">Can I try it before paying?</summary>
            <p class="dcl-faq__answer">Yes. Every paid plan starts with a 14-day trial, and no card is needed to begin.</p>
          </details>
        </li>
      </ul>
    </div>
    <div class="dcl-faq__group">
      <h3 id="dcl-faq-topic-2" class="dcl-faq__topic">Billing</h3>
      <ul class="dcl-faq__list" role="list" aria-labelledby="dcl-faq-topic-2">
        <li class="dcl-faq__entry">
          <details class="dcl-faq__q">
            <summary class="dcl-faq__summary">Can I switch plans later?</summary>
            <p class="dcl-faq__answer">Yes. An upgrade applies straight away; a downgrade applies at the end of the billing period.</p>
          </details>
        </li>
        <li class="dcl-faq__entry">
          <details class="dcl-faq__q">
            <summary class="dcl-faq__summary">Do you offer discounts for charities?</summary>
            <p class="dcl-faq__answer">Registered charities and schools get 50% off any paid plan. Contact support to apply.</p>
          </details>
        </li>
      </ul>
    </div>
    <div class="dcl-faq__group">
      <h3 id="dcl-faq-topic-3" class="dcl-faq__topic">Accounts and security</h3>
      <ul class="dcl-faq__list" role="list" aria-labelledby="dcl-faq-topic-3">
        <li class="dcl-faq__entry">
          <details class="dcl-faq__q">
            <summary class="dcl-faq__summary">Can I sign in with a passkey?</summary>
            <p class="dcl-faq__answer">Yes. Add one under Settings, Security, then use it on any device that supports passkeys.</p>
          </details>
        </li>
        <li class="dcl-faq__entry">
          <details class="dcl-faq__q">
            <summary class="dcl-faq__summary">Who can see my boards?</summary>
            <p class="dcl-faq__answer">Only the people you invite. Business plans can also restrict boards to named groups.</p>
          </details>
        </li>
      </ul>
    </div>
    <div class="dcl-faq__group">
      <h3 id="dcl-faq-topic-4" class="dcl-faq__topic">Data and privacy</h3>
      <ul class="dcl-faq__list" role="list" aria-labelledby="dcl-faq-topic-4">
        <li class="dcl-faq__entry">
          <details class="dcl-faq__q">
            <summary class="dcl-faq__summary">Can I export my data?</summary>
            <p class="dcl-faq__answer">Yes. Any admin can export every board as a spreadsheet or JSON file at any time.</p>
          </details>
        </li>
        <li class="dcl-faq__entry">
          <details class="dcl-faq__q">
            <summary class="dcl-faq__summary">What happens when I cancel?</summary>
            <p class="dcl-faq__answer">Your boards become read-only and stay available to export for 30 days, then they are deleted.</p>
          </details>
        </li>
      </ul>
    </div>
  </div>
</section>
<style>
.dcl-faq { padding: 2rem 1.25rem; font: inherit; color: #0f172a; background-color: #ffffff; }
.dcl-faq__title { margin: 0 0 0.5rem; font-size: 1.75rem; color: #0f172a; background-color: #ffffff; }
.dcl-faq__intro { margin: 0 0 1.75rem; color: #334155; background-color: #ffffff; }
.dcl-faq__link { color: #1d4ed8; background-color: #ffffff; }
.dcl-faq__link:hover { color: #1e40af; background-color: #ffffff; }
.dcl-faq__link:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.dcl-faq__groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1.75rem 2.5rem; }
.dcl-faq__group { min-width: 0; }
.dcl-faq__topic { margin: 0 0 0.5rem; padding-bottom: 0.4rem; border-bottom: 2px solid #1e3a8a; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.06em; color: #1e3a8a; background-color: #ffffff; }
.dcl-faq__list { margin: 0; padding: 0; list-style: none; }
.dcl-faq__entry { border-bottom: 1px solid #e2e8f0; }
.dcl-faq__summary { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0.25rem; list-style: none; cursor: pointer; font-weight: 600; color: #0f172a; background-color: #ffffff; }
.dcl-faq__summary::-webkit-details-marker { display: none; }
.dcl-faq__summary::after { content: "+"; flex: none; font-weight: 700; }
.dcl-faq__q[open] .dcl-faq__summary::after { content: "\2212"; }
.dcl-faq__summary:hover { color: #0f172a; background-color: #f1f5f9; }
.dcl-faq__summary:focus-visible { outline: 2px solid #1d4ed8; outline-offset: -2px; }
.dcl-faq__answer { margin: 0; padding: 0 0.25rem 0.85rem; line-height: 1.55; color: #334155; background-color: #ffffff; }
</style>