Analytics Starter Template — Light layout with KPI cards, trend chart, and top-sources table. Wire the chart to your analytics data.

Analytics overview

Traffic, conversions, and revenue at a glance.

Page views
1.24M
▲ 18%
Visitors
312k
▲ 12%
Conversion
4.2%
▲ 0.3%
Revenue
$89,400
▼ 2%

Traffic trend

Export
Traffic trend Line chart of daily sessions over two weeks. This period climbs from 32 to 91 on an arbitrary index; the previous period, shown dashed, runs from 28 to 58. 0255075100 Mar 03Mar 05Mar 07Mar 09Mar 11Mar 13Mar 15
This period Previous period

Top sources

SourceShare
Organic search52%
Direct24%
Referral15%
App shell markup
<div class="app">
  <aside class="sidebar" aria-label="Main navigation">
    <div class="sidebar-brand">ANALYTICS</div>
    <nav class="sidebar-section">
      <a class="sidebar-link active" href="#" aria-current="page">…</a>
    </nav>
  </aside>

  <div class="main">
    <header class="navbar">
      <span class="nav-spacer"></span>
      <button class="theme-toggle" type="button" data-theme-toggle aria-label="Toggle dark mode">
        <span data-theme-state>Dark mode</span><span class="dot" aria-hidden="true"></span>
      </button>
    </header>

    <div class="content">
      <div class="page-head">
        <h1>Analytics overview</h1>
        <p>Traffic, conversions, and revenue at a glance.</p>
      </div>
      <div class="content-grid">
        <section class="card card-wide">…trend chart…</section>
        <section class="card">…sources table…</section>
      </div>
    </div>
  </div>
</div>

<!-- .card-wide spans both columns; --grid-cols is the only per-page knob
     (2fr 1fr here, e.g. style="--grid-cols: 3fr 2fr" for a denser split).
     At 900px the sheet stacks .app and collapses .content-grid to 1fr. -->