A semantic HTML5 `<main>` wrapper for primary page content. EdMain renders as a semantic `<main>` element with proper styling. Use it to wrap the primary content of a page, appearing between header and footer. This semantic element improves accessibility and page structure for assistive technologies. Use main when: - Wrapping the primary content section of a page - Creating semantic page structure (header → main → footer) - Ensuring proper landmark regions for accessibility Composition: - Place all primary page content inside the main element - Keep main as a direct child of the document body (appears between header and footer) - Use only one main element per page
| Name | Description |
|---|---|
- |
Primary page content |
Full interactive examples, variant previews, accessibility audits, and the complete API reference are available in Storybook — generated directly from the component source code.
packages/eddie-web-components/components/main/main.ts