# FaqBox

A collapsible FAQ section built from question-and-answer pairs using native, accessible <details> disclosures.

**Category:** Components/Text elements/FaqBox

**Import:** `import { FaqBox } from '@reuters-graphics/graphics-components'`

## Props

| Prop | Type | Default | Required | Description |
|------|------|---------|:--------:|-------------|
| `faq` | `FaqItem[]` | — | ✓ | Question/answer pairs. Each answer is a markdown string. Malformed entries (missing question or answer) are skipped, and the whole section is omitted when none remain. |
| `title` | `string` | `'Frequently asked questions'` |  | Section heading. |
| `width` | `ContainerWidth` | `'normal'` |  | Width of the component within the text well. Options: `narrower`, `narrow`, `normal`, `wide`, `wider`, `widest` |
| `class` | `string` | `''` |  | Add extra classes to the block tag to target it with custom CSS. |
| `id` | `string` | `''` |  | Add an id to the block tag to target it with custom CSS. |

## Examples

### Demo

```svelte
<BodyText
  text="Bacon ipsum dolor amet turducken buffalo beef ribs bresaola pancetta ribeye pork belly doner hamburger biltong cupim porchetta chuck ham tenderloin."
/>
<FaqBox {faq} />
```

### Custom title

```svelte
<FaqBox title="Questions readers ask" width="narrow" faq={/* faq */} />
```

### Empty

```svelte
<FaqBox faq={[]} />
```

## Documentation

# FaqBox

The `FaqBox` component renders a list of frequently asked questions as a stack of collapsible disclosures. Questions are collapsed by default — so the page stays short at rest and expands on demand — and each answer is a markdown string, so inline links and emphasis are supported.

It's built on native `<details>`/`<summary>` elements, which are keyboard- and screen-reader-accessible without extra ARIA wiring.

```svelte
<script>
  import { FaqBox } from '@reuters-graphics/graphics-components';
</script>

<FaqBox
  faq={[
    {
      q: "Why doesn't your data always match other sources?",
      a: 'Different organisations use different methods, models and reporting windows, so small differences are expected.',
    },
    {
      q: 'How often is this updated?',
      a: 'The figures refresh automatically throughout the day as new data is published.',
    },
  ]}
/>
```

The section heading defaults to "Frequently asked questions" and can be overridden with the `title` prop. Malformed entries (a missing question or answer) are skipped, and the whole section is omitted when no valid items remain.

## Using with ArchieML docs

With the graphics kit, you'll likely get your questions from an ArchieML doc...

```yaml
# Archie ML doc
[faq]

q: Why doesn't your data always match other sources?
a: Different organisations use different methods, models and reporting windows, so small differences are expected.

q: How often is this updated?
a: The figures refresh automatically throughout the day as new data is published.
[]
```

... which you'll pass straight to the `FaqBox` component.

```svelte
<!-- graphics kit -->
<script>
  import { FaqBox } from '@reuters-graphics/graphics-components';
  import content from '$locales/en/content.json';
</script>

<FaqBox faq={content.faq} />
```