Colours and choices

Colour and choice fields don’t fill content. They change styles and attributes on marked elements, so marketers can adjust a module’s look without touching its code.

Both work with targets. A target is a marked element plus either a CSS style property (such as background-color) or an HTML attribute (such as bgcolor or align).

Colour

A colour field sets one colour on each of its targets. Marketers pick it with a colour picker or type a hex value.

<td data-mm="background" bgcolor="#18181b" style="border-radius:6px;background-color:#18181b">
  <a data-mm="button" href="https://example.com" style="color:#ffffff">Find out more</a>
</td>

Set up the colour field with two targets on the same marker:

Marker	Sets
background	Style property background-color
background	Attribute bgcolor

When you add a second target after background-color, Modular Mail suggests bgcolor on the same marker, since Outlook for Windows reads the attribute rather than the style.

Colours must be hex values: #rgb or #rrggbb. Turn on Required if the field must have a value. Otherwise, an empty colour leaves the HTML as written.

Tip

Use help text to guide the choice, for example “Pick a dark colour: the text is white.” If marketers should only use brand colours, offer them as a choice instead.

Choice

A choice field offers a set of named options. Each option gives its targets a value. Marketers see buttons when there are up to three short options, and a dropdown when there are more.

Use a choice for anything with a fixed set of approved answers: alignment, image side, spacing, a light or dark style, a brand colour.

Example: alignment

<td data-mm="cell" align="left" style="padding:16px 32px">
  …a button…
</td>

Option	Target	Value
Left	cell, attribute align	left
Centre	cell, attribute align	center
Right	cell, attribute align	right

Example: image on the left or right

The dir attribute swaps the order of table cells without changing the HTML. Mark the table and give each option a dir value:

<table data-mm="columns" role="presentation" dir="ltr" width="100%">
  <tr>
    <td class="stack" dir="ltr" width="260">…image…</td>
    <td class="stack" dir="ltr">…text…</td>
  </tr>
</table>

Option	Target	Value
Left	columns, attribute dir	ltr
Right	columns, attribute dir	rtl

Set dir="ltr" on the cells too, so their text still reads left to right.

Style presets

One option can set several targets at once, which makes a style preset. A “Dark” option might set a section’s background colour, its bgcolor and its text colour together:

Target	Light	Dark
section, style background-color	#ffffff	#18181b
section, attribute bgcolor	#ffffff	#18181b
heading, style color	#18181b	#ffffff
body, style color	#3f3f46	#d4d4d8

An option with no value for a target leaves that target as the HTML has it, shown as As written in the settings. This lets the first option be “as designed” with nothing to fill in.

Setting up a choice

1. Add a Choice field and give it a label, such as “Alignment”.
2. Under Sets, add a target for each style or attribute the options change: pick the marker, then Style property or Attribute, and its name.
3. Under Options, give each option a label and a value for each target.
4. Pick the Default option, the one new modules start with.

Values can’t contain ;, ", <, >, braces or line breaks. Attributes can’t be style (use a style property instead), data-mm or event handlers such as onclick.

Choices change styles, toggles remove parts

To let marketers remove part of the email, such as a button or a heading, use a toggle, not a choice that hides it with CSS. A toggle takes the HTML out of the email completely, which works in every email client.