Inspector Pattern

Selected object properties shown alongside content.

html

<div class="insp">
  <main class="insp__main" aria-label="Layers" style="--accent:#D9C8F0;">
    <h3 class="insp__heading">Layers</h3>
    <ul class="insp__layers">
      <li aria-current="true">Header banner</li>
      <li>Hero image</li>
      <li>Footer</li>
    </ul>
  </main>
  
  <aside class="insp__aside" aria-label="Inspector" style="--w:160px;">
    <h4 class="insp__aside-heading">Properties</h4>
    <dl class="insp__props">
      <div><dt>Name</dt><dd>Header banner</dd></div>
      <div><dt>Opacity</dt><dd>100%</dd></div>
      <div><dt>Locked</dt><dd>No</dd></div>
    </dl>
  </aside>
  
</div>
<style>
.insp { font: 13.5px/1.4 system-ui, sans-serif; color: #241430; display: flex; max-width: 420px; width: 420px; border: 1px solid #24143020; border-radius: 12px; overflow: hidden; box-sizing: border-box; }
.insp__main { flex: 1; padding: 14px; background: #fff; min-width: 0; }
.insp__heading { margin: 0 0 10px; font-size: 14px; font-weight: 700; }
.insp__layers { list-style: none; margin: 0; padding: 0; }
.insp__layers li { padding: 6px 8px; border-radius: 6px; }
.insp__layers li[aria-current="true"] { background: var(--accent); font-weight: 700; }
.insp__aside { width: var(--w); flex-shrink: 0; background: #FAF7F2; border-left: 1px solid #24143020; padding: 14px; box-sizing: border-box; }
.insp__aside-heading { margin: 0 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #241430a0; }
.insp__props { margin: 0; }
.insp__props div { padding: 4px 0; border-bottom: 1px solid #24143014; }
.insp__props dt { font-size: 11px; color: #241430a0; margin: 0; }
.insp__props dd { margin: 1px 0 0; font-weight: 600; }
</style>

tailwind

<div class="insp-tw flex max-w-[420px] w-[420px] border border-[#24143020] rounded-xl overflow-hidden box-border font-sans text-[13.5px] text-[#241430]">
  <main aria-label="Layers" class="flex-1 p-3.5 bg-white min-w-0" style="--accent:#D9C8F0">
    <h3 class="m-0 mb-2.5 text-sm font-bold">Layers</h3>
    <ul class="insp-tw__layers list-none m-0 p-0">
      <li aria-current="true" class="insp-tw__current py-1.5 px-2 rounded-md font-bold" style="background:#D9C8F0">Header banner</li>
      <li class="py-1.5 px-2 rounded-md">Hero image</li>
      <li class="py-1.5 px-2 rounded-md">Footer</li>
    </ul>
  </main>
  
  <aside aria-label="Inspector" class="flex-shrink-0 bg-[#FAF7F2] border-l border-[#24143020] p-3.5 box-border" style="width:160px">
    <h4 class="m-0 mb-2 text-xs font-bold uppercase tracking-wide text-[#241430a0]">Properties</h4>
    <dl class="m-0">
      <div class="py-1 border-b border-[#24143014]"><dt class="text-[11px] text-[#241430a0] m-0">Name</dt><dd class="mt-0.5 mb-0 font-semibold">Header banner</dd></div>
      <div class="py-1 border-b border-[#24143014]"><dt class="text-[11px] text-[#241430a0] m-0">Opacity</dt><dd class="mt-0.5 mb-0 font-semibold">100%</dd></div>
      <div class="py-1"><dt class="text-[11px] text-[#241430a0] m-0">Locked</dt><dd class="mt-0.5 mb-0 font-semibold">No</dd></div>
    </dl>
  </aside>
  
</div>

react

export function InspectorPattern({
  heading = "Layers",
  itemName = "Header banner",
  accent = "#D9C8F0",
  showInspector = true,
  panelWidth = 160,
}) {
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", fontSize: 13.5, color: "#241430", display: "flex", maxWidth: 420, width: 420, border: "1px solid #24143020", borderRadius: 12, overflow: "hidden", boxSizing: "border-box" }}>
      <main aria-label={heading} style={{ flex: 1, padding: 14, background: "#fff", minWidth: 0 }}>
        <h3 style={{ margin: "0 0 10px", fontSize: 14, 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 }}>{itemName}</li>
          <li style={{ padding: "6px 8px", borderRadius: 6 }}>Hero image</li>
          <li style={{ padding: "6px 8px", borderRadius: 6 }}>Footer</li>
        </ul>
      </main>
      {showInspector && (
        <aside aria-label="Inspector" style={{ width: panelWidth, flexShrink: 0, background: "#FAF7F2", borderLeft: "1px solid #24143020", padding: 14, boxSizing: "border-box" }}>
          <h4 style={{ margin: "0 0 8px", fontSize: 12, fontWeight: 700, textTransform: "uppercase", letterSpacing: ".03em", color: "#241430a0" }}>Properties</h4>
          <dl style={{ margin: 0 }}>
            {[["Name", itemName], ["Opacity", "100%"], ["Locked", "No"]].map(([k, v]) => (
              <div key={k} style={{ padding: "4px 0", borderBottom: "1px solid #24143014" }}>
                <dt style={{ fontSize: 11, color: "#241430a0", margin: 0 }}>{k}</dt>
                <dd style={{ margin: "1px 0 0", fontWeight: 600 }}>{v}</dd>
              </div>
            ))}
          </dl>
        </aside>
      )}
    </div>
  );
}