` with configurable content boxes. ## Key Components | Export | Max Width | Padding Strategy | |---|---|---| | `PageShell` | `1920px` | CSS custom properties (`--page-shell-*` vars via `ods-page-shell.css`) | | `ArticleDetailLayout` | `1280px` | Fixed: `px-6 md:px-20 py-6 md:py-10` | ### `LayoutProps` | Prop | Type | Description | |---|---|---| | `children` | `React.ReactNode` | Page content | | `schemas` | `React.ReactNode` | Optional JSON-LD `}> ); } // Blog post / release note / case study import { ArticleDetailLayout } from './article-detail-layout'; export default function BlogPostPage() { return ( } > ); } ``` ## Notes - `PageShell` intentionally omits `min-h-screen` — the root `app/layout.tsx` already manages viewport height via a `flex min-h-screen flex-col` / `flex-1` chain; adding it here would create dead space in sibling-content layouts. - `PageShell` padding is controlled by CSS custom properties set on any ancestor element — no prop threading or context required. - `ArticleDetailLayout` does **not** participate in the `--page-shell-*` var system; its spacing is self-contained and fixed by default. **Source:** [`article-detail-layout.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/article-detail-layout.tsx)