Spacer
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.
When to use
Use spacers to:
- add vertical spacing between content blocks such as headings, text and buttons
- create a consistent rhythm across email sections
- separate areas visually without unnecessary white space.
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.
Variations
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.
Size
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.
Colour
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. |