Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
requirement-card
Display-only card for one NFR ility row. Renders priority + rationale + optional conflict flag for status dashboards and ADR appendices. The prioritization decision itself lives in
Overview
The <requirement-card> component is a display-only tile for a single Non-Functional Requirement (ility) row — performance, security, accessibility, observability, and so on. It renders the chosen priority, a rationale, and an optional conflict flag for status dashboards, ADR appendices, and review surfaces.
The prioritization decision happens in <quality-target> (which absorbed <nfr-compass> + <nfr-radar>). Use <requirement-card> downstream of that decision — in the documents that consume the choice.
Basic example
HTML
<requirement-card data-priority="critical"> <span slot="name">Performance</span> <span slot="badge">SLA</span> <p slot="rationale">Pages must paint LCP < 2.5s on 3G — a hard ad-network constraint.</p></requirement-card> <requirement-card data-priority="important"> <span slot="name">Accessibility</span> <p slot="rationale">WCAG 2.2 AA across all customer-facing flows.</p></requirement-card> <requirement-card data-priority="acceptable" data-conflict> <span slot="name">Internationalization</span> <p slot="rationale">English-only at launch; defer i18n to v2.</p> <p slot="conflicts">Conflicts with the marketing team's APAC-launch ask — needs an ADR.</p></requirement-card>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
data-priority |
enum: critical · important · acceptable · not-relevant |
— | Drives :state(priority-*), default pill text, and accent color. |
data-conflict |
boolean | — | Flags a conflict / drift note; renders an emphasized border. |
tabindex |
number | — | Set to 0 to make the card directly focusable + activatable. Otherwise wrap in <a> or <button>. |
Slots
| Slot | Description |
|---|---|
name | Ility label (e.g. “Performance”). |
badge | Category / version / source tag — small uppercase muted text. |
priority-pill | Author-supplied custom pill. Default pill renders from data-priority when this slot is empty. |
rationale | Why this priority was chosen (especially for Critical rows). |
conflicts | Short conflict / drift note (paired with data-conflict). |
Events
| Event | Detail | When |
|---|---|---|
requirement-card:click |
{ priority, hasConflict, originalEvent } |
Bubbles when the card is activated by mouse, keyboard, or touch — only when the card is interactive (wrapped in <a>/<button> or has tabindex). |
Related
<quality-target>— the polygon-as-UI quality prioritization surface that produces the priorities<requirement-card>displays.<iron-triangle>— project-shape decision (scope / quality / time); pairs with<quality-target>.<score-card>— KPI tile (a different shape with a numeric value + change indicator).