Layout Component

Controls structure/positioning.

<row gap=10>

A B C

html

<div class="layc">
  <p class="layc__name">&lt;row gap=10&gt;</p>
  <div class="layc__box layc__box--row layc__box--bordered" style="gap:10px;">
    <span class="layc__item" style="background:#BFD9F2;">A</span>
    <span class="layc__item" style="background:#BFD9F2;">B</span>
    <span class="layc__item" style="background:#BFD9F2;">C</span>
  </div>
</div>
<style>
.layc { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.layc__name { margin: 0 0 12px; font: 11px ui-monospace, monospace; color: #24143099; }
.layc__box { display: flex; box-sizing: border-box; padding: 8px; }
.layc__box--stack { flex-direction: column; }
.layc__box--row { flex-direction: row; }
.layc__box--grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.layc__box--bordered { border: 1.5px dashed #24143030; border-radius: 8px; }
.layc__item { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 6px; font-weight: 700; color: #241430; }
.layc__box--grid .layc__item { width: auto; }
</style>

tailwind

<div class="font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border">
  <p class="m-0 mb-3 font-mono text-[11px] text-[#24143099]">&lt;row gap=10&gt;</p>
  <div class="layctw layctw--row flex box-border p-2 border border-dashed border-[#24143030] rounded-lg" style="gap:10px;">
    <span class="flex items-center justify-center w-11 h-11 rounded-md font-bold" style="background:#BFD9F2;">A</span>
    <span class="flex items-center justify-center w-11 h-11 rounded-md font-bold" style="background:#BFD9F2;">B</span>
    <span class="flex items-center justify-center w-11 h-11 rounded-md font-bold" style="background:#BFD9F2;">C</span>
  </div>
</div>
<style>
.layctw--stack { flex-direction: column; }
.layctw--row { flex-direction: row; }
.layctw--grid { display: grid; grid-template-columns: repeat(3, 1fr); }
</style>

react

export function LayoutComponent({
  layoutType = "row",
  gap = 10,
  accent = "#BFD9F2",
  showBorders = true,
}) {
  const boxStyle = layoutType === "grid"
    ? { display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap }
    : { display: "flex", flexDirection: layoutType === "stack" ? "column" : "row", gap };
  const item = { display: "flex", alignItems: "center", justifyContent: "center", width: layoutType === "grid" ? "auto" : 44, height: 44, borderRadius: 6, fontWeight: 700, background: accent };
  return (
    <div style={{ font: "12px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 12, width: 300, boxSizing: "border-box" }}>
      <p style={{ margin: "0 0 12px", fontFamily: "ui-monospace, monospace", fontSize: 11, color: "#24143099" }}>&lt;{layoutType} gap={gap}&gt;</p>
      <div style={{ ...boxStyle, boxSizing: "border-box", padding: 8, border: showBorders ? "1.5px dashed #24143030" : "none", borderRadius: showBorders ? 8 : 0 }}>
        <span style={item}>A</span>
        <span style={item}>B</span>
        <span style={item}>C</span>
      </div>
    </div>
  );
}