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

4191
+4% vs last month

Total Revenue

2801
+9% vs last month

Total Orders

9596
+18% vs last month

Total Growth

9829
+20% vs last month

Chart 1

Chart 2

Recent Activity

Activity 1

30 minutes ago

$133

Activity 2

52 minutes ago

$564

Activity 3

23 minutes ago

$659

Activity 4

52 minutes ago

$604

Activity 5

37 minutes ago

$482

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