`<layout:divider />`

A layout element for rendering decorative SVG dividers between sections or content blocks.
Creates visual transitions using wave patterns, curves, triangles, or custom SVG shapes.

The divider automatically positions itself at the top or bottom edge of the nearest ancestor container marked with data-layout-divider-container attribute. It uses shadow DOM for style encapsulation and SVG pattern-based rendering for perfect horizontal tiling without gaps.

Key features:

Pattern-based tiling with configurable repeat count
Color override or preservation of original SVG colors
Responsive height with any CSS unit
Horizontal flipping for design variety
Support for both built-in and custom uploaded SVG files

Content

none

This element does not contain child content.

Attributes

- `id`

string

Give this control a unique id. Can be accessed in the client DOM (eg, document.getElementById('myid') or in the server DOM using [? $myid ?] or [? $('myid') ?]).

- `color`

string

Color

Overrides the divider's color by replacing all fill/stroke attributes with the specified value.
Accepts any valid CSS color format (hex, rgb, named colors, CSS variables).

Behavior:

When set (e.g. '#FF5733'): All SVG colors are stripped and replaced with this color.
When omitted: Original SVG colors are preserved as-is.

The color is applied via CSS currentColor inheritance, allowing the divider to inherit from parent text color when set to a CSS variable or keyword.

Note: This attribute must be completely omitted (not just empty) to preserve original colors.

- `flipped`

bool

Flipped

Mirrors the divider pattern horizontally using CSS transform scale(-1, 1).
Useful for creating visual variety or matching directional flow in the design.

Possible values:

false Normal orientation (default)
true Horizontally flipped

Omitting this attribute is the same as setting it to false.

Works independently of the position attribute.

- `height`

string

Height

Sets the vertical height of the divider element. Accepts any valid CSS length unit.

Common values:

120px: Fixed pixel height (default)
5vmin: Responsive viewport-based height
10rem: Relative to root font size

- `position`

string

Position

Controls where the divider is positioned within its parent container.
The divider will automatically attach to the nearest ancestor element with the data-layout-divider-container attribute.

Possible values:

top Positions at the top edge (rotated 180°).
bottom Positions at the bottom edge (default).

- `repeat`

int

Repeat

Controls how many times the divider pattern tiles horizontally across the container width.
The pattern is squished or stretched to fit exactly N repetitions with no gaps.

Behaviour Examples:

1: Pattern spans full width (default)
2: Pattern repeats twice, each taking 50% width
0.5: Pattern is stretched to 200% width (half repeat)

- `source`

string

Source

Specifies which SVG divider pattern to render.

This can be either:

A built-in divider name (e.g. Curve)
A path to a custom uploaded SVG file (e.g. /media/uploads/divider.svg)

For Custom SVGs:

Custom SVGs should be simple path-based designs with a viewBox for proper scaling.
The design should be for a 'bottom' divider, as it will be rotated 180° for 'top' dividers.
For repeat values of n > 1 the SVG should be designed to tile horizontally without gaps.

Built-in Divider Sources:
Angle AngleLayered Book Cloud CloudLayered Corner CornerAngle CornerAngleLayered CornerCurve CornerCurveLayered Curve Diamond Elegant Gooey HalfCircle HalfCircleLayered InvertAngle InvertAngleLayered OffsetAngle OffsetAngleLayered OffsetCurve OffsetCurveLayered Scollop Slope SlopeWave Stripe StripeWave Wave1 Wave2 Wave3 Wave4 Wave5

Examples

Basic Divider Usage

A section with a simple bottom divider using the built-in Curve pattern.

HTML:

<templates:section> <layout:divider source="Curve" position="bottom" height="5vmin" color="#007bff" repeat="1" /> </templates:section>

Run Example

Custom Divider

A divider with a custom SVG source and multiple repeats.

HTML:

<templates:section>  <layout:divider source="/media/mypage/divider.svg" position="top" height="80px" repeat="2" /> </templates:section>

Stacked Dividers

A section demonstrating multiple layout dividers layered at the top and bottom.

HTML:

<templates:section>  <layout:divider position="top" source="Scollop" repeat="5" height="7vmin" color="#ffa3a5" style="opacity: 0.67;" /> <layout:divider position="top" source="Scollop" repeat="5" height="5vmin" color="#ffa3a5" style="opacity: 1;" flipped="true" /> <layout:divider position="bottom" source="Scollop" repeat="5" height="7vmin" color="#ffa3a5" style="opacity: 0.67;" /> <layout:divider position="bottom" source="Scollop" repeat="5" height="5vmin" color="#ffa3a5" style="opacity: 1;" flipped="true" /> </templates:section>

Run Example

Adjacent Color Matching

Demonstrates how dividers create flowing transitions by matching the background color of adjacent sections. For bottom dividers, the divider's color matches the NEXT section's background, creating a masking effect. For top dividers, the divider's color matches the PREVIOUS section's background.

HTML:

<templates:section style="background-color: #ffffff; padding: 4rem 2rem;"> <h2>Section One</h2>  <layout:divider source="Wave1" position="bottom" height="8vmin" color="#007bff" repeat="2" /> </templates:section> <templates:section style="background-color: #007bff; padding: 4rem 2rem;"> <h2>Section Two</h2>  <layout:divider source="Curve" position="bottom" height="6vmin" color="#28a745" repeat="1" /> </templates:section> <templates:section style="background-color: #28a745; padding: 4rem 2rem;"> <h2>Section Three</h2>  <layout:divider source="Scollop" position="bottom" height="7vmin" color="#ffffff" repeat="3" /> </templates:section> <templates:section style="background-color: #ffffff; padding: 4rem 2rem;"> <h2>Section Four</h2> </templates:section>

Run Example