# FAQ Index

An FAQ as a card-index drawer. Each question is typed along a card’s edge with its subject on a staggered tab; pull one and it lifts out to show the answer. An accordion underneath.

Block · Free · https://tactileui.dev/blocks/faq-drawer

- Version: 0.1.0
- Size: 96.8 KB gzipped
- Access: Free for anyone, MIT, open source
- Needs: faq-drawer.mjs + faq-drawer.css
- Tests: 9 tests, 10 states
- Lab: https://tactileui.dev/blocks/faq-drawer

## Use it

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](https://tactileui.dev/docs/frameworks)).

```html
<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>
```

## Options

| Option | Type | Default | What it does |
| - | - | - | - |
| `label` | text | 'Questions' | Label |
| `title` | text | 'Asked before you sign.' | Headline |
| `lead` | text | 'The questions every platform team asks in its first week, filed where you can find them. Pull a card to read it.' | Lead |
| `drawer` | text | 'Lode · Q–Z' | Typed on the card in the label holder. |
| `count` | number, 3 to 7 | 7 | Cards |
| `open` | none · 1 · 2 · 3 · 4 · 5 · 6 · 7 | '1' | The card that is out of the drawer when the page opens. |
| `single` | boolean | true | Native: the cards share a <details name>. |
| `askNote` | text | 'Not in the drawer? A person answers, usually within the hour.' | Beside the key |
| `askLabel` | text | 'Ask us' | Key |
| `askHref` | text | 'mailto:hello@lode.example' | A page, a path, mailto: or tel:. |
| `finish` | auto · aluminium · graphite | 'auto' | Auto follows the page’s data-finish, then the visitor’s system. The cards stay paper. |

## Methods

- `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.

## States

1. **At rest**: Seven 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. **Hover**: A closed card rises 3px, as a card in an index does under a finger.
3. **Pulled**: Click, 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 time**: Pulling another card puts the first back (native <details name>); switchable to several at once.
5. **Focus**: A 2px ring in the ribbon's ink inside the card's edge, visible on paper in both finishes.
6. **Aluminium**: A bead-blasted drawer box and front, the tray lit from above.
7. **Graphite**: A soft-touch black drawer; the cards stay paper.
8. **Tablet**: The head above, the drawer full width.
9. **Phone**: Tighter metal and tray, no card numbers, smaller tabs, the answer from the card's edge, the Ask key full width.
10. **Reduced motion**: The card opens at once, lifted; no transition; hover does not lift.

## How it works

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.