Divider
A simple structural separator between related content groups.
Try it
Labelled section break
A start-aligned strong divider.
Use it
Working invocation
This code creates the configuration shown above. Copy the template and the required Python context together.
{% include "brickwork/components/_divider.html" with label=label label_align=label_align tone=tone %}context = {'label': 'Advanced settings', 'label_align': 'start', 'tone': 'strong'}Guide
Add it to your project
- Include the partial at the semantic boundary.
- Choose orientation only when the layout requires a vertical rule.
Options
Public API
| Option | Type | Default | Required | Description |
|---|---|---|---|---|
| label | str | Not set | No | Optional text carried by the rule. Constraint: Use concise visible text that identifies the control or measurement. |
| label_align | str | center | No | Label placement. Allowed: center, start. Constraint: Allowed values: `center`, `start`. |
| tone | str | muted | No | Hairline contrast. Allowed: muted, strong. Constraint: Allowed values: `muted`, `strong`. |
| spacing | str | md | No | Vertical rhythm. Allowed: sm, md, lg. Constraint: Allowed values: `sm`, `md`, `lg`. |
Behaviour
Accessibility and responsive behaviour
- Accessibility
- Uses separator semantics when labelled; do not use it as the only way to communicate a meaningful section boundary.
- Responsive
- No breakpoint switch.
- Without JavaScript
- Static HTML only.
Need help?
Troubleshooting
Contract check: label_align ("center" default | "start"): only meaningful with label.
Set `label_align` only when a divider has a label; it has no effect on an unlabelled rule.