This block adapts spacing and visual emphasis based on available width, maintaining clarity in tight UI previews.
HTML
<section class="block-emphasis">
<span class="block-emphasis__label">Usage</span>
<strong class="block-emphasis__value">72%</strong>
</section>CSS
.block-emphasis {
width: 200px;
padding: 0.75rem;
border-radius: 16px;
background: #ffffff;
box-shadow: 0 14px 28px rgba(0,0,0,0.12);
display: flex;
align-items: center;
justify-content: space-between;
transition: transform 150ms ease;
}
.block-emphasis:hover {
transform: translateY(-2px);
}
.block-emphasis__label {
font-size: 12px;
color: #6b7280;
}
.block-emphasis__value {
font-size: 18px;
font-weight: 700;
color: #111827;
}
@media (prefers-color-scheme: dark) {
.block-emphasis {
background: #020617;
}
.block-emphasis__label {
color: #9ca3af;
}
.block-emphasis__value {
color: #e5e7eb;
}
}Notes
- Responsive without media queries
- Clear value emphasis
- Ideal for dashboards and KPIs
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.