Column

Vertical grouping.

html

<div class="col-demo">
  <h4 class="col-demo__heading">Checklist</h4>
  <div class="col-demo__col col-demo__col--stretch" style="gap:10px;">
    <div class="col-demo__item" style="border-color:#A8E6C1;">First item</div>
    <div class="col-demo__item" style="border-color:#A8E6C1;">Second item</div>
    <div class="col-demo__item" style="border-color:#A8E6C1;">Third item, a touch longer</div>
  </div>
</div>
<style>
.col-demo { font: 14px system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; }
.col-demo__heading { margin: 0 0 10px; font-size: 15px; }
.col-demo__col { display: flex; flex-direction: column; }
.col-demo__col--start { align-items: flex-start; }
.col-demo__col--center { align-items: center; }
.col-demo__item { box-sizing: border-box; padding: 8px 12px; background: #fff; border: 1px solid; border-radius: 6px; }
.col-demo__col--start .col-demo__item, .col-demo__col--center .col-demo__item { width: auto; }
.col-demo__col--divided .col-demo__item { border-radius: 0; border: none; border-bottom: 1px solid; padding: 8px 4px; }
.col-demo__col--divided .col-demo__item:last-child { border-bottom: none; }
</style>

tailwind

<div class="font-sans text-sm text-[#241430] bg-[#FAF7F2] p-4">
  <h4 class="m-0 mb-2.5 text-[15px]">Checklist</h4>
  <div class="flex flex-col col-tw col-tw--stretch" style="gap:10px;">
    <div class="box-border px-3 py-2 bg-white border rounded-md" style="border-color:#A8E6C1;">First item</div>
    <div class="box-border px-3 py-2 bg-white border rounded-md" style="border-color:#A8E6C1;">Second item</div>
    <div class="box-border px-3 py-2 bg-white border rounded-md" style="border-color:#A8E6C1;">Third item, a touch longer</div>
  </div>
</div>
<style>
.col-tw--start { align-items: flex-start; }
.col-tw--center { align-items: center; }
.col-tw--divided > div { border-radius: 0 !important; border: none !important; border-bottom: 1px solid !important; padding: 8px 4px !important; }
.col-tw--divided > div:last-child { border-bottom: none !important; }
</style>

react

export function Column({
  heading = "Checklist",
  gap = 10,
  align = "stretch",
  accent = "#A8E6C1",
  divider = false,
}) {
  const items = ["First item", "Second item", "Third item, a touch longer"];
  const alignItems = { stretch: "stretch", start: "flex-start", center: "center" }[align];
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", background: "#FAF7F2", padding: 16 }}>
      <h4 style={{ margin: "0 0 10px", fontSize: 15 }}>{heading}</h4>
      <div style={{ display: "flex", flexDirection: "column", alignItems, gap }}>
        {items.map((label, i) => (
          <div key={i} style={divider
            ? { borderBottom: i < items.length - 1 ? `1px solid ${accent}` : "none", padding: "8px 4px" }
            : { boxSizing: "border-box", padding: "8px 12px", background: "#fff", border: `1px solid ${accent}`, borderRadius: 6 }}>
            {label}
          </div>
        ))}
      </div>
    </div>
  );
}