# FAQ

> Questions with their answers; an open list by default, an accordion for long sets at a page foot.

- Block class: `.hs-qa`
- CSS: `components/qa.css` (also inside https://brand.honorsociety.org/brand.css)
- JS: none
- Status: decided
- Decision record: https://brand.honorsociety.org/decisions/components-round-2a.html
- Variants: Open list (default), Accordion
- HTML page: https://brand.honorsociety.org/components/faq/

## What it is

Questions and answers. The question is Mukta 600 at 20px in ink; answers are body text in ink. Every answer stays in the HTML.

## When to use

- A utility page where the answer is the content: open list.
- A FAQ band on a scholarship or award page: open list.
- A FAQ band of 6 or more questions at the foot of a long page: `--accordion`.

## When not to use

- A numbered procedure: use [Steps](/components/steps/).
- Legal or participation terms: use [Disclosure](/components/disclosure/).
- One help note: use [Callout](/components/callout/).
- Fewer than 6 questions, or questions at the top of a page: use the open list, not the accordion.

## Rules

- Open list: `div.hs-qa` with `div.hs-qa__item` per question, each with `h3.hs-qa__question` and `div.hs-qa__answer`.
- Accordion: `div.hs-qa.hs-qa--accordion` with `details.hs-qa__item`, each with `summary.hs-qa__question` and `div.hs-qa__answer`. Put the question text straight in `<summary>`, with no heading inside.
- Keep every answer in the HTML. Never load answers on demand.
- Give an item an `id` when other pages link to the question.
- When an answer holds links, add `.hs-prose` to `.hs-qa__answer`.
- Use the block name `hs-qa`. `hs_pages` already uses `.hs-faq` for the `/faqs` page.

## Accessibility

- Questions and answers are ink: 11.3:1.
- In the open list, each question is an `h3`, so a screen reader can move from question to question.
- The accordion uses native `<details>`: it opens with Enter or Space and works without JavaScript. Search engines and Ctrl+F still find closed answers.
- Each `<summary>` is at least 48px tall. Its focus outline sits inside the item, so the hairlines do not cover it.
- Reduced motion removes the colour and chevron transitions.

## Variants

### Open list (default)

Every answer is visible. For utility pages, where the answer is the content.

```html
<div class="hs-qa">
  <div class="hs-qa__item" id="faq-1">
    <h3 class="hs-qa__question">How much is the Study Abroad Scholarship?</h3>
    <div class="hs-qa__answer"><p>Honor Society&reg; offers this $1,000 scholarship. The award is administered independently by Honor Society and its designated scholarship review committee.</p></div>
  </div>
  <div class="hs-qa__item" id="faq-2">
    <h3 class="hs-qa__question">When is the next application deadline?</h3>
    <div class="hs-qa__answer"><p>This scholarship has rolling monthly deadlines on the 28th. Applications may remain under consideration for up to 3 months after submission.</p></div>
  </div>
  <div class="hs-qa__item" id="faq-3">
    <h3 class="hs-qa__question">Do I need confirmed enrollment when I apply?</h3>
    <div class="hs-qa__answer"><p>You must describe your planned program and dates when applying. Confirmation of enrollment in that program is required before scholarship funds are released.</p></div>
  </div>
</div>
```

### Accordion

`--accordion`, built on `<details>`. Only for a FAQ band of 6 or more questions at the foot of a long page.

```html
<div class="hs-qa hs-qa--accordion">
  <details class="hs-qa__item" open>
    <summary class="hs-qa__question">How much is the Study Abroad Scholarship?</summary>
    <div class="hs-qa__answer"><p>Honor Society&reg; offers this $1,000 scholarship. The award is administered independently by Honor Society and its designated scholarship review committee.</p></div>
  </details>
  <details class="hs-qa__item">
    <summary class="hs-qa__question">When is the next application deadline?</summary>
    <div class="hs-qa__answer"><p>This scholarship has rolling monthly deadlines on the 28th. Applications may remain under consideration for up to 3 months after submission.</p></div>
  </details>
  <details class="hs-qa__item">
    <summary class="hs-qa__question">Do I need confirmed enrollment when I apply?</summary>
    <div class="hs-qa__answer"><p>You must describe your planned program and dates when applying. Confirmation of enrollment in that program is required before scholarship funds are released.</p></div>
  </details>
</div>
```