Horizontal rule component for visual separation of content sections. Renders a semantic `<hr>` element with design system styling. Use to create visual breaks between major sections or content blocks. ### When to use - Separate top-level sections on a page - Break between distinct content blocks - Visual alternative to spacing alone (when semantic separation is important) ### When not to use - For purely decorative spacing (use padding/margins instead) - Within lists or navigation (use dividers or borders instead) - Multiple in sequence (one is usually sufficient)
| Name | Type | Default | Description |
|---|---|---|---|
variant |
String |
'thick' |
Horizontal rule component for visual separation of content sections. Renders a semantic `<hr>` element with design system styling. Use to create visual breaks between major sections or content blocks. ### When to use - Separate top-level sections on a page - Break between distinct content blocks - Visual alternative to spacing alone (when semantic separation is important) ### When not to use - For purely decorative spacing (use padding/margins instead) - Within lists or navigation (use dividers or borders instead) - Multiple in sequence (one is usually sufficient) / export class EdHr extends EdElement { static get styles() { return unsafeCSS(styles.toString()); } /** Visual variant controlling thickness. - `thick`: Thicker rule for more visual prominence If not set, uses default thickness. |
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/hr/hr.ts