→ 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

10 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

10 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

10 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

10 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

10 months ago
Dark Theme Statistics Display Cards

Author:
Maya Johnson

10 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

10 months ago
Admin Panel Statistic Cards

Author:
Anonymous

11 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

10 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

10 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

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

Author:
Priya Sharma

11 months ago

Explore components by Tags

Didn't find component you were looking for?

Search from 500+ components