Split View

Multiple related views displayed simultaneously.

html

<div class="sv sv--horizontal" style="--accent:#F5C2E0;--ratio:40%;">
  <nav class="sv__list" aria-label="Inbox">
    <h3 class="sv__heading">Inbox</h3>
    <ul class="sv__items">
      <li aria-current="true">Q3 budget review</li>
      <li>Design crit notes</li>
      <li>Release checklist</li>
    </ul>
  </nav>
  
  <section class="sv__detail" aria-label="Message">
    <h4 class="sv__detail-heading">Q3 budget review</h4>
    <p class="sv__detail-body">Attaching the updated numbers for review before Friday's sync.</p>
  </section>
  
  
</div>
<style>
.sv { font: 13.5px/1.4 system-ui, sans-serif; color: #241430; display: flex; max-width: 440px; width: 440px; border: 1px solid #24143020; border-radius: 12px; overflow: hidden; box-sizing: border-box; }
.sv--horizontal { flex-direction: row; }
.sv--vertical { flex-direction: column; height: 320px; }
.sv__list { flex: 0 0 var(--ratio); background: #fff; padding: 12px; box-sizing: border-box; overflow: auto; }
.sv--horizontal .sv__list { border-right: 1px solid #24143020; }
.sv--vertical .sv__list { border-bottom: 1px solid #24143020; }
.sv__heading { margin: 0 0 8px; font-size: 13px; font-weight: 700; }
.sv__items { list-style: none; margin: 0; padding: 0; }
.sv__items li { padding: 6px 8px; border-radius: 6px; }
.sv__items li[aria-current="true"] { background: var(--accent); font-weight: 700; }
.sv__detail { flex: 1; padding: 14px; box-sizing: border-box; background: #FAF7F2; min-width: 0; }
.sv__detail-heading { margin: 0 0 6px; font-size: 14px; font-weight: 700; }
.sv__detail-body { margin: 0; color: #241430b3; }
.sv__detail--empty { display: grid; place-items: center; text-align: center; }
</style>

tailwind

<div class="sv-tw sv-tw--horizontal flex max-w-[440px] w-[440px] border border-[#24143020] rounded-xl overflow-hidden box-border font-sans text-[13.5px] text-[#241430]" style="--accent:#F5C2E0">
  <nav aria-label="Inbox" class="sv-tw__list bg-white p-3 box-border overflow-auto" style="flex:0 0 40%">
    <h3 class="m-0 mb-2 text-[13px] font-bold">Inbox</h3>
    <ul class="list-none m-0 p-0">
      <li aria-current="true" class="py-1.5 px-2 rounded-md font-bold" style="background:#F5C2E0">Q3 budget review</li>
      <li class="py-1.5 px-2 rounded-md">Design crit notes</li>
      <li class="py-1.5 px-2 rounded-md">Release checklist</li>
    </ul>
  </nav>
  
  <section aria-label="Message" class="flex-1 p-3.5 box-border bg-[#FAF7F2] min-w-0">
    <h4 class="m-0 mb-1.5 text-sm font-bold">Q3 budget review</h4>
    <p class="m-0 text-[#241430b3]">Attaching the updated numbers for review before Friday's sync.</p>
  </section>
  
  
</div>
<style>
.sv-tw--horizontal { flex-direction: row; }
.sv-tw--horizontal .sv-tw__list { border-right: 1px solid #24143020; }
.sv-tw--vertical { flex-direction: column; height: 320px; }
.sv-tw--vertical .sv-tw__list { border-bottom: 1px solid #24143020; }
</style>

react

export function SplitView({
  heading = "Inbox",
  orientation = "horizontal",
  accent = "#F5C2E0",
  ratio = 40,
  showSecondary = true,
}) {
  const vertical = orientation === "vertical";
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", fontSize: 13.5, color: "#241430", display: "flex", flexDirection: vertical ? "column" : "row", height: vertical ? 320 : undefined, maxWidth: 440, width: 440, border: "1px solid #24143020", borderRadius: 12, overflow: "hidden", boxSizing: "border-box" }}>
      <nav aria-label={heading} style={{ flex: `0 0 ${ratio}%`, background: "#fff", padding: 12, boxSizing: "border-box", overflow: "auto", borderRight: vertical ? "none" : "1px solid #24143020", borderBottom: vertical ? "1px solid #24143020" : "none" }}>
        <h3 style={{ margin: "0 0 8px", fontSize: 13, fontWeight: 700 }}>{heading}</h3>
        <ul style={{ listStyle: "none", margin: 0, padding: 0 }}>
          <li aria-current="true" style={{ padding: "6px 8px", borderRadius: 6, background: accent, fontWeight: 700 }}>Q3 budget review</li>
          <li style={{ padding: "6px 8px", borderRadius: 6 }}>Design crit notes</li>
          <li style={{ padding: "6px 8px", borderRadius: 6 }}>Release checklist</li>
        </ul>
      </nav>
      <section aria-label="Message" style={{ flex: 1, padding: 14, boxSizing: "border-box", background: "#FAF7F2", minWidth: 0, display: showSecondary ? "block" : "grid", placeItems: showSecondary ? undefined : "center", textAlign: showSecondary ? "left" : "center" }}>
        {showSecondary ? (
          <>
            <h4 style={{ margin: "0 0 6px", fontSize: 14, fontWeight: 700 }}>Q3 budget review</h4>
            <p style={{ margin: 0, color: "#241430b3" }}>Attaching the updated numbers for review before Friday's sync.</p>
          </>
        ) : (
          <p style={{ margin: 0, color: "#241430b3" }}>Select an item to preview it here.</p>
        )}
      </section>
    </div>
  );
}