A distributed meta bar built with pure HTML and CSS that places multiple metadata items evenly across a horizontal bar, ensuring each piece of information has equal visual weight without crowding or reliance on JavaScript.
Usage
This component is ideal for layouts where multiple metadata points should be visible at once, such as article headers (author, date, reading time), dashboards (status, version, environment), or component previews where supporting info needs clear separation.
Implementation
The bar is implemented using CSS Flexbox with space distribution properties and consistent alignment, allowing metadata items to spread evenly while remaining responsive and readable on smaller screens.
HTML
<div class="flex-meta">
<span>CPU</span>
<span>RAM</span>
<span>Disk</span>
</div>CSS
.flex-meta {
width: 200px;
padding: 0.5rem 0.75rem;
border-radius: 14px;
background: #ffffff;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
text-align: center;
}
.flex-meta span {
font-size: 12px;
font-weight: 500;
color: #374151;
transition:
transform 150ms ease,
color 150ms ease;
}
.flex-meta span:hover {
transform: translateY(-1px);
color: #111827;
}
@media (prefers-color-scheme: dark) {
.flex-meta {
background: #020617;
box-shadow:
0 12px 24px rgba(0, 0, 0, 0.6),
inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.flex-meta span {
color: #cbd5f5;
}
.flex-meta span:hover {
color: #f9fafb;
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Evenly distributes metadata across the bar
- Keeps information scannable and balanced
- Prevents clustering of meta items
- Designed for headers, cards, and detail rows
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.