Layout Container A fixed-width container that caps content to a max-width (70rem by default, 50rem with...

Layout Container A fixed-width container that caps content to a max-width (70rem by default, 50rem with variant="narrow"). Use inside `<ed-header>` and `<ed-main>` to constrain page content to a readable column width. By default, the container limits content width to 70rem (1120px). The "narrow" variant reduces this to 50rem (800px) for more constrained layouts.

<ed-layout-container></ed-layout-container>

Properties

Name Type Default Description
variant String 'narrow' Layout Container A fixed-width container that caps content to a max-width (70rem by default, 50rem with variant="narrow"). Use inside `<ed-header>` and `<ed-main>` to constrain page content to a readable column width. By default, the container limits content width to 70rem (1120px). The "narrow" variant reduces this to 50rem (800px) for more constrained layouts. / export class EdLayoutContainer extends EdElement { static get styles() { return unsafeCSS(styles); } /** Variant Controls the maximum width of the container: - `"narrow"` — Sets max-width to 50rem (800px) for tighter, more focused layouts

Slots

Name Description
- The contents of the layout container

Interactive Documentation

Full interactive examples, variant previews, accessibility audits, and the complete API reference are available in Storybook — generated directly from the component source code.

Source

packages/eddie-web-components/components/layout-container/layout-container.ts