Back to Examples

Stats Dashboard Layout

Various statistics dashboard layouts using flexbox. Features metric cards, data visualizations, and KPI displays. Perfect for analytics dashboards and data-rich interfaces.

PREVIEW

Total Users

1876
+9% vs last month

Total Revenue

1532
+15% vs last month

Total Orders

8977
+7% vs last month

Total Growth

7724
+18% vs last month

Chart 1

Chart 2

Recent Activity

Activity 1

5 minutes ago

$22

Activity 2

9 minutes ago

$806

Activity 3

23 minutes ago

$504

Activity 4

16 minutes ago

$347

Activity 5

9 minutes ago

$725

CODE

/* Stats Grid */
    .stats-grid {
      display: grid;
      gap: 1.5rem;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    /* Chart Container */
    .chart-container {
      display: flex;
      flex-direction: column;
    }

    /* Chart Controls */
    .chart-controls {
      display: flex;
      gap: 0.5rem;
    }

    /* Activity List */
    .activity-list {
      display: flex;
      flex-direction: column;
    }

    /* Activity Item */
    .activity-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    /* Stat Card */
    .stat-card {
      display: flex;
      flex-direction: column;
    }

    .stat-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }