Stack

Consistent vertical/horizontal arrangement.

html

<div class="stack-demo stack-demo--vertical" style="gap:8px;">
  <div class="stack-demo__item" style="border-color:#D9C8F0;">Item 1</div>
  <div class="stack-demo__item" style="border-color:#D9C8F0;">Item 2</div>
  <div class="stack-demo__item" style="border-color:#D9C8F0;">Item 3</div>
</div>
<style>
.stack-demo { display: flex; font: 13px system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; }
.stack-demo--vertical { flex-direction: column; }
.stack-demo--horizontal { flex-direction: row; }
.stack-demo__item { box-sizing: border-box; padding: 8px 12px; background: #fff; border: 1.5px solid; border-radius: 6px; flex: 1; text-align: center; }
</style>

tailwind

<div class="flex font-sans text-[13px] text-[#241430] bg-[#FAF7F2] p-4 stack-tw stack-tw--vertical" style="gap:8px;">
  <div class="box-border px-3 py-2 bg-white border-[1.5px] rounded-md flex-1 text-center" style="border-color:#D9C8F0;">Item 1</div>
  <div class="box-border px-3 py-2 bg-white border-[1.5px] rounded-md flex-1 text-center" style="border-color:#D9C8F0;">Item 2</div>
  <div class="box-border px-3 py-2 bg-white border-[1.5px] rounded-md flex-1 text-center" style="border-color:#D9C8F0;">Item 3</div>
</div>
<style>
.stack-tw--vertical { flex-direction: column; }
.stack-tw--horizontal { flex-direction: row; }
</style>

react

export function Stack({
  label = "Item",
  direction = "vertical",
  gap = 8,
  accent = "#D9C8F0",
}) {
  return (
    <div style={{ display: "flex", flexDirection: direction === "horizontal" ? "row" : "column", gap, fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430", background: "#FAF7F2", padding: 16 }}>
      {[1, 2, 3].map((n) => (
        <div key={n} style={{ boxSizing: "border-box", padding: "8px 12px", background: "#fff", border: `1.5px solid ${accent}`, borderRadius: 6, flex: 1, textAlign: "center" }}>{label} {n}</div>
      ))}
    </div>
  );
}