Const
Reusable card component for displaying key metrics
This component presents key security metrics in a consistent, easy-to-scan format. Standardized metric cards help stakeholders quickly understand critical security indicators. 📊
DESIGN SYSTEM: Uses Tailwind classes only - no inline styles. Follows 8px grid system (p-sm=8px minimum) for consistent spacing.
<MetricCard label="Uptime Target" value="99.9" unit="%" icon="⏱️" description="Expected system availability" variant="success" testId="uptime-metric"/> Copy
<MetricCard label="Uptime Target" value="99.9" unit="%" icon="⏱️" description="Expected system availability" variant="success" testId="uptime-metric"/>
Reusable card component for displaying key metrics
Business Perspective
This component presents key security metrics in a consistent, easy-to-scan format. Standardized metric cards help stakeholders quickly understand critical security indicators. 📊
DESIGN SYSTEM: Uses Tailwind classes only - no inline styles. Follows 8px grid system (p-sm=8px minimum) for consistent spacing.