Density

Amount of information/spacing in a component.

html

<ul class="density density--comfortable density--divided" role="img" aria-label="List at comfortable density">
  <li class="density__row"><span class="density__dot" style="background:#BFD9F2;"></span>List item one</li>
  <li class="density__row"><span class="density__dot" style="background:#BFD9F2;"></span>List item two</li>
  <li class="density__row"><span class="density__dot" style="background:#BFD9F2;"></span>List item three</li>
</ul>
<style>
.density { font: 14px system-ui, sans-serif; color: #241430; background: #FAF7F2; width: 280px; margin: 0; padding: 8px; border-radius: 12px; list-style: none; box-sizing: border-box; }
.density__row { display: flex; align-items: center; gap: 10px; }
.density--divided .density__row { border-bottom: 1px solid #24143015; }
.density--divided .density__row:last-child { border-bottom: none; }
.density__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.density--compact .density__row { padding: 4px 8px; font-size: 12px; }
.density--comfortable .density__row { padding: 10px 8px; font-size: 14px; }
.density--spacious .density__row { padding: 18px 8px; font-size: 15px; }
</style>

tailwind

<ul class="densitytw densitytw--comfortable densitytw--divided font-sans text-[#241430] bg-[#FAF7F2] w-[280px] m-0 p-2 rounded-xl list-none box-border" role="img" aria-label="List at comfortable density">
  <li class="flex items-center gap-2.5"><span class="w-2 h-2 rounded-full shrink-0" style="background:#BFD9F2;"></span>List item one</li>
  <li class="flex items-center gap-2.5"><span class="w-2 h-2 rounded-full shrink-0" style="background:#BFD9F2;"></span>List item two</li>
  <li class="flex items-center gap-2.5"><span class="w-2 h-2 rounded-full shrink-0" style="background:#BFD9F2;"></span>List item three</li>
</ul>
<style>
.densitytw--divided li { border-bottom: 1px solid #24143015; }
.densitytw--divided li:last-child { border-bottom: none; }
.densitytw--compact li { padding: 4px 8px; font-size: 12px; }
.densitytw--comfortable li { padding: 10px 8px; font-size: 14px; }
.densitytw--spacious li { padding: 18px 8px; font-size: 15px; }
</style>

react

export function Density({
  rowLabel = "List item",
  density = "comfortable",
  accent = "#BFD9F2",
  showDividers = true,
}) {
  const pad = { compact: "4px 8px", comfortable: "10px 8px", spacious: "18px 8px" }[density];
  const fontSize = { compact: 12, comfortable: 14, spacious: 15 }[density];
  const rowStyle = { display: "flex", alignItems: "center", gap: 10, padding: pad, fontSize, borderBottom: showDividers ? "1px solid #24143015" : "none" };
  const dot = <span style={{ width: 8, height: 8, borderRadius: "50%", flexShrink: 0, background: accent }} />;
  return (
    <ul role="img" aria-label={`List at ${density} density`} style={{ font: "14px system-ui, sans-serif", color: "#241430", background: "#FAF7F2", width: 280, margin: 0, padding: 8, borderRadius: 12, listStyle: "none", boxSizing: "border-box" }}>
      <li style={rowStyle}>{dot}{rowLabel} one</li>
      <li style={rowStyle}>{dot}{rowLabel} two</li>
      <li style={{ ...rowStyle, borderBottom: "none" }}>{dot}{rowLabel} three</li>
    </ul>
  );
}