Layout A two-column (or nested multi-column) layout container for page-level structure. Layout holds...

Layout A two-column (or nested multi-column) layout container for page-level structure. Layout holds `<ed-layout-section>` children and supports sidebar layouts (left or right), adjustable gaps, and responsive breakpoint control. Layout creates flexible sidebar designs: default is main content + right sidebar; use variant="left-sidebar" to flip. Children stack on mobile and arrange side-by-side on larger screens. Multiple layouts can be nested for complex multi-column designs. Use CSS custom property `--ed-sidebar-width` to customize sidebar dimensions.

<ed-layout></ed-layout>

Properties

Name Type Default Description
break String 'faster' | 'slower' | 'none' Layout A two-column (or nested multi-column) layout container for page-level structure. Layout holds `<ed-layout-section>` children and supports sidebar layouts (left or right), adjustable gaps, and responsive breakpoint control. Layout creates flexible sidebar designs: default is main content + right sidebar; use variant="left-sidebar" to flip. Children stack on mobile and arrange side-by-side on larger screens. Multiple layouts can be nested for complex multi-column designs. Use CSS custom property `--ed-sidebar-width` to customize sidebar dimensions. / export class EdLayout extends EdElement { static get styles() { return unsafeCSS(styles); } /** Responsive breakpoint control Adjusts when layout sections stack vs. display side-by-side: - `"faster"` — Sections break to stack at narrower widths (earlier breakpoint) - `"slower"` — Sections break to stack at wider widths (later breakpoint) - `"none"` — Sections always display side-by-side (no responsive stacking)
gap String 'none' | 'sm' | 'lg' | 'xl' Gutter spacing between layout sections Controls the gap between sections on large screens (16px default on mobile): - `"none"` — No gap on large screens (16px gap on mobile) - `"sm"` — 8px gap on large screens (16px on mobile) - `"lg"` — 24px gap on large screens (16px on mobile) - `"xl"` — 32px gap on large screens (16px on mobile)
variant String 'left-sidebar' Sidebar position variant Determines sidebar placement: - `"left-sidebar"` — First section becomes left sidebar, second becomes main content - (default/undefined) — First section is main, second is right sidebar

Slots

Name Description
- The layout sections (typically `<ed-layout-section>` components)

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/layout.ts