Whitespace

Deliberate empty space.

html

<div class="ws-wrap" role="img" aria-label="Two identical stacks of cards side by side; the left uses tight fixed spacing, the right uses the adjustable generous spacing">
  <div class="ws-cols">
    <div class="ws-col">
      <p class="ws-label">tight (8px)</p>
      <div class="ws-card" style="background:#F5C2E0;border-radius:8px;margin-bottom:8px;">Room to breathe</div>
      <div class="ws-card" style="background:#F5C2E0;border-radius:8px;margin-bottom:8px;">Room to breathe</div>
      <div class="ws-card" style="background:#F5C2E0;border-radius:8px;">Room to breathe</div>
    </div>
    <div class="ws-col">
      <p class="ws-label">generous (28px)</p>
      <div class="ws-card" style="background:#F5C2E0;border-radius:8px;margin-bottom:28px;">Room to breathe</div>
      <div class="ws-card" style="background:#F5C2E0;border-radius:8px;margin-bottom:28px;">Room to breathe</div>
      <div class="ws-card" style="background:#F5C2E0;border-radius:8px;">Room to breathe</div>
    </div>
  </div>
</div>
<style>
.ws-wrap { font: 12px/1.4 system-ui, sans-serif; color: #241430; width: 320px; }
.ws-cols { display: flex; gap: 16px; }
.ws-col { flex: 1; background: #FAF7F2; border: 1.5px dashed #24143055; border-radius: 8px; padding: 10px; box-sizing: border-box; }
.ws-label { margin: 0 0 8px; font-size: 11px; color: #241430aa; }
.ws-card { padding: 10px; font-weight: 600; font-size: 11px; box-sizing: border-box; }
</style>

tailwind

<div class="font-sans text-[#241430] w-[320px]" role="img" aria-label="Two identical stacks of cards side by side; the left uses tight fixed spacing, the right uses the adjustable generous spacing">
  <div class="flex gap-4">
    <div class="flex-1 bg-[#FAF7F2] border-[1.5px] border-dashed border-[#24143055] rounded-lg p-2.5 box-border">
      <p class="m-0 mb-2 text-[11px] text-[#241430aa]">tight (8px)</p>
      <div class="p-2.5 font-semibold text-[11px] box-border mb-2" style="background:#F5C2E0;border-radius:8px;">Room to breathe</div>
      <div class="p-2.5 font-semibold text-[11px] box-border mb-2" style="background:#F5C2E0;border-radius:8px;">Room to breathe</div>
      <div class="p-2.5 font-semibold text-[11px] box-border" style="background:#F5C2E0;border-radius:8px;">Room to breathe</div>
    </div>
    <div class="flex-1 bg-[#FAF7F2] border-[1.5px] border-dashed border-[#24143055] rounded-lg p-2.5 box-border">
      <p class="m-0 mb-2 text-[11px] text-[#241430aa]">generous (28px)</p>
      <div class="p-2.5 font-semibold text-[11px] box-border" style="background:#F5C2E0;border-radius:8px;margin-bottom:28px;">Room to breathe</div>
      <div class="p-2.5 font-semibold text-[11px] box-border" style="background:#F5C2E0;border-radius:8px;margin-bottom:28px;">Room to breathe</div>
      <div class="p-2.5 font-semibold text-[11px] box-border" style="background:#F5C2E0;border-radius:8px;">Room to breathe</div>
    </div>
  </div>
</div>

react

export function Whitespace({
  spacing = 28,
  text = "Room to breathe",
  accent = "#F5C2E0",
  radius = 8,
}) {
  const col = { flex: 1, background: "#FAF7F2", border: "1.5px dashed #24143055", borderRadius: 8, padding: 10, boxSizing: "border-box" };
  const label = { margin: "0 0 8px", fontSize: 11, color: "#241430aa" };
  const card = (mb) => ({ background: accent, borderRadius: radius, padding: 10, fontWeight: 600, fontSize: 11, boxSizing: "border-box", marginBottom: mb });
  return (
    <div style={{ font: "12px/1.4 system-ui, sans-serif", color: "#241430", width: 320 }}
      role="img" aria-label="Two identical stacks of cards side by side; the left uses tight fixed spacing, the right uses the adjustable generous spacing">
      <div style={{ display: "flex", gap: 16 }}>
        <div style={col}>
          <p style={label}>tight (8px)</p>
          <div style={card(8)}>{text}</div>
          <div style={card(8)}>{text}</div>
          <div style={card(0)}>{text}</div>
        </div>
        <div style={col}>
          <p style={label}>generous ({spacing}px)</p>
          <div style={card(spacing)}>{text}</div>
          <div style={card(spacing)}>{text}</div>
          <div style={card(0)}>{text}</div>
        </div>
      </div>
    </div>
  );
}