Use the Divider widget to separate sections of a page and improve readability.

When to use it #

A Divider widget displays no data and performs no action. It exists to organize the layout.

Use it to:

• draw a line between two groups of widgets that belong to different parts of a process;
• create deliberate empty space, using the Empty type;
• separate a header block from the content beneath it.

A page with clear widget titles often needs no dividers at all. Reach for one when two neighbouring widgets look like they belong together and do not.

Add a Divider widget #

To add a Divider widget:

1. Open the page and enable Layout edit mode.
2. Select Add a widget.
3. Select the Divider tile, or drag it onto the page.
4. Choose the type, orientation, and appearance.
5. Select Create.
6. Save the page layout.

A Divider has no editable title. Auclio names it Divider automatically, and it is drawn without the card frame that surrounds other widgets, so it sits directly on the page background.

Configuration #

All of a Divider’s settings sit in one Appearance section.

Divider Type #

Four options control what is drawn:

• Solid – a continuous line;
• Dashed – a broken line;
• Dotted – a line of dots;
• Empty – nothing is drawn.

Empty reserves space on the grid without putting a mark on the page, which is how you create a deliberate gap between widgets.

Orientation #

• Horizontal – a line across the widget, separating what is above from what is below;
• Vertical – a line down the widget, separating left from right;
• Auto – Auclio chooses based on the shape you have given the widget on the grid.

Auto is a sensible default: a wide, short widget becomes a horizontal line and a narrow, tall one becomes a vertical line. Set the orientation explicitly when you resize the widget and want the line to stay as it is.

Colour and thickness #

Colour opens a set of swatches: Theme, followed by the theme’s named colours. It reads Theme default until you pick one, and the helper text says Leave as Theme for the primary colour, so a divider left alone follows the theme’s primary colour when that changes. There is no free colour entry.

Thickness (px) is a slider from 1 to 20, and defaults to 1. One or two pixels is right for a separator; heavier lines read as a design element and quickly look heavy-handed.

Adapt colour to dark mode #

Switched on by default. When on, Auclio adjusts the divider’s colour for users working in dark mode, so a line chosen against a white background stays visible against a dark one.

Switch it off only when you have picked a colour that must not change.

Preview #

The dialog previews the divider as configured. For the Empty type the preview states that it is an empty spacer with no visible line, which confirms you have not simply made an invisible mistake.

Sizing on the grid #

A Divider can be as small as one row and one column, and up to 20 rows tall. It is added spanning the full width of the grid and two rows tall. Because it holds no content, its size on the grid is the whole of its effect – a horizontal divider in a two-row-tall widget has a row of space above and below the line.

Recommendations #

When using Divider widgets:

• prefer whitespace to lines, and add a divider only where a boundary is genuinely unclear;
• use one style of divider throughout an application;
• keep thickness at one or two pixels;
• use the Empty type for spacing rather than adding an invisible Text widget;
• leave Adapt colour to dark mode on unless you have a specific reason not to.