Skip to main content

​
Purpose

KPI cards are essential for safety dashboards and compliance reporting. They provide at-a-glance visibility into:
  • Coverage metrics — percentage of requirements traced, verified, or linked
  • Classification rates — percentage of hazards with ASIL assigned, failure modes with Action Priority
  • Risk distribution — count of High/Medium/Low priority items
  • Compliance status — readiness percentage per standard (ISO 26262 Part 4, AIAG-VDA FMEA, IATF 16949)
  • Document status — workflow state counts (Draft/Review/Published)
KPI cards typically appear in responsive grid layouts on home dashboards, role dashboards, and safety readiness scorecards, allowing project stakeholders to understand project health at a glance without drilling down into detailed reports.

​
Macro Signature

#nxKpiCard($value $label $detail $colorCode)
ParameterTypeRequiredDescription
$valueString or NumberYesThe primary numeric value or percentage to display in large text. Example: "87.1%" or "260"
$labelStringYesThe descriptive label identifying what the KPI measures. Example: "Requirements Traced" or "Failure Modes Identified"
$detailStringOptionalSecondary line of detail text, typically a breakdown or context. Example: "27 of 31 system requirements" or "Up from 18 last review"
colorCodeStringOptionalCSS color name or hex code for the top border and value text color. Default: "#006e93" (Siemens iX accent blue). Common values: "#27ae60" (green), "#e74c3c" (red), "#f39c12" (orange), "#9b59b6" (purple)

​
Output

The macro generates a responsive card component with:
  • Top border — 4px solid colored bar (color from $colorCode parameter)
  • Value area — Large text (32-48px) displaying $value in the specified color
  • Label area — Medium text (14px) displaying $label in dark gray
  • Detail line — Optional small text (12px) displaying $detail in medium gray (if provided)
  • Responsive grid — Cards automatically wrap to 2-3 columns on desktop, 1 column on mobile
  • Minimum width — 220px to ensure consistent spacing in grid layouts

​
Property Table

PropertyTypeUsageNotes
ValueString/NumberPrimary metric displayUse percentages for ratios, counts for absolute numbers
LabelStringKPI descriptionKeep under 20 characters for mobile readability
DetailStringOptional contextTypically “X of Y” breakdown or trend indicator
Color CodeHex or CSSVisual status indicatorFollow traffic-light convention: green ≥80%, yellow ≥60%, red <60%
Card Border4px solidTop accent barGenerated from colorCode parameter
Text ColorRGB/HexValue text stylingInherits from colorCode for consistent visual emphasis

​
Common Usage Patterns

​
Pattern 1: Coverage Percentage with Detail

#nxKpiCard("87.1%" "Requirements Traced" "27 of 31 system requirements" "#27ae60")
Displays a green KPI card showing 87.1% coverage with a breakdown line.

​
Pattern 2: Count-Based Metric

#nxKpiCard("260" "Failure Modes" "100% classified by AP" "#f39c12")
Shows absolute count of failure modes with classification status in detail.

​
Pattern 3: Status Indicator with Red Alert

#nxKpiCard("5" "High-Priority Risks" "Post-mitigation AP = H" "#e74c3c")
Red card highlighting unacceptable residual risk requiring immediate action per ISO 26262 Part 4.

​
Pattern 4: Multi-Standard Readiness Metric

#nxKpiCard("92%" "ISO 26262 Part 4" "System Design Phase" "#27ae60")
Compliance scorecard metric showing readiness per standard with phase identification.

​
Pattern 5: Classification Distribution (Risk Bucket)

#nxKpiCard("42" "Medium Priority" "Action Priority M failures" "#f39c12")
Shows count of items in a specific risk classification category using traffic-light color.

​
Integration with Dashboard Grids

KPI cards are typically organized in responsive grids using the #nxKpiGrid macro pattern: 
#nxKpiGrid()
  #nxKpiCard("100%" "Requirements Defined" "31 system requirements" "#27ae60")
  #nxKpiCard("87.1%" "Requirements Verified" "27 of 31 test cases linked" "#27ae60")
  #nxKpiCard("100%" "Failure Modes Assessed" "260 FMs with Action Priority" "#27ae60")
  #nxKpiCard("5" "High Residual Risk" "Post-mitigation AP = H" "#e74c3c")
  #nxKpiCard("18" "Safety Goals" "All ASIL assigned" "#27ae60")
  #nxKpiCard("218" "Risk Controls" "Verification evidence linked" "#9b59b6")
#nxKpiGridEnd()
This creates a responsive 3-column grid on desktop that reflows to 2 columns on tablet and 1 column on mobile. Each card maintains consistent 220px minimum width and adapts to available space.

​
Color Conventions

ColorHexMeaningUse Case
Green#27ae60Compliant / SafeCoverage ≥80%, all items classified, verification complete
Yellow#f39c12Attention RequiredCoverage 60-79%, some items pending classification
Red#e74c3cNon-Compliant / UnsafeCoverage <60%, unacceptable residual risk (AP=H), missing verification
Purple#9b59b6Metric / CountNon-risk metrics: document counts, artifact inventories
Blue#006e93Default / NeutralGeneral metrics without specific compliance meaning

​
Real-World Example: Safety Readiness Scorecard

The Safety Readiness Scorecard uses KPI cards to show ISO 26262 Part 4 compliance readiness: 
#nxInit()
#parse("nextedy_solutions.vm")
#nxCommonStyles()

## Safety Readiness Scorecard — System Design Phase

| Metric | Card Configuration |
|--------|-------------------|
| Requirements Definition | #nxKpiCard("87.1%" "Requirements Defined" "27 of 31 system requirements" "#27ae60") |
| Traceability Coverage | #nxKpiCard("83.9%" "Requirements Verified" "26 test cases linked" "#27ae60") |
| FMEA Completeness | #nxKpiCard("100%" "Failure Mode Coverage" "260 system elements analyzed" "#27ae60") |
| High Residual Risk | #nxKpiCard("5" "High Residual Risks" "Post-mitigation AP = H — action required" "#e74c3c") |
| Safety Goals | #nxKpiCard("5" "Safety Goals Derived" "100% hazard traceability" "#27ae60") |
| Design Elements | #nxKpiCard("17" "System Elements" "8 subsystems, 73 characteristics" "#9b59b6") |

**Overall Readiness: 92% (ISO 26262 Part 4)**
KPI card colors follow traffic-light convention per ISO 26262 Part 4 safety readiness assessments:
  • Green (≥80% coverage) — Proceed; metrics meet compliance threshold
  • Yellow (60-79% coverage) — Review; remediation plan required
  • Red (<60% coverage or High residual risk) — Hold; unacceptable risk; mandatory action required
Never proceed to next development phase if red metrics are present without documented risk acceptance.

​
Configuration Properties

PropertyTypeDefaultDescription
Card WidthCSSmin-width: 220pxMinimum width for single card; flex layout adapts to grid container
Border WidthCSS4px solidTop border thickness — fixed per Siemens iX design system
Border RadiusCSS2pxSubtle corner rounding per iX geometric design
Box ShadowCSSNoneClean flat design per iX (no elevation shadows on cards)
Value Font SizeCSS48pxLarge primary metric; scales down on mobile
Value Font WeightCSS700 (bold)Emphasis for quick scanning
Label Font SizeCSS14pxSecondary descriptive text
Detail Font SizeCSS12pxTertiary context line
Card PaddingCSS16pxSiemens iX 8px grid multiples
Text ColorCSSInherited from $colorCodeValue color matches border for visual cohesion

​
Limitations and Considerations

ConstraintImplication
Single-line values onlyDo not pass multi-line text to $value; truncation may occur. Use plain numbers or percentages.
No embedded HTML/MarkdownLinks, icons, or formatted text in $value or $label will not render; use plain text only.
Color names must be CSS-validUse standard CSS color names (green, red) or hex codes (#27ae60). RGB values may not render consistently.
No conditional styling within macroAll styling (color, border) is set by $colorCode parameter; conditional logic must wrap the macro call.
Limited detail line lengthDetail text wrapping depends on card width; keep under 40 characters for readability on mobile.
Grid responsive behavior requires parent containerCard width adapts only if parent uses CSS display: grid or display: flex; fixed-width parent may cause overflow.
  • nxCoverageBar — Companion progress bar for detailed coverage visualization with linked gap items
  • nxCountByEnum — Enumerate aggregation to compute values for KPI cards from classification fields
  • nxLinkCoverage — Traceability gap detection providing percentage values for coverage KPI cards
  • nxRiskMatrix — 2D risk matrix visualization used alongside KPI cards in safety readiness dashboards
  • nxDocInventoryTree — Document inventory navigator providing counts for document status KPI cards

​
See Also