ASSET_SPEC // MINIMAL_ACCORDION

Minimal AccordionFAQ template

A quiet, accessible disclosure pattern for product and documentation pages.

Live_Preview_Environment

Frequently asked questions

Can I customize this template?

Yes. Replace the copy and adapt the styles to your brand.

Does it require JavaScript?

No. The HTML version uses native <details> elements that work without JavaScript.

Is it responsive?

Yes. The layout adapts to all screen widths using a max-width container.

When_to_Use

Use the minimal accordion when you need a quiet, dependency-free disclosure for three to eight questions on a product or documentation page. It relies on native <details>, so it works without JavaScript and stays keyboard accessible by default.

Source_Manifest

Source_Inspector // HTML

<section aria-labelledby="faq-heading">
  <h2 id="faq-heading">Frequently asked questions</h2>
  <details open>
    <summary>Can I customize the styles?</summary>
    <p>Absolutely. The templates use standard CSS/Tailwind classes for easy modification.</p>
  </details>
  <details>
    <summary>Is it dependency-free?</summary>
    <p>This template requires no external libraries and works with native browser features.</p>
  </details>
</section>

READ_ONLY

<section class="mx-auto max-w-2xl" aria-labelledby="faq-heading">
  <h2 id="faq-heading" class="text-2xl font-semibold">Frequently asked questions</h2>
  <details class="border-b py-4" open>
    <summary class="cursor-pointer font-medium">Can I customize the styles?</summary>
    <p class="mt-3 text-neutral-600">Absolutely. The templates use standard CSS/Tailwind classes for easy modification.</p>
  </details>
  <details class="border-b py-4">
    <summary class="cursor-pointer font-medium">Is it dependency-free?</summary>
    <p class="mt-3 text-neutral-600">This template requires no external libraries and works with native browser features.</p>
  </details>
</section>

READ_ONLY

export function MinimalAccordion() {
  return (
    <section aria-labelledby="faq-heading" className="mx-auto max-w-2xl">
      <h2 id="faq-heading" className="text-2xl font-semibold">
        Frequently asked questions
      </h2>
      <details className="border-b py-4" open>
        <summary className="cursor-pointer font-medium">
          Can I customize the styles?
        </summary>
        <p className="mt-3 text-neutral-600">
          Absolutely. The templates use standard CSS/Tailwind classes for easy modification.
        </p>
      </details>
      <details className="border-b py-4">
        <summary className="cursor-pointer font-medium">
          Is it dependency-free?
        </summary>
        <p className="mt-3 text-neutral-600">
          This template requires no external libraries and works with native browser features.
        </p>
      </details>
    </section>
  );
}

READ_ONLY