→ Priya Sharma
→ KPI Blocks for Dashboard

KPI Blocks for Dashboard

Showcase your business metrics with this elegant KPI block group featuring trend indicators, percentages, and responsive design.

This Example is contributed by Priya Sharma, on 04-Mar-2025. It is responsive. similar terms for this example are Admin Dashboard, User dashboard,Statistic,Data Visualization,Statistical Overview,Statistics Display,Stats,Info,Show info,Statistics

Dashboard Stats Display KPI

Author Priya Sharma

Fork Fullscreen

<div class="kpi-container">
  <div class="kpi-block positive">
    <div class="kpi-icon">
      <svg viewBox="0 0 24 24" width="24" height="24">
        <path d="M16,6L18.29,8.29L13.41,13.17L9.41,9.17L2,16.59L3.41,18L9.41,12L13.41,16L19.71,9.71L22,12V6H16Z"></path>
      </svg>
    </div>
    <div class="kpi-content">
      <h3 class="kpi-title">Revenue</h3>
      <div class="kpi-value">$128,430</div>
      <div class="kpi-change">+12.5%</div>
    </div>
  </div>
  
  <div class="kpi-block negative">
    <div class="kpi-icon">
      <svg viewBox="0 0 24 24" width="24" height="24">
        <path d="M16,18L18.29,15.71L13.41,10.83L9.41,14.83L2,7.41L3.41,6L9.41,12L13.41,8L19.71,14.29L22,12V18H16Z"></path>
      </svg>
    </div>
    <div class="kpi-content">
      <h3 class="kpi-title">Expenses</h3>
      <div class="kpi-value">$54,730</div>
      <div class="kpi-change">-8.2%</div>
    </div>
  </div>
  
  <div class="kpi-block positive">
    <div class="kpi-icon">
      <svg viewBox="0 0 24 24" width="24" height="24">
        <path d="M12,4C13.39,4 14.78,4.41 16,5.17C16.58,5.53 16.97,6.11 17,6.73V17.27C16.97,17.89 16.58,18.47 15.97,18.83C14.78,19.59 13.39,20 12,20C10.61,20 9.22,19.59 8,18.83C7.42,18.47 7.03,17.89 7,17.27V6.73C7.03,6.11 7.42,5.53 8.03,5.17C9.22,4.41 10.61,4 12,4M14.31,8.9L12,4.25L9.69,8.9L7.87,4.34L7,6.41L8.82,10.96L6.94,8.39L6.11,9.6L8.47,12.65L7.31,10.13L6.5,11.32L8.47,15.27L6.7,12.08L6,13.07L8.47,16.97L12,13L15.03,17.12L17.5,13.08L16.7,12.19L15.03,15.27L17,11.32L16.19,10.13L15.03,12.65L17.39,9.6L16.56,8.39L14.68,10.96L16.5,6.41L15.63,4.34L13.81,8.9L16.29,5.34L14.31,8.9Z"></path>
      </svg>
    </div>
    <div class="kpi-content">
      <h3 class="kpi-title">Customers</h3>
      <div class="kpi-value">1,245</div>
      <div class="kpi-change">+22.8%</div>
    </div>
  </div>
  
  <div class="kpi-block neutral">
    <div class="kpi-icon">
      <svg viewBox="0 0 24 24" width="24" height="24">
        <path d="M17,18C15.89,18 15,18.89 15,20C15,21.1 15.9,22 17,22C18.1,22 19,21.1 19,20C19,18.89 18.1,18 17,18M1,2V4H3L6.6,11.59L5.24,14.04C5.09,14.32 5,14.65 5,15C5,16.1 5.9,17 7,17H19V15H7.42C7.28,15 7.17,14.89 7.17,14.75C7.17,14.7 7.18,14.66 7.2,14.63L8.1,13H15.55C16.3,13 16.96,12.58 17.3,11.97L20.88,5.5C20.95,5.34 21,5.17 21,5C21,4.45 20.55,4 20,4H5.21L4.27,2M7,18C5.89,18 5,18.89 5,20C5,21.1 5.9,22 7,22C8.1,22 9,21.1 9,20C9,18.89 8.1,18 7,18Z"></path>
      </svg>
    </div>
    <div class="kpi-content">
      <h3 class="kpi-title">Orders</h3>
      <div class="kpi-value">824</div>
      <div class="kpi-change">+0.3%</div>
    </div>
  </div>
</div>

Related Examples

Dashboard Statistics Cards
Responsive statistics cards with vibrant color schemes designed to highlight key performance indicators for data-driven applications.

Author:
Jordan McKenzie

2 months ago
Data Card with Hover Effects
Engaging KPI card that displays key metrics with interactive hover effects and a progress bar.

Author:
Laura Mitchell

2 months ago
Dashboard KPI Stat Cards with Icons
A collection of clean and responsive stat cards to display key performance indicators and metrics on dashboards, featuring customizable icons and color schemes.

Author:
Eliza Stone

1 month ago
Dynamic Admin Dashboard Info Cards with Statistics
Modern, responsive admin panel info cards displaying key metrics and statistics with clean visuals for effective data monitoring.

Author:
Sammy Rodriguez

1 month ago
Flexible Info Cards with Stats Display
A set of clean information cards displaying key metrics and statistics with a simple hover effect for enhanced user experience.

Author:
Marcus Thornton

1 month ago
Admin Dashboard Info Cards
Display key metrics and user statistics with these informative cards designed for admin dashboards. Easily track performance and user engagement.

Author:
Cleo Claren

2 months ago
Key Metrics Overview
Showcase your expertise with key metrics, including years of experience, client satisfaction, project completion, and awards won.

Author:
M. Johnson

2 months ago
Dynamic Stats Showcase with Animated Counters
Showcase your company's key performance indicators with this visually appealing stats grid featuring animated counters and clean design.

Author:
Bishnu Thapa

1 month ago
Interactive Multi-Step Progress Indicator

Author:
Jordan McKenzie

2 months ago
Bold Impact Stats Showcase for Product Metrics
A visually striking statistics component with bold typography and modern design to highlight your product's key performance metrics and achievements.

Author:
Alex Morgan

1 month ago
Admin Dashboard Statistics Cards
Clean and responsive statistics cards for admin panels, displaying key metrics with vibrant colors and intuitive icons

Author:
Sushil shahu

1 month ago
Dark Theme Statistics Display Cards

Author:
Maya Johnson

1 month ago

Didn't find component you were looking for?

Search from 500+ components