Free Section
Analytics Metrics Grid with Sparklines
A 3-card analytics dashboard section with metric figures, monthly percentage gains, and CSS sparkline bars.
Colours in this gradient
#090d16#3b82f6#10b981#ffffff
background: ;The code
Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.
<section class="metrics-grid-sec">
<div class="mg-header">
<span class="mg-badge">Telemetry & Health</span>
<h2>Real-Time Network Performance</h2>
</div>
<div class="mg-cards">
<div class="mg-card">
<div class="mg-top">
<span class="mg-title">Total Edge Queries</span>
<span class="mg-gain">+24.8%</span>
</div>
<div class="mg-val">1.48B</div>
<div class="mg-spark">
<div class="sp-bar" style="height: 35%;"></div>
<div class="sp-bar" style="height: 50%;"></div>
<div class="sp-bar" style="height: 40%;"></div>
<div class="sp-bar" style="height: 65%;"></div>
<div class="sp-bar" style="height: 80%;"></div>
<div class="sp-bar sp-hi" style="height: 100%;"></div>
</div>
</div>
<div class="mg-card">
<div class="mg-top">
<span class="mg-title">Avg Vector Latency</span>
<span class="mg-gain mg-green">-18.4%</span>
</div>
<div class="mg-val">1.2ms</div>
<div class="mg-spark">
<div class="sp-bar" style="height: 85%;"></div>
<div class="sp-bar" style="height: 70%;"></div>
<div class="sp-bar" style="height: 55%;"></div>
<div class="sp-bar" style="height: 40%;"></div>
<div class="sp-bar" style="height: 30%;"></div>
<div class="sp-bar sp-green" style="height: 20%;"></div>
</div>
</div>
<div class="mg-card">
<div class="mg-top">
<span class="mg-title">Global Cache Hit Rate</span>
<span class="mg-gain">+4.2%</span>
</div>
<div class="mg-val">99.4%</div>
<div class="mg-spark">
<div class="sp-bar" style="height: 90%;"></div>
<div class="sp-bar" style="height: 92%;"></div>
<div class="sp-bar" style="height: 94%;"></div>
<div class="sp-bar" style="height: 96%;"></div>
<div class="sp-bar" style="height: 98%;"></div>
<div class="sp-bar sp-hi" style="height: 100%;"></div>
</div>
</div>
</div>
</section>The AI prompt
Paste this into an AI coding tool to generate the same section, then ask it to adapt the colours, text or framework to your project.
Create a 3-card analytics metrics dashboard section with CSS sparklines in HTML and CSS. Requirements: - 3 responsive cards displaying key telemetry figures. - Top row with metric title and percentage gain pill. - Large numerical readout. - Mini bar sparklines inside each card showing trend progression. Return one HTML file with a <style> block.
How to build it, step by step
- 1
Use CSS grid with repeat(3, 1fr) for metric cards.
- 2
Build mini sparkline container with display: flex and align-items: flex-end.
- 3
Assign height percentage inline on each bar to represent data trends.
Customisation tips
- Highlight the final bar with an accent color and glow to represent current real-time data.