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

8614
+11% vs last month

Total Revenue

7247
+12% vs last month

Total Orders

8560
+7% vs last month

Total Growth

6036
+5% vs last month

Chart 1

Chart 2

Recent Activity

Activity 1

5 minutes ago

$889

Activity 2

52 minutes ago

$250

Activity 3

28 minutes ago

$161

Activity 4

12 minutes ago

$735

Activity 5

59 minutes ago

$603

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;
    }