→ Marcus Thornton
→ Flexible Info Cards with Stats Display

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.

This Example is contributed by Marcus Thornton, on 26-Mar-2025. It is responsive. similar terms for this example are Admin Dashboard, User dashboard

Dashboard Analytics Metric Stat Card

Author Marcus Thornton

Fork Fullscreen

<div class="card-container">
  <div class="info-card">
    <div class="card-icon">
      <svg viewBox="0 0 24 24" width="24" height="24">
        <path fill="currentColor" d="M12,4C7.58,4,4,7.58,4,12s3.58,8,8,8s8-3.58,8-8S16.42,4,12,4z M13,17h-2v-6h2V17z M13,9h-2V7h2V9z"/>
      </svg>
    </div>
    <h3 class="card-title">Monthly Visits</h3>
    <div class="card-value">24,589</div>
    <div class="card-change positive">+12.5%</div>
    <div class="card-detail">Compared to last month</div>
    <div class="card-expand">
      <div class="expand-content">
        <p>Average visit duration: 3m 24s</p>
        <p>Peak time: 2-4 PM weekdays</p>
      </div>
    </div>
  </div>
  
  <div class="info-card">
    <div class="card-icon">
      <svg viewBox="0 0 24 24" width="24" height="24">
        <path fill="currentColor" d="M19,3H5C3.89,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M16,17H8c-0.55,0-1-0.45-1-1 s0.45-1,1-1h8c0.55,0,1,0.45,1,1S16.55,17,16,17z M16,13H8c-0.55,0-1-0.45-1-1s0.45-1,1-1h8c0.55,0,1,0.45,1,1S16.55,13,16,13z M16,9H8C7.45,9,7,8.55,7,8s0.45-1,1-1h8c0.55,0,1,0.45,1,1S16.55,9,16,9z"/>
      </svg>
    </div>
    <h3 class="card-title">New Signups</h3>
    <div class="card-value">1,856</div>
    <div class="card-change negative">-3.2%</div>
    <div class="card-detail">Compared to last month</div>
    <div class="card-expand">
      <div class="expand-content">
        <p>Conversion rate: 4.3%</p>
        <p>Average acquisition cost: $12.40</p>
      </div>
    </div>
  </div>
  
  <div class="info-card">
    <div class="card-icon">
      <svg viewBox="0 0 24 24" width="24" height="24">
        <path fill="currentColor" d="M11.8,10.9c-2.27-0.59-3-1.2-3-2.15c0-1.09,1.01-1.85,2.7-1.85c1.78,0,2.44,0.85,2.5,2.1h2.21 c-0.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94,0.42-3.5,1.68-3.5,3.61c0,2.31,1.91,3.46,4.7,4.13c2.5,0.6,3,1.48,3,2.41 c0,0.69-0.49,1.79-2.7,1.79c-2.06,0-2.87-0.92-2.98-2.1H6.32c0.12,2.19,1.76,3.42,3.68,3.83V21h3v-2.15 c1.95-0.37,3.5-1.5,3.5-3.55C16.5,12.46,14.07,11.49,11.8,10.9z"/>
      </svg>
    </div>
    <h3 class="card-title">Revenue</h3>
    <div class="card-value">$158,742</div>
    <div class="card-change positive">+8.7%</div>
    <div class="card-detail">Compared to last month</div>
    <div class="card-expand">
      <div class="expand-content">
        <p>Average order value: $86.32</p>
        <p>Recurring revenue: 67%</p>
      </div>
    </div>
  </div>
  
  <div class="info-card">
    <div class="card-icon">
      <svg viewBox="0 0 24 24" width="24" height="24">
        <path fill="currentColor" d="M12,2C6.48,2,2,6.48,2,12c0,5.52,4.48,10,10,10s10-4.48,10-10C22,6.48,17.52,2,12,2z M13,5.3l1.35-0.95 c1.82,0.56,3.37,1.76,4.38,3.34l-0.39,1.34l-1.35,0.46L13,6.7V5.3z M9.65,4.35L11,5.3v1.4L7.01,9.49L5.66,9.03L5.27,7.69 C6.28,6.12,7.83,4.92,9.65,4.35z M7.08,17.11l-1.14,0.1C4.73,15.81,4,13.99,4,12c0-0.12,0.01-0.23,0.02-0.35l1-0.73L6.4,11.4 l1.46,4.34L7.08,17.11z M14.5,19.59C13.71,19.85,12.87,20,12,20s-1.71-0.15-2.5-0.41l-0.69-1.49L9.45,17h5.11l0.64,1.11 L14.5,19.59z M14.27,15H9.73l-1.35-4.02L12,8.44l3.63,2.54L14.27,15z M18.06,17.21l-1.14-0.1l-0.79-1.37l1.46-4.34l1.39-0.47 l1,0.73C19.99,11.77,20,11.88,20,12C20,13.99,19.27,15.81,18.06,17.21z"/>
      </svg>
    </div>
    <h3 class="card-title">Active Users</h3>
    <div class="card-value">8,421</div>
    <div class="card-change positive">+5.3%</div>
    <div class="card-detail">Compared to last month</div>
    <div class="card-expand">
      <div class="expand-content">
        <p>Daily active users: 3,245</p>
        <p>Engagement rate:.69%</p>
      </div>
    </div>
  </div>
</div>

Related Examples

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
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
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
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
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
KPI Blocks for Dashboard
Showcase your business metrics with this elegant KPI block group featuring trend indicators, percentages, and responsive design.

Author:
Priya Sharma

1 month 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

1 month ago
Glassmorphic Card Dashboard Grid with Hover Effects
Premium dashboard component with frosted glass effects, dynamic metrics display, and interactive hover states

Author:
Prajwal Hallale

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
Animated Profile Card with Hover Effects and Social Links

Author:
Priya Sharma

2 months ago
Feature Showcase Grid with Icons
A responsive grid layout showcasing key features with accompanying icons to enhance visual appeal and improve user engagement.

Author:
Anonymous

1 month ago

Didn't find component you were looking for?

Search from 500+ components