Divider
Dividers create visual separation between sections in an email. They help break up dense layouts, improve scannability and guide the reader through the message in a clear, structured way.
When to use
Use dividers to separate distinct content blocks – for example:
- between a heading and body text
- between different sections within the same layout
- to create rhythm and visual breaks in long-form content.
Keep spacing above and below dividers consistent to maintain flow. Use dividers sparingly to avoid unnecessary visual clutter.
Design guidance
- Always choose divider colours from the NSW Government digital palette to ensure accessibility and brand alignment.
- Maintain consistent spacing around dividers for rhythm and balance.
- Use horizontal dividers to break sections in single-column layouts.
- Use vertical dividers only when separating multi-column content.
- Ensure dividers are thick enough to be seen but not so bold they overpower content.
Variations
Dividers can be customised using properties for colour, orientation, size, and thickness. These options allow dividers to adapt to different layouts, backgrounds, and levels of emphasis while keeping within system standards.
Colour
Use the colour property to set a specific colour for components such as text, buttons or dividers. Always choose from the NSW Government digital palette to ensure consistency, accessibility and brand alignment.
Orientation
Use the orientation property to control whether a divider displays horizontally or vertically. Horizontal dividers usually separate sections in email layouts. Vertical dividers can distinguish content in multi-column designs.
Size
Use the size property to define the fixed length of the divider in pixels or as a percentage. By default, the divider spans 100% of its container. Adjust the size to suit your layout – for example, use shorter dividers to separate sub-sections or create balance in narrower columns.
Thickness
Use the thickness property to set the width of the separator line. The default is 1px. For accessibility and visual clarity, ensure the separator contrasts with the background.
| Prop | Type | Default | Description |
|---|---|---|---|
colour | string | page.grey[200] | Sets the divider colour. Must be chosen from the NSW Government digital palette. |
orientation | string | horizontal | Defines whether the divider runs across (horizontal) or down (vertical) the layout. |
size | string | number | 100% | Specifies the length of the divider as a percentage or pixel value. Defaults to full width of container. |
thickness | number | 1 | Sets the thickness of the divider line in pixels. Default is 1px. |