Band A full-width background container for creating visual sections with distinct backgrounds or colors. Band is often used to group content with branded or themed backgrounds, breaking up page monotony with color/contrast regions. Band stretches to full viewport width and can contain any content — typically paired with layout-container to cap content width while background extends edge-to-edge. Use variants to apply themed background colors.
| Name | Type | Default | Description |
|---|---|---|---|
variant |
String |
'brand' | 'brand-knockout' |
Band A full-width background container for creating visual sections with distinct backgrounds or colors. Band is often used to group content with branded or themed backgrounds, breaking up page monotony with color/contrast regions. Band stretches to full viewport width and can contain any content — typically paired with layout-container to cap content width while background extends edge-to-edge. Use variants to apply themed background colors. / export class EdBand extends EdElement { static get styles() { return unsafeCSS(styles); } /** Background variant Applies themed background colors to the band: - `"brand"` — Uses the primary brand background color - `"brand-knockout"` — Uses an inverted/contrast brand background color |
| Name | Description |
|---|---|
- |
The band content (typically wrapped in ed-layout-container for width control) |
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/band/band.ts