FAQ

Preview Available in release assets

Answer a finite set of supporting questions with native disclosure semantics.

FAQ in context

<section aria-labelledby="faq-heading">
  <h2 id="faq-heading">Frequently asked questions</h2>
  <div class="thin-faq">
    <details>
      <summary>Can I read every edition without enabling JavaScript?</summary>
      <p>Yes. Articles, navigation, forms, and disclosures remain browser-native.</p>
    </details>
    <details>
      <summary>How does an unusually long localized question wrap in a narrow reading column?</summary>
      <p>It wraps in normal flow without clipping the disclosure marker.</p>
    </details>
  </div>
</section>

Show code

<section aria-labelledby="faq-heading">
  <h2 id="faq-heading">Frequently asked questions</h2>
  <div class="thin-faq">
    <details>
      <summary>Can I read every edition without enabling JavaScript?</summary>
      <p>Yes. Articles, navigation, forms, and disclosures remain browser-native.</p>
    </details>
    <details>
      <summary>How does an unusually long localized question wrap in a narrow reading column?</summary>
      <p>It wraps in normal flow without clipping the disclosure marker.</p>
    </details>
  </div>
</section>

Anatomy

Section heading
Disclosure group
Native details and summary pairs
Answer content

Variants and sizes

All collapsed
Authored open answer
Deep link adjacent to answer

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

States and difficult content

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

Long localized question
Long answer
Open and closed
Narrow container
Print

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Native details toggling works with pointer, keyboard, touch, and no custom JavaScript.

Accessibility

Use a real heading for the FAQ section and native summary labels that make sense when announced; do not place the primary task only inside collapsed content.

Contract

DISCLOSURE

Basis

Native <details>/<summary>; APG Disclosure is guidance only if the native disclosure is replaced

Evidence

tests/unit/library/marketing-patterns.test.ts

API

Use a labelled section containing a div.thin-faq of native details and summary elements.

Behavior tier: css-only

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Landmarks, headings, links, media, disclosure, and native forms remain useful in normal document flow without CSS or JavaScript.

Assets and dependencies

/foundation.css
/layouts.css
/components.css
/patterns/marketing.css
/icons/sprite.svg

Dependencies: None

Source: packages/ui/src/items/marketing/style.ts