Divider
A horizontal separator, optionally with text or an icon. Tabs: Content, Layout, Styling, Animations, Advanced.
<hr>An <hr> means "here is a real thematic break in the content" (like a scene change in a story), so a purely decorative rule drawn just for visual spacing shouldn't be one — it should carry aria-hidden="true" (or be plain CSS) so screen readers don't announce a break that isn't really there. UnysonPlus renders this element as presentational markup with the appropriate hidden state, so decorative dividers don't clutter the accessibility tree. MDN: the hr element
Live demo​
▶ See the Divider live on the demos site — an interactive example you can click through.
Content​
| Option | Choices |
|---|---|
| Ruler Type | Line / Divider, Whitespace |
| Line Design | Standard (Solid), Gradient Fade, Ornamental / Glyph, Inner Shadow |
| Add Element | None, Text / Title, Icon |
| Divider Text | Shown when Add Element = Text |
| Select Icon | Shown when Add Element = Icon |
| Content Alignment | Center, Left, Right |
| Height (px) | Thickness / whitespace height |
Capture each Line Design and the text/icon variants: divider-solid,
divider-gradient, divider-ornament, divider-shadow, divider-with-text,
divider-with-icon.
Layout​
Margin Top/Bottom, Width (%), and spacing controls.
Styling​
Line Color, Icon Color, Divider Text Color, Background Color, and Margin & Padding.