Main Content

Primary information/task area.

html

<div class="mc-demo">
  <nav class="mc-demo__nav">Nav</nav>
  <main class="mc-demo__main" style="padding:20px;border-top:3px solid #A8E6C1;">
    <h3 class="mc-demo__heading">Team activity</h3>
    <p class="mc-demo__body">This is the primary task area of the page — everything else is chrome around it.</p>
  </main>
</div>
<style>
.mc-demo { display: flex; height: 150px; font: 14px/1.5 system-ui, sans-serif; color: #241430; border: 1px solid #24143022; }
.mc-demo__nav { flex: none; width: 64px; background: #241430; color: #FAF7F2cc; font-size: 12px; text-align: center; padding-top: 14px; }
.mc-demo__main { flex: 1; min-width: 0; background: #FAF7F2; box-sizing: border-box; overflow-y: auto; }
.mc-demo__heading { margin: 0 0 8px; }
.mc-demo__body { margin: 0; color: #241430cc; }
</style>

tailwind

<div class="flex h-[150px] font-sans text-sm text-[#241430] border border-[#24143022]">
  <nav class="flex-none w-16 bg-[#241430] text-[#FAF7F2]/80 text-xs text-center pt-3.5">Nav</nav>
  <main class="flex-1 min-w-0 bg-[#FAF7F2] box-border overflow-y-auto" style="padding:20px;border-top:3px solid #A8E6C1;">
    <h3 class="m-0 mb-2">Team activity</h3>
    <p class="m-0 text-[#241430]/80">This is the primary task area of the page — everything else is chrome around it.</p>
  </main>
</div>

react

export function MainContent({
  heading = "Team activity",
  body = "This is the primary task area of the page — everything else is chrome around it.",
  padding = 20,
  accent = "#A8E6C1",
}) {
  return (
    <div style={{ display: "flex", height: 150, fontFamily: "system-ui, sans-serif", fontSize: 14, lineHeight: 1.5, color: "#241430", border: "1px solid #24143022" }}>
      <nav style={{ flex: "none", width: 64, background: "#241430", color: "#FAF7F2cc", fontSize: 12, textAlign: "center", paddingTop: 14 }}>Nav</nav>
      <main style={{ flex: 1, minWidth: 0, background: "#FAF7F2", boxSizing: "border-box", overflowY: "auto", padding, borderTop: `3px solid ${accent}` }}>
        <h3 style={{ margin: "0 0 8px" }}>{heading}</h3>
        <p style={{ margin: 0, color: "#241430cc" }}>{body}</p>
      </main>
    </div>
  );
}