Z

MetricCard

A specialized card component for displaying key metrics and statistics with optional trend indicators, icons, and helper text. Built on the Card component with semantic variant styling.

Basic Metrics

Total Users
12,345
Active Cases
89
Last 30 days
Risk Areas
23

With Trend Indicators

New Alerts
156
Increasing 12% from last week
Response Time
2.3s
Decreasing 15% improvement
Coverage
98.5%
Stable No change

Variants

Default
1,234
Standard metric
Success
98.5%
Increasing Above target
Warning
45
Increasing Needs attention
Error
12
Decreasing Critical issues

Real-World Examples

Confirmed Cases
234
Increasing 8% increase this month
Protected Areas
1,456
Increasing Growing coverage
Response Rate
94.2%
Stable Maintaining high quality
Pending Alerts
23
Awaiting review
Avg Risk Level
Low
Decreasing Risk decreasing
User Engagement
87%
Increasing 5% increase

Usage Example




    

            

        
        

            
            

    Total Users

            
            
            

    12,345

            
            
                    

        
        
            

        






    

            

        
        

            
            

    New Alerts

            
            
            

    156

            
            
                            

                    
            Increasing
    
                
                                                        
    12% from last week
                                    

                    

        
        
            

        






    

            

        
        

            
            

    Confirmed Cases

            
            
            

    234

            
            
                            

                    
            Increasing
    
                
                                                        
    8% increase this month

Props

Prop Type Default Description
label string required Metric label/description
value string|number required Metric value to display
trend string|null null Trend direction: up, down, flat
helper string|null null Supporting text or context
icon string|null null Optional icon name
variant string 'default' Semantic variant: default, success, warning, error
class string '' Additional CSS classes

Key Features

Trend Indicators

Visual indicators for up, down, or flat trends with semantic colors

Semantic Variants

Color-coded variants for different metric states and importance levels

Optional Icons

Add contextual icons to help users quickly identify metric types

Built on Card

Inherits all Card component features including variants and styling

Accessibility Features

Semantic Structure:

  • Uses proper heading hierarchy with overline labels
  • Large, readable metric values with display typography
  • Clear visual hierarchy for scanning

Trend Indicators:

  • Icons include descriptive titles for screen readers
  • Semantic colors (green for up/positive, red for down/negative)
  • Helper text provides context for the trend

Icon Accessibility:

  • Optional icons are decorative and properly labeled
  • Icon backgrounds use sufficient contrast ratios