This responsive block reveals secondary information on interaction, conserving space in dense layouts.
HTML
<section class="block-collapsible">
<span class="block-collapsible__title">Details</span>
<p class="block-collapsible__content">Additional info</p>
</section>CSS
.block-collapsible {
width: 200px;
padding: 0.75rem;
border-radius: 16px;
background: #f9fafb;
transition: background 150ms ease;
text-align: center;
}
.block-collapsible__title {
font-size: 13px;
font-weight: 600;
color: #111827;
}
.block-collapsible__content {
margin-top: 0.25rem;
font-size: 12px;
color: #4b5563;
opacity: 0.7;
}
.block-collapsible:hover {
background: #eef2ff;
}
@media (prefers-color-scheme: dark) {
.block-collapsible {
background: #020617;
}
.block-collapsible__title {
color: #e5e7eb;
}
.block-collapsible__content {
color: #d1d5db;
}
}Notes
- Space-efficient information reveal
- Simple hover-driven interaction
- Suitable for compact settings panels
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.