Main application content region.
The main content region is the primary task area of the page, distinct from chrome like navigation.
It usually scrolls independently of surrounding fixed regions.
A third paragraph makes that scrolling behaviour visible when the height is constrained.
And a fourth, so there is genuinely more to scroll through.
<div class="carea-demo">
<div class="carea-demo__rail">Nav</div>
<main class="carea-demo__main carea-demo__main--comfortable carea-demo__main--scroll" style="--accent:#D9C8F0;">
<h3 class="carea-demo__heading">Project overview</h3>
<p>The main content region is the primary task area of the page, distinct from chrome like navigation.</p>
<p>It usually scrolls independently of surrounding fixed regions.</p>
<p>A third paragraph makes that scrolling behaviour visible when the height is constrained.</p>
<p>And a fourth, so there is genuinely more to scroll through.</p>
</main>
</div>
<style>
.carea-demo { display: flex; font: 14px/1.5 system-ui, sans-serif; color: #241430; border: 1px solid #24143022; }
.carea-demo__rail { flex: none; width: 56px; background: #241430; color: #FAF7F2cc; font-size: 12px; text-align: center; padding-top: 14px; }
.carea-demo__main { flex: 1; min-width: 0; background: #FAF7F2; padding: 20px; border-top: 3px solid var(--accent); }
.carea-demo__main--compact { padding: 10px 14px; font-size: 13px; }
.carea-demo__main--scroll { height: 150px; overflow-y: auto; }
.carea-demo__heading { margin: 0 0 10px; }
.carea-demo__main p { margin: 0 0 8px; color: #241430cc; }
</style><div class="flex font-sans text-sm text-[#241430] border border-[#24143022]">
<div class="flex-none w-14 bg-[#241430] text-[#FAF7F2]/80 text-xs text-center pt-3.5">Nav</div>
<main class="flex-1 min-w-0 bg-[#FAF7F2] p-5 border-t-[3px] carea-tw carea-tw--comfortable carea-tw--scroll" style="border-top-color:#D9C8F0;">
<h3 class="m-0 mb-2.5">Project overview</h3>
<p class="m-0 mb-2 text-[#241430]/80">The main content region is the primary task area of the page, distinct from chrome like navigation.</p>
<p class="m-0 mb-2 text-[#241430]/80">It usually scrolls independently of surrounding fixed regions.</p>
<p class="m-0 mb-2 text-[#241430]/80">A third paragraph makes that scrolling behaviour visible when the height is constrained.</p>
<p class="m-0 text-[#241430]/80">And a fourth, so there is genuinely more to scroll through.</p>
</main>
</div>
<style>
.carea-tw--compact { padding: 10px 14px !important; font-size: 13px; }
.carea-tw--scroll { height: 150px; overflow-y: auto; }
</style>export function ContentArea({
heading = "Project overview",
density = "comfortable",
accent = "#D9C8F0",
scroll = true,
}) {
const compact = density === "compact";
return (
<div style={{ display: "flex", fontFamily: "system-ui, sans-serif", fontSize: 14, lineHeight: 1.5, color: "#241430", border: "1px solid #24143022" }}>
<div style={{ flex: "none", width: 56, background: "#241430", color: "#FAF7F2cc", fontSize: 12, textAlign: "center", paddingTop: 14 }}>Nav</div>
<main style={{
flex: 1, minWidth: 0, background: "#FAF7F2", borderTop: `3px solid ${accent}`,
padding: compact ? "10px 14px" : 20, fontSize: compact ? 13 : 14,
height: scroll ? 150 : "auto", overflowY: scroll ? "auto" : "visible",
}}>
<h3 style={{ margin: "0 0 10px" }}>{heading}</h3>
<p style={{ margin: "0 0 8px", color: "#241430cc" }}>The main content region is the primary task area of the page, distinct from chrome like navigation.</p>
<p style={{ margin: "0 0 8px", color: "#241430cc" }}>It usually scrolls independently of surrounding fixed regions.</p>
<p style={{ margin: "0 0 8px", color: "#241430cc" }}>A third paragraph makes that scrolling behaviour visible when the height is constrained.</p>
<p style={{ margin: 0, color: "#241430cc" }}>And a fourth, so there is genuinely more to scroll through.</p>
</main>
</div>
);
}