A responsive stat block built with pure HTML and CSS that presents key numbers, metrics, or performance indicators in a clear and scalable layout, ensuring readability and visual impact across different screen sizes without relying on JavaScript.
Usage
This component is ideal for interfaces where data visibility is critical, such as dashboards, analytics panels, landing page highlights, performance summaries, product metrics, or KPI sections that must remain legible on both desktop and mobile devices.
Implementation
The layout is implemented using CSS flexible containers, typographic scaling, and responsive alignment rules, allowing numerical values and labels to adjust proportionally while maintaining emphasis and hierarchy.
HTML
<section class="block-stat">
<span class="block-stat_value">98%</span>
<span class="block-stat_label">Uptime</span>
</section>CSS
.block-stat {
width: 200px;
padding: 0.75rem;
border-radius: 14px;
background: #f9fafb;
border: 1px solid #e5e7eb;
display: flex;
align-items: center;
justify-content: space-between;
}
.block-stat__value {
font-size: 18px;
font-weight: 700;
color: #111827;
}
.block-stat__label {
font-size: 12px;
color: #6b7280;
}
@media (prefers-color-scheme: dark) {
.block-stat {
background: #111827;
border-color: #374151;
}
.block-stat__value {
color: #e5e7eb;
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Optimized for displaying key metrics
- Scales typography for readability
- Maintains hierarchy between value and label
- Designed for dashboards and data highlights
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.