Density Aware Content Block

A compact content block that adapts spacing and hierarchy based on available width, without media queries.

HTML

<section class="block-density">
  <strong>Usage</strong>
  <span>Optimized layout</span>
</section>

<section class="block-density">
  <strong>Usage</strong>
  <span>Optimized layout</span>
</section>

CSS

.block-density {
  width: 200px;
  padding: 0.75rem;
  border-radius: 18px;
  background: #ECECEC;
  display: grid;
  gap: 0.25rem;
  container-type: inline-size;
}

@container (max-width: 180px) {
  .block-density {
    gap: 0.15rem;
  }
}

.block-density strong {
  font-size: 13px;
  color: #84934A;
}

.block-density span {
  font-size: 11px;
  color: #9ca3af;
}

.block-density {
  width: 200px;
  padding: 0.75rem;
  border-radius: 18px;
  background: #ECECEC;
  display: grid;
  gap: 0.25rem;
  container-type: inline-size;
}

@container (max-width: 180px) {
  .block-density {
    gap: 0.15rem;
  }
}

.block-density strong {
  font-size: 13px;
  color: #84934A;
}

.block-density span {
  font-size: 11px;
  color: #9ca3af;
}

Notes

• Container-query driven
• No viewport breakpoints
• Ideal for modular dashboards

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.