→ Jordan McKenzie
→ Dashboard Statistics Cards

Dashboard Statistics Cards

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

This Example is contributed by Jordan McKenzie, on 28-Feb-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 Analytics Stats Display KPI Metric

Author Jordan McKenzie

Fork Fullscreen

<div class="stats-container">
  <div class="stats-card">
    <div class="icon-container blue">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
        <path fill="none" d="M0 0h24v24H0z"/>
        <path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-3.5-6H14a.5.5 0 1 0 0-1h-4a2.5 2.5 0 1 1 0-5h1V6h2v2h2.5v2H10a.5.5 0 1 0 0 1h4a2.5 2.5 0 1 1 0 5h-1v2h-2v-2H8.5v-2z" fill="currentColor"/>
      </svg>
    </div>
    <div class="stats-info">
      <span class="stats-title">Revenue</span>
      <h3 class="stats-value">$24,780</h3>
      <div class="stats-change positive">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16">
          <path fill="none" d="M0 0h24v24H0z"/>
          <path d="M12.9 6.858l4.242 4.243L7.242 21H3v-4.243l9.9-9.9zm1.414-1.414l2.121-2.122a1 1 0 0 1 1.414 0l2.829 2.829a1 1 0 0 1 0 1.414l-2.122 2.121-4.242-4.242z" fill="currentColor"/>
        </svg>
        <span>+12.5%</span>
      </div>
    </div>
  </div>

<div class="stats-card">
    <div class="icon-container purple">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
        <path fill="none" d="M0 0h24v24H0z"/>
        <path d="M2 22a8 8 0 1 1 16 0H2zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm7.363 2.233A7.505 7.505 0 0 1 22 22h-8.981a9.987 9.987 0 0 0 3.668-6.766A7.98 7.98 0 0 0 19 13c-1.465 0-2.818-.476-3.917-1.279A7.995 7.995 0 0 0 20 7c0-2.126-.84-4.057-2.2-5.472A5.994 5.994 0 0 1 22 7c0 3.267-2.089 6.06-5.007 7.092A7.963 7.963 0 0 1 17.363 15.233z" fill="currentColor"/>
      </svg>
    </div>
    <div class="stats-info">
      <span class="stats-title">Users</span>
      <h3 class="stats-value">14,854</h3>
      <div class="stats-change positive">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16">
          <path fill="none" d="M0 0h24v24H0z"/>
          <path d="M12.9 6.858l4.242 4.243L7.242 21H3v-4.243l9.9-9.9zm1.414-1.414l2.121-2.122a1 1 0 0 1 1.414 0l2.829 2.829a1 1 0 0 1 0 1.414l-2.122 2.121-4.242-4.242z" fill="currentColor"/>
        </svg>
        <span>+7.2%</span>
      </div>
    </div>
  </div>

<div class="stats-card">
    <div class="icon-container orange">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
        <path fill="none" d="M0 0h24v24H0z"/>
        <path d="M13 21V11h8v10h-8zM3 13V3h8v10H3zm6-2V5H5v6h4zM3 21v-6h8v6H3zm2-2h4v-2H5v2zm10 0h4v-6h-4v6zM13 3h8v6h-8V3zm2 2v2h4V5h-4z" fill="currentColor"/>
      </svg>
    </div>
    <div class="stats-info">
      <span class="stats-title">Conversion</span>
      <h3 class="stats-value">6.28%</h3>
      <div class="stats-change negative">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16">
          <path fill="none" d="M0 0h24v24H0z"/>
          <path d="M12.9 6.858l4.242 4.243L7.242 21H3v-4.243l9.9-9.9zm1.414-1.414l2.121-2.122a1 1 0 0 1 1.414 0l2.829 2.829a1 1 0 0 1 0 1.414l-2.122 2.121-4.242-4.242z" fill="currentColor" transform="rotate(90, 12, 12)"/>
        </svg>
        <span>-2.3%</span>
      </div>
    </div>
  </div>

<div class="stats-card">
    <div class="icon-container green">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
        <path fill="none" d="M0 0h24v24H0z"/>
        <path d="M5 8h14V5H5v3zm0 4h14v-3H5v3zm0 4h14v-3H5v3zm0 4h14v-3H5v3zM4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z" fill="currentColor"/>
      </svg>
    </div>
    <div class="stats-info">
      <span class="stats-title">Orders</span>
      <h3 class="stats-value">1,482</h3>
      <div class="stats-change positive">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16">
          <path fill="none" d="M0 0h24v24H0z"/>
          <path d="M12.9 6.858l4.242 4.243L7.242 21H3v-4.243l9.9-9.9zm1.414-1.414l2.121-2.122a1 1 0 0 1 1.414 0l2.829 2.829a1 1 0 0 1 0 1.414l-2.122 2.121-4.242-4.242z" fill="currentColor"/>
        </svg>
        <span>+8.7%</span>
      </div>
    </div>
  </div>
</div>

Related Examples

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

3 months 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

4 months 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

3 months 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

3 months ago
KPI Blocks for Dashboard
Showcase your business metrics with this elegant KPI block group featuring trend indicators, percentages, and responsive design.

Author:
Priya Sharma

4 months ago
Dark Theme Statistics Display Cards

Author:
Maya Johnson

3 months ago
Modern Info Cards with Hover Effects
A set of clean, modern information cards with smooth hover effects to showcase your content in an engaging way.

Author:
Julian Parker

3 months ago
Admin Panel Statistic Cards

Author:
Anonymous

4 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

3 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

3 months 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

4 months ago
Animated Profile Card with Hover Effects and Social Links

Author:
Priya Sharma

5 months ago

Didn't find component you were looking for?

Search from 500+ components