Content blocks

FAQ

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

Block: .hs-qa
CSS: components/qa.css (in /brand.css)
JS: None
Status: Decided
Decided in: Components round 2a
Markdown: /components/faq.md

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.
Legal or participation terms: use Disclosure.
One help note: use 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.

Preview on white

How much is the Study Abroad Scholarship?

Honor Society® offers this $1,000 scholarship. The award is administered independently by Honor Society and its designated scholarship review committee.

When is the next application deadline?

This scholarship has rolling monthly deadlines on the 28th. Applications may remain under consideration for up to 3 months after submission.

Do I need confirmed enrollment when I apply?

You must describe your planned program and dates when applying. Confirmation of enrollment in that program is required before scholarship funds are released.

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