Components
Accordion / FAQ
Full width, hairlines as the only boundary, arrow on the right. Built on
<details> — it works without JavaScript and is keyboard operable
without us doing anything for it.
Default
FAQ
6 Fragen
Wie starte ich mein Projekt mit Control-F?
Mit einem Discovery-Workshop. In zwei bis vier Wochen sehen wir uns Ihre
Datenlage vor Ort an, priorisieren ein bis zwei Use Cases und rechnen den
Business Case durch. Danach entscheiden Sie, ob und wie es weitergeht.
Welche Datenquellen können angebunden werden?
SPS und Leitsysteme über OPC UA und Modbus, Historians, MES- und ERP-Systeme,
Cloud-Telemetrie sowie Dateiablagen. Wenn es ein Protokoll hat, bekommen wir es
angebunden.
Arbeiten Sie auch mit Legacy-Infrastrukturen?
Ja – das ist eher der Normalfall als die Ausnahme. Anlagen laufen 20 Jahre,
Software selten. Wir bauen die Brücke, statt einen Austausch zu verlangen.
Wie wird die Datensicherheit gewährleistet?
Hosting wahlweise in Ihrem Rechenzentrum, bei STACKIT oder Hetzner – in jedem Fall
in der EU. Verschlüsselung in Transit und at Rest, rollenbasierte Zugriffe,
nachvollziehbare Audit-Logs.
<div class="cf-accordion"> <details class="cf-accordion__item"> <summary class="cf-accordion__summary"> Wie starte ich mein Projekt mit Control-F? <svg class="cf-arrow" aria-hidden="true"><use href="#cf-arrow"></use></svg> </summary> <div class="cf-accordion__content">Mit einem Discovery-Workshop. …</div> </details> </div>
Anatomy
| Property | Value |
|---|---|
| Row height | 48 px closed — --space-3 above and below a 23.2 px line box, plus the divider. A touch target across the full width. |
| Text indent | --space-20 (80 px) on the left, as in the design |
| Question | Geist Medium, 16 px |
| Answer | Geist Light, 14 px, measure capped at 76 characters |
| Dividers | 1 px solid, top and bottom of the block |
| Arrow | flush right — no padding on that side, so its right edge lands on the same axis as the end of the row's hairline. Rotates 90° when [open], 240 ms. |
The 80 px indent is not arbitrary: it matches the page gutter, so the questions start
on the same axis as the section content beside them. Below 780 px it falls back to
--space-4.
Accessibility
<details>/<summary>brings role, keyboard operation and state with it — no ARIA needed.- The arrow is
aria-hidden; the element communicates its own state. - The default marker is removed (
list-style: noneplus::-webkit-details-marker) — the CF arrow replaces it visually. - At most one
openon load, and that should be the most common question. - Ship
FAQPageJSON-LD alongside it for rich results.
Rules
Do
- Phrase questions in the customer's words, not your own.
- Keep answers short: three to five lines, then link out.
- Six to eight entries — beyond that it becomes documentation.
Don't
- No accordions for content everyone is supposed to read.
- No nested accordions.
- Don't auto-close the other entries — it costs more than it gives.