K08 / COMPONENTS
Built from elements. Used by every page.
Each component lists where it lives in the demos. Live versions are linked; everything here uses the same tokens.
NAVIGATION · HEADER WITH EMERGENCY LANE (3 VARIANTS, LIVE)
MEGA MENU · SERVICES (keyboard: ← → between columns, Esc closes)
SOLUTIONS BY NEED
INDUSTRIES
RESOURCES
HERO VARIANTS · A/B-READY
CANVAS
Signal Filter
D01 · default
LIVE
Live SOC status
D02 · proof-led
NO MOTION
Emergency
D03 · hotline first
TYPE
Editorial manifesto
D11 · brand, careers
AUDIT
Compliance check
D05 · checker built in
CONTENT COMPONENTS · INVENTORY
| COMPONENT | KEY RULE | LIVE IN |
|---|---|---|
| Service card | Outcome first, then one measurable proof line | D01 |
| SOC funnel band | Source + period, log scale labeled | D01 / D02 |
| T+ response timeline | Mono timestamps, one UV milestone | D01 / D03 |
| SLA table | Severity chip + contractual clock | D02 |
| ATT&CK coverage matrix | Legend with text, not color alone | D02 |
| Attack-path diagram | Show where the control broke the chain | D08 |
| Redacted case teaser | Real text for screen readers | D01 |
| Pricing tiers | Per endpoint/user, terms visible | D02 / D06 |
| Comparison table | In-house vs managed, assumptions stated | D02 |
| FAQ accordion | Button with aria-expanded; FAQPage schema | D02 |
| Advisory card | Severity, TLP, CVE, date, affected, action | D09 |
| Certification tile | Scope + validity + issuer | D10 |
| Analyst card | Name, role, certifications | D02 |
| Job card | Salary range always | D11 |
| Pentest configurator | Ballpark without email gate | D04 |
| Quote calculator | Live price, prefilled request | D06 |
| NIS2 scope checker | 3 steps, "not legal advice" | D05 |
| Intent routing | Emergency first, distinct | D07 |
| Portal: alerts queue | Row select → detail, audit log | D12 |
| Cookie consent | Equal Accept/Reject, none pre-checked | UT |
OVERLAYS (LIVE)
Toast · success
Report scheduled for Mondays 07:00 CET.
TLP:AMBERConfidentiality notice
This document may be shared within your organization and with clients who need to know.