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

4581
+18% vs last month

Total Revenue

7362
+18% vs last month

Total Orders

1690
+6% vs last month

Total Growth

6332
+1% vs last month

Chart 1

Chart 2

Recent Activity

Activity 1

23 minutes ago

$720

Activity 2

47 minutes ago

$551

Activity 3

52 minutes ago

$697

Activity 4

44 minutes ago

$607

Activity 5

36 minutes ago

$728

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