Divider element
3 min
The Divider element draws a horizontal line between elements of a widget, for example to separate an offer from its fine print. It's display-only: it has no action or automations.
Available on: all platforms.
Options
Option | What it does | Values / default |
|---|---|---|
Border | Line thickness, style (solid, dashed, dotted…) and color | 1 px, solid, your branding text color |
Opacity | Transparency of the line | 100% |
Size | Width (and min and max width) | Full width |
Spacing | Padding and margin around the line | — |
Device, Animation | See Widget elements | — |
Behavior details
- The line is the top border. Its thickness is the top border width. Use margin, not height, to add space above and below it.
- Short centered lines. Set a width such as 60 px and center the element through its container's alignment.
- Vertical dividers aren't a separate element. In a row container, use a container border on one side instead.
Example
A thin 40%-opacity line between a headline and a form in a popup, with 12 px margin above and below.