Loading...
A NSW Government website
Search for a command to run...
Spacers provide consistent vertical spacing between elements. They are more reliable than using margin or padding in email clients, which can behave unpredictably. Spacers help create a clear layout and improve readability by giving content room to breathe.
Use spacers to:
Avoid using <br> tags or empty rows for spacing. These can break layouts in some email clients. Always apply spacers intentionally to support content hierarchy and balance.
You can adjust spacer size and colour. Sizes follow an 8-pixel increment scale to maintain rhythm, and colours can add emphasis or help identify sections.
Use the size property to set the spacer’s vertical height. Standard sizes include 8px, 16px, 24px and larger as needed. Larger sizes work well for separating major sections. Smaller sizes support subtle rhythm between elements.
Use the colour property to style spacer lines with a colour from the NSW Government digital palette. This ensures accessibility and brand consistency. Coloured spacers can mark transitions between sections—especially in longer emails.
| Prop | Type | Default | Description |
|---|---|---|---|
scale | number | 1 | Multiplies by 8px to set the spacer height (e.g. scale=3 → 24px). Provides a quick way to keep spacing consistent with the 8px grid. |
height | string | number | scale * 8 | Explicit height of the spacer in pixels. Overrides `scale` if provided. Useful when a non-8px increment is required. |
align | string | center | Horizontal alignment of the spacer inside the table row. Options: `left`, `center`, `right`. |
bgcolor | string | null | Sets a background colour for the spacer cell. Passed through as an HTML `bgcolor` attribute. Use sparingly, only when a coloured divider effect is required. |
mobileClass | string | '' | Optional class applied to the spacer cell for mobile-specific adjustments, such as collapsing or hiding spacing on smaller screens. |