FAQ Index

The questions section of an agent-infrastructure, devtools or IoT product (pricing, data retention, SSO, uptime, rate limits, self-hosting) filed where they can be found, with one contrast key to ask a person. It is an accordion underneath (native details and summary, one at a time via the shared name), so keyboard and screen reader behave exactly as they expect, while the page shows a drawer of cards. Free with an account: CSS and a few lines of DOM, no dependency, both finishes.

Copy the faq-drawer folder from its package next to your page, link the stylesheets and mount it on an element. Every option has a default; the lab’s Code tab writes the same example at any settings, and for React, Vue, Svelte or a custom element (Using a framework).

<link rel="stylesheet" href="faq-drawer/faq-drawer.css">
<div id="faq-drawer"></div>

<script type="module">
  import { mount } from './faq-drawer/faq-drawer.mjs';

  const faqDrawer = mount(document.getElementById('faq-drawer'), {
    label: 'Questions',
    title: 'Asked before you sign.',
    lead: 'The questions every platform team asks in its first week, filed where you can find them. Pull a card to read it.',
  });

  // faqDrawer.update({ … });   change any option in place
  // faqDrawer.destroy();        and take it away again
</script>

mount(element, options)

Builds the block inside the element and returns its handle.

handle.open(i)

Open card i (0-based), as a click would.

handle.update(next = {})

Change options in place.

handle.destroy()

Stops it and cleans up after it.

1. At restSeven cards standing in the tray, the first pulled; tabs at three stations; the back cards a shade darker and a hair narrower; nothing runs.
2. HoverA closed card rises 3px, as a card in an index does under a finger.
3. PulledClick, Enter or Space: the card lifts 12px above the rest with a deeper shadow and its face opens (the platform's details-content transition, 320 ms) to the answer typed on ruled stock under a double rule, with its filing line.
4. One at a timePulling another card puts the first back (native <details name>); switchable to several at once.
5. FocusA 2px ring in the ribbon's ink inside the card's edge, visible on paper in both finishes.
6. AluminiumA bead-blasted drawer box and front, the tray lit from above.
7. GraphiteA soft-touch black drawer; the cards stay paper.
8. TabletThe head above, the drawer full width.
9. PhoneTighter metal and tray, no card numbers, smaller tabs, the answer from the card's edge, the Ask key full width.
10. Reduced motionThe card opens at once, lifted; no transition; hover does not lift.

Made of: Native details accordion, Exclusive details name, Details content interpolate size, Card lift transform, Depth shaded stack, Staggered tabs, Container query layout, Finish following, Sticky head.

Original composition. The product (Lode), its prices, limits and answers are invented. The drawer and cards are CSS drawn here; no image. Faces: Instrument Sans and Geist Mono, both the kit's own, SIL OFL 1.1.