Create a dynamically sized, colored card with safe-area awareness.

by Newton Anbarasu

HTML

<div class="card">Dynamic spacing & safe-area aware</div>

<style>
:root {
  --gap: 2rem;
  --radius: 1.5rem;
  --color-primary: #0066ff;
}

/* Dynamic responsive spacing */
.card {
  padding: calc(var(--gap) / 2) var(--gap);
  margin: calc(var(--gap) * 2);
  background: var(--color-primary);
  color: white;
  border-radius: var(--radius);
  font-family: system-ui;
}

/* iPhone notch / Android safe area */
@supports (padding: max(0px)) {
  .card {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
}
</style>