A semantic `<footer>` element for global site or app footer content. EdFooter renders as a semantic `<footer>` element with proper HTML5 landmark role. Use it at the bottom of pages to display footer content like copyright, links, navigation, contact information, and social media links. It supports optional top and bottom sections for flexible composition. Use footer when: - Displaying site-wide footer content - Providing copyright, legal links, and company information - Adding footer navigation, social links, or contact details - Creating semantic page structure with proper landmarks Composition: - Use the `top` slot for optional header content (e.g., newsletter signup, brand info) - Use the default slot for main footer content (e.g., navigation columns, links) - Use the `bottom` slot for optional footer footer content (e.g., copyright, legal) - Each section is optional; include only the slots you need
| Name | Description |
|---|---|
- |
Main footer content (typically navigation columns or grouped links) |
top |
Optional content appearing above the default slot (e.g., newsletter, promotions) |
bottom |
Optional content appearing below the default slot (e.g., copyright, legal links) |
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/footer/footer.ts