Layout and spacing

You never set spacing in a template. Modules do not look at their neighbours, and there is no margin or padding prop. All vertical space between modules is decided in one place, layout.Arrange, from rules taken from the Quiet design's reference frames. The same template always gets the same spacing, and a new combination of modules still looks deliberate.

func Arrange(mods []ir.Module, header HeaderVariant) []Section

type Section struct {
    Module            ir.Module
    PadTop, PadBottom int // px
}

Arrange runs three passes over the template's modules: class defaults, then pair rules, then position rules. The HTML renderer writes each section as a table row, <td class="px" style="padding:{top}px 56px {bottom}px 56px;text-align:…">, so a section's padding is the space it adds above and below itself. Bands (images and maps) are full-bleed and ignore the side padding.

Know the module classes

Every module belongs to one layout class:

Start from the class defaults

The actions default is 40, not SPEC §8's 36: the handoff's Q2 frame wins on visual values (D10).

Apply the pair rules

Pair rules look at two adjacent modules and override the bottom of the first, the top of the second, or both. They are data ([]layout.Rule, in layout/rules.go), each citing the reference frame its value comes from. They apply in order, and a later match overrides an earlier one on the same side.

A statement followed by breakdown or stock matches no rule and keeps the Hero default of 36.

Apply the position rules

Last, a few rules look at where a module sits in the whole email:

Check the nine reference stacks

The nine Quiet examples are the conformance suite for these rules. layout/arrange_test.go asserts every value below.

Here is 02. The figure → breakdown rule gives the figure a 32px bottom and the breakdown no top padding, and the Tabular → actions rule drops the actions' top padding to 8:

Change the spacing

The rules are part of the library, not the theme, so a consumer cannot change them per brand. If a combination of modules looks wrong, the fix is a new pair rule in layout/rules.go with its source, plus a case in layout/arrange_test.go, and a golden update (see Goldens and testing).