Section

The section component is a container used to group related content in email layouts. It provides consistent spacing, alignment, and background colour, helping to visually separate parts of a message such as introductions, feature blocks, calls to action, or footers.

A section is implemented in the framework as a full-width wrapper table. It applies background colour and vertical padding, while ensuring reliable rendering across all major email clients.

When to use a section

Use a section to:

• Create clear divisions between parts of an email (e.g. welcome text, announcements, CTAs).
• Apply different background colours for emphasis or contrast.
• Add vertical spacing between blocks to improve readability.
• Maintain consistency across templates without duplicating markup.

How it works

• Props control alignment, background colour, and padding.
• Defaults are provided so common use cases require minimal configuration.
• Content is passed into the <yield> slot, meaning you can nest rows, columns, or other components inside.
• The table uses role="presentation" to ensure it is ignored by assistive technologies.

In the codebase, the section is defined in section.html as a partial:

<script props>
  module.exports = {
    align: props.align || 'center',
    bgcolor: props.bgcolor || '#FFFFFF',
    valign: props.valign || 'top',
    padding: props.padding !== undefined ? parseInt(props.padding, 10) : props.page.padding,
  }
</script>

<table class="wrapper" align={{{align}}} bgcolor={{{bgcolor}}} cellpadding="0" cellspacing="0" width="100%" role="presentation">
  <tr>
    <td style="padding: {{{padding}}}px 0px;">
      <yield />
    </td>
  </tr>
</table>

Props

<x-section bgcolor="#F5F5F5" padding="48">
  <x-row>
    <x-column>
      <h2>Important update</h2>
      <p>We’ve made improvements to your dashboard.</p>
    </x-column>
  </x-row>
</x-section>

This outputs:

• A full-width grey section.
• 48px padding above and below.
• A centered row containing the content.

Do / Don't

Do

• Use <x-section> to separate major blocks of content.
• Apply NSW Design System colour tokens for consistency.
• Keep padding values consistent to maintain vertical rhythm.

Don't

• Hard-code wrapper tables manually — always use the partial.
• Overuse background colours in a single email.
• Place content directly in a section without a row/column wrapper.