Questions

Examples

When to use it

Practical questions a reader has before acting. Every question on the page is also in the FAQPage JSON-LD.

Live: Hirsla.

Anatomy

Group

.faq, 1px ink rule.

Item

details > summary + p, hairline below.

Marker

“+” closed, “−” open, secondary ink.

States

Closed

Summary only.

Open

Answer shown, marker “−”.

Hover

Question in link colour.

Behaviour

Phone, tablet, desktop

19/26 phone, 22/30 desktop; answer keeps 40px clear on the right on desktop.

Motion

Answer fades in and moves 4px, 200ms. Off under reduced motion.

Accessibility

Native details: keyboard and screen readers work without script.

Words

Questions as the reader would ask them, with a question mark. Answers start with the answer.

Code

Classes: .faq. Styles in site/assets/css/site.css.

<div class="faq">
<details><summary>What if the AI gets it wrong?</summary><p>It can. Every sentence of an answer is numbered to the card it came from, so you can check. If nothing matches, it is built to say “no answer”.</p></details>
<details><summary>Does Hirsla work offline?</summary><p>Yes. Once Apple Intelligence is set up, your cards, search, and Ask work without a connection, in aeroplane mode too. Saving a new link needs one, to load the page.</p></details>
<details><summary>What happens at the limit?</summary><p>Saving still works. New things are kept and read once there is room, in the order you saved them. Until then you find them by their title, file name, or link.</p></details>
</div>