A signal density metric card built with pure HTML and CSS that visualizes compact data signals and metric intensity in a structured card layout, without relying on JavaScript or external libraries.
Usage
This component is ideal for interfaces where dense metric representation is required, such as analytics dashboards, monitoring panels, performance summaries, or data-heavy UI sections.
Implementation
The metric layout is created using CSS grid or flexbox, spacing control, and visual indicators, allowing multiple signals or values to be displayed clearly while keeping the component lightweight and reusable.
HTML
<div class="card-signal">
<span class="card-signal__label">Latency</span>
<strong class="card-signal__value">120ms</strong>
<span class="card-signal__delta">−12%</span>
</div>CSS
.card-signal {
width: 200px;
padding: 0.8rem;
border-radius: 18px;
background: #ffffff;
display: grid;
gap: 0.25rem;
text-align: center;
box-shadow: 0 18px 36px rgba(0,0,0,0.6);
}
.card-signal__label {
font-size: 11px;
color: #9ca3af;
}
.card-signal__value {
font-size: 20px;
font-weight: 700;
color: #000000;
}
.card-signal__delta {
font-size: 11px;
color: #4ade80;
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Designed for compact metric and signal display
- Enhances data readability in dense layouts
- Lightweight and scalable card structure
- Works in modern browsers
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.