Analytics overview
- grid-template-areas
- container queries
- CSS bar chart
Overview
- Visitors48,210+12.4%
- Sessions71,904+8.1%
- Bounce rate38.2%-2.3 pts
- Avg. session3m 12s-0.4%
Sessions this week
Traffic sources
- Organic46%
- Direct28%
- Referral16%
- Social10%
| Page | Views | Avg. time | Bounce |
|---|---|---|---|
| /pricing | 12,840 | 2m 41s | 31% |
| /blog/grid-guide | 9,512 | 4m 06s | 44% |
| /features | 7,233 | 1m 58s | 36% |
| /signup | 5,904 | 1m 12s | 22% |
The classic layout: KPI cards, a weekly bar chart, a share-of-traffic donut and a top pages table. The bars are an ordered list whose heights come from a custom property, so every value is real text, and the donut is a hard-stop conic-gradient with the percentages in the legend next to it.
View code
.da-an {
container: da-an / inline-size;
width: 100%;
color: #1b2130;
}
.da-an__app {
display: grid;
grid-template-columns: 200px minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr);
grid-template-areas: "side top" "side main";
height: 560px;
overflow: hidden;
border: 1px solid #dfe3ec;
border-radius: 16px;
background: #f5f7fb;
box-shadow: 0 18px 40px rgba(20, 28, 48, .08);
font-size: 14px;
line-height: 1.4;
}
.da-an__side {
grid-area: side;
display: flex;
flex-direction: column;
gap: 22px;
padding: 18px 12px;
border-right: 1px solid #e4e7ef;
background: #fff;
}
.da-an__brand {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
padding: 0 8px;
font-size: 17px;
font-weight: 700;
}
.da-an__logo {
flex: none;
width: 26px;
height: 26px;
border-radius: 8px;
background: #2f5bea;
box-shadow: inset -10px -10px 0 #e8962e;
}
.da-an__nav {
display: grid;
gap: 4px;
margin: 0;
padding: 0;
list-style: none;
}
.da-an__nav a {
position: relative;
display: flex;
align-items: center;
gap: 12px;
min-height: 40px;
padding: 0 10px;
border-radius: 10px;
color: #4a5368;
font-weight: 500;
text-decoration: none;
}
.da-an__nav svg {
flex: none;
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.da-an__nav a:hover {
background: #f0f3fa;
color: #1b2130;
}
.da-an__nav a[aria-current="page"] {
background: #e8eefe;
color: #1f43c4;
}
.da-an__nav a:focus-visible,
.da-an__range:focus-visible {
outline: 3px solid #2f5bea;
outline-offset: 2px;
}
.da-an__main:focus-visible,
.da-an__scroll:focus-visible {
outline: 3px solid #2f5bea;
outline-offset: -3px;
}
.da-an__top {
grid-area: top;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 22px;
border-bottom: 1px solid #e4e7ef;
background: #fff;
}
.da-an__title {
margin: 0;
font-family: inherit;
font-size: 20px;
font-weight: 700;
line-height: 1.2;
letter-spacing: -.01em;
color: #1b2130;
}
.da-an__range {
min-height: 36px;
padding: 0 14px;
border: 1px solid #cfd5e2;
border-radius: 9px;
background: #fff;
color: #1b2130;
font: inherit;
cursor: pointer;
}
.da-an__main {
grid-area: main;
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
align-content: start;
gap: 16px;
padding: 20px 22px;
overflow: auto;
overscroll-behavior: contain;
}
.da-an__kpis {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.da-an__kpi,
.da-an__card {
min-width: 0;
padding: 14px 16px;
border: 1px solid #e4e7ef;
border-radius: 14px;
background: #fff;
}
.da-an__kpi {
display: grid;
gap: 4px;
}
.da-an__kpi-label {
color: #5b6475;
font-size: 13px;
}
.da-an__kpi strong {
font-size: 23px;
font-variant-numeric: tabular-nums;
letter-spacing: -.01em;
}
.da-an__delta {
justify-self: start;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 8px;
border-radius: 99px;
font-size: 12px;
font-weight: 600;
}
.da-an__delta::before {
content: "";
width: 8px;
height: 7px;
background: currentColor;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.da-an__delta--up,
.da-an__delta--good {
background: #e3f5ea;
color: #0f6e3c;
}
.da-an__delta--good::before,
.da-an__delta--down::before {
rotate: 180deg;
}
.da-an__delta--down {
background: #fde8e7;
color: #b42318;
}
.da-an__card--chart {
grid-column: span 4;
}
.da-an__card--src {
grid-column: span 2;
}
.da-an__card--table {
grid-column: 1 / -1;
padding: 0;
}
.da-an__h {
margin: 0 0 14px;
font-family: inherit;
font-size: 15px;
font-weight: 600;
line-height: 1.3;
letter-spacing: 0;
color: #1b2130;
}
.da-an__bars {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
align-items: end;
gap: 8px;
height: 190px;
margin: 0;
padding: 0;
list-style: none;
}
.da-an__bars li {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
gap: 6px;
height: 100%;
}
.da-an__bar {
width: 100%;
max-width: 34px;
height: calc(var(--da-v) * .72);
border-radius: 6px 6px 2px 2px;
background: #2f5bea;
}
.da-an__bars li:nth-child(4) .da-an__bar {
background: #1a3699;
}
.da-an__val {
color: #5b6475;
font-size: 11.5px;
font-variant-numeric: tabular-nums;
}
.da-an__day {
color: #4a5368;
font-size: 12px;
}
.da-an__donut {
position: relative;
display: grid;
place-items: center;
width: min(132px, 100%);
aspect-ratio: 1;
margin: 0 auto 14px;
border-radius: 50%;
background: conic-gradient(#2f5bea 0 46%, #e8962e 0 74%, #138a72 0 90%, #9aa5bd 0);
}
.da-an__donut::before {
content: "";
position: absolute;
inset: 22%;
border-radius: 50%;
background: #fff;
}
.da-an__donut span {
position: relative;
font-weight: 700;
}
.da-an__legend {
display: grid;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
font-size: 13px;
}
.da-an__legend li {
display: flex;
align-items: center;
gap: 8px;
}
.da-an__legend i {
width: 10px;
height: 10px;
border-radius: 3px;
background: var(--da-c);
}
.da-an__legend b {
margin-left: auto;
font-variant-numeric: tabular-nums;
}
.da-an__scroll {
overflow-x: auto;
border-radius: 14px;
}
.da-an__table {
width: 100%;
border-collapse: collapse;
font-size: 13.5px;
font-variant-numeric: tabular-nums;
}
.da-an__table caption {
padding: 14px 16px 6px;
font-size: 15px;
font-weight: 600;
text-align: left;
}
.da-an__table th,
.da-an__table td {
padding: 10px 16px;
border-top: 1px solid #edf0f5;
text-align: right;
white-space: nowrap;
}
.da-an__table thead th {
border-top: 0;
color: #5b6475;
font-size: 12px;
font-weight: 600;
}
.da-an__table th:first-child {
text-align: left;
}
.da-an__table tbody th {
font-weight: 500;
}
@container da-an (max-width: 760px) {
.da-an__app {
grid-template-columns: 68px minmax(0, 1fr);
}
.da-an__side {
align-items: center;
padding: 18px 10px;
}
.da-an__brand {
padding: 0;
}
.da-an__nav a {
justify-content: center;
width: 44px;
min-height: 44px;
padding: 0;
}
.da-an__label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
}
@container da-an (max-width: 600px) {
.da-an__card--chart,
.da-an__card--src {
grid-column: 1 / -1;
}
.da-an__card--src {
display: grid;
grid-template-columns: 110px minmax(0, 1fr);
align-items: center;
gap: 0 16px;
}
.da-an__card--src .da-an__h {
grid-column: 1 / -1;
}
.da-an__donut {
margin: 0;
}
}
@container da-an (max-width: 480px) {
.da-an__app {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto minmax(0, 1fr);
grid-template-areas: "side" "top" "main";
}
.da-an__side {
flex-direction: row;
gap: 8px;
padding: 8px 10px 8px 14px;
border-right: 0;
border-bottom: 1px solid #e4e7ef;
}
.da-an__nav {
display: flex;
gap: 2px;
margin-left: auto;
}
.da-an__nav a {
width: 40px;
min-height: 40px;
}
.da-an__top {
padding: 12px 14px;
}
.da-an__title {
font-size: 18px;
}
.da-an__main {
gap: 12px;
padding: 14px;
}
.da-an__kpi strong {
font-size: 20px;
}
.da-an__bars {
gap: 4px;
}
.da-an__card--src {
grid-template-columns: 96px minmax(0, 1fr);
}
}<div class="da-an">
<div class="da-an__app">
<nav class="da-an__side" aria-label="Lumen Analytics">
<p class="da-an__brand"><span class="da-an__logo" aria-hidden="true"></span><span class="da-an__label">Lumen</span></p>
<ul class="da-an__nav">
<li><a href="#" aria-current="page"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/></svg><span class="da-an__label">Overview</span></a></li>
<li><a href="#"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="9" cy="8" r="3.5"/><path d="M2.5 20c.5-3.5 3-5.5 6.5-5.5s6 2 6.5 5.5M16 4.5a3.5 3.5 0 0 1 0 7M18 14.5c2 .6 3.3 2.5 3.5 5.5"/></svg><span class="da-an__label">Audience</span></a></li>
<li><a href="#"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="8.5"/><circle cx="12" cy="12" r="4"/></svg><span class="da-an__label">Acquisition</span></a></li>
<li><a href="#"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 3h8l4 4v14H6zM14 3v4h4M9 12h6M9 16h6"/></svg><span class="da-an__label">Reports</span></a></li>
<li><a href="#"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="3"/><path d="M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.3 5.3l2.1 2.1M16.6 16.6l2.1 2.1M5.3 18.7l2.1-2.1M16.6 7.4l2.1-2.1"/></svg><span class="da-an__label">Settings</span></a></li>
</ul>
</nav>
<div class="da-an__top">
<h4 class="da-an__title">Overview</h4>
<button class="da-an__range" type="button">Last 30 days</button>
</div>
<div class="da-an__main" tabindex="0" role="region" aria-label="Overview widgets">
<ul class="da-an__kpis">
<li class="da-an__kpi"><span class="da-an__kpi-label">Visitors</span><strong>48,210</strong><span class="da-an__delta da-an__delta--up">+12.4%</span></li>
<li class="da-an__kpi"><span class="da-an__kpi-label">Sessions</span><strong>71,904</strong><span class="da-an__delta da-an__delta--up">+8.1%</span></li>
<li class="da-an__kpi"><span class="da-an__kpi-label">Bounce rate</span><strong>38.2%</strong><span class="da-an__delta da-an__delta--good">-2.3 pts</span></li>
<li class="da-an__kpi"><span class="da-an__kpi-label">Avg. session</span><strong>3m 12s</strong><span class="da-an__delta da-an__delta--down">-0.4%</span></li>
</ul>
<div class="da-an__card da-an__card--chart">
<h5 class="da-an__h">Sessions this week</h5>
<ol class="da-an__bars" aria-label="Sessions per day">
<li style="--da-v: 68%"><span class="da-an__val">10.4k</span><span class="da-an__bar"></span><span class="da-an__day">Mon</span></li>
<li style="--da-v: 82%"><span class="da-an__val">12.6k</span><span class="da-an__bar"></span><span class="da-an__day">Tue</span></li>
<li style="--da-v: 76%"><span class="da-an__val">11.7k</span><span class="da-an__bar"></span><span class="da-an__day">Wed</span></li>
<li style="--da-v: 100%"><span class="da-an__val">15.3k</span><span class="da-an__bar"></span><span class="da-an__day">Thu</span></li>
<li style="--da-v: 71%"><span class="da-an__val">10.9k</span><span class="da-an__bar"></span><span class="da-an__day">Fri</span></li>
<li style="--da-v: 40%"><span class="da-an__val">6.1k</span><span class="da-an__bar"></span><span class="da-an__day">Sat</span></li>
<li style="--da-v: 32%"><span class="da-an__val">4.9k</span><span class="da-an__bar"></span><span class="da-an__day">Sun</span></li>
</ol>
</div>
<div class="da-an__card da-an__card--src">
<h5 class="da-an__h">Traffic sources</h5>
<div class="da-an__donut" aria-hidden="true"><span>48.2k</span></div>
<ul class="da-an__legend">
<li><i style="--da-c: #2f5bea"></i>Organic<b>46%</b></li>
<li><i style="--da-c: #e8962e"></i>Direct<b>28%</b></li>
<li><i style="--da-c: #138a72"></i>Referral<b>16%</b></li>
<li><i style="--da-c: #9aa5bd"></i>Social<b>10%</b></li>
</ul>
</div>
<div class="da-an__card da-an__card--table">
<div class="da-an__scroll" tabindex="0" role="region" aria-label="Top pages table">
<table class="da-an__table">
<caption>Top pages</caption>
<thead><tr><th scope="col">Page</th><th scope="col">Views</th><th scope="col">Avg. time</th><th scope="col">Bounce</th></tr></thead>
<tbody>
<tr><th scope="row">/pricing</th><td>12,840</td><td>2m 41s</td><td>31%</td></tr>
<tr><th scope="row">/blog/grid-guide</th><td>9,512</td><td>4m 06s</td><td>44%</td></tr>
<tr><th scope="row">/features</th><td>7,233</td><td>1m 58s</td><td>36%</td></tr>
<tr><th scope="row">/signup</th><td>5,904</td><td>1m 12s</td><td>22%</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>