Dashboard Layout

Arrangement of widgets.

html

<div class="dlayout dlayout--sidebar-left dlayout--comfortable" style="--c:#D9C8F0;">
  <nav class="dlayout__nav" aria-label="Dashboard sections">
    <span class="dlayout__navitem">Overview</span>
    <span class="dlayout__navitem">Reports</span>
  </nav>
  <main class="dlayout__main">
    <h2 class="dlayout__title">Operations</h2>
    <p class="dlayout__body">Widgets render here.</p>
  </main>
</div>
<style>
.dlayout { display: flex; gap: 14px; font: 13px system-ui, sans-serif; color: #241430; border: 1px solid #24143018; border-radius: 10px; overflow: hidden; }
.dlayout__nav { background: var(--c); padding: 14px; display: flex; flex-direction: column; gap: 8px; min-width: 110px; }
.dlayout__main { padding: 14px; flex: 1; }
.dlayout__title { margin: 0 0 6px; font-size: 16px; }
.dlayout--sidebar-none .dlayout__nav { display: none; }
.dlayout--sidebar-right { flex-direction: row-reverse; }
.dlayout--compact .dlayout__nav, .dlayout--compact .dlayout__main { padding: 8px; }
@media (max-width: 360px) { .dlayout { flex-direction: column; } }
</style>

tailwind

<div class="dlayout-tw dlayout-tw--sidebar-left dlayout-tw--comfortable flex gap-3.5 font-sans text-[13px] text-[#241430] border border-[#24143018] rounded-[10px] overflow-hidden" style="--c:#D9C8F0;">
  <nav class="dlayout-tw__nav p-3.5 flex flex-col gap-2 min-w-[110px]" style="background:var(--c);" aria-label="Dashboard sections">
    <span>Overview</span>
    <span>Reports</span>
  </nav>
  <main class="p-3.5 flex-1">
    <h2 class="m-0 mb-1.5 text-base">Operations</h2>
    <p class="m-0">Widgets render here.</p>
  </main>
</div>
<style>
.dlayout-tw--sidebar-none .dlayout-tw__nav { display: none; }
.dlayout-tw--sidebar-right { flex-direction: row-reverse; }
@media (max-width: 360px) { .dlayout-tw { flex-direction: column; } }
</style>

react

export function DashboardLayout({
  title = "Operations",
  sidebar = "left",
  density = "comfortable",
  color = "#D9C8F0",
}) {
  const pad = density === "compact" ? 8 : 14;
  return (
    <div style={{ display: "flex", flexDirection: sidebar === "right" ? "row-reverse" : "row", gap: 14, font: "13px system-ui, sans-serif", color: "#241430", border: "1px solid #24143018", borderRadius: 10, overflow: "hidden" }}>
      {sidebar !== "none" && (
        <nav aria-label="Dashboard sections" style={{ background: color, padding: pad, display: "flex", flexDirection: "column", gap: 8, minWidth: 110 }}>
          <span>Overview</span>
          <span>Reports</span>
        </nav>
      )}
      <main style={{ padding: pad, flex: 1 }}>
        <h2 style={{ margin: "0 0 6px", fontSize: 16 }}>{title}</h2>
        <p style={{ margin: 0 }}>Widgets render here.</p>
      </main>
    </div>
  );
}