Divider
Dividers provide visual separation between sections of content in an email. They help break up dense layouts, improve scanability, and guide the reader's eye through the message in a structured way.
When to use
Use dividers to separate distinct content blocks, such as headlines from body text or different sections within an email. Maintain consistent spacing above and below to preserve rhythm in the layout. Use them sparingly – too many can create visual clutter and reduce impact.
Colour
Use the colour property to assign a specific colour to components like text, buttons, or dividers. Always choose colours from the NSW Government digital palette to ensure consistency, accessibility and brand alignment.
Orientation
Use the orientation property to control whether a divider is displayed horizontally or vertically. Horizontal dividers are typically used to separate sections in email layouts. Vertical dividers can be used in multi-column designs to distinguish parallel content.
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 visual balance in narrower columns.
Thickness/Weight
Use the weight property to set the thickness of the separator line. The default thickness is 1px. For optimal accessibility and visual clarity, ensure sufficient contrast between the separator and the background.