Overview

E-mail sections are created to offer a convenient way to add complex elements to your novem mails. This document explains the basic concept along with some common features for all sections.

Section format

The novem e-mail sections builds on the section grammar explained under the novem advanced markdown documentation. In particular there are two types of sections:

  • Single statement sections
  • Multi statement sections

Single statement sections

The single statement section consists of a single statement and its parameters.

{{ section_type     # section open and type
  param: one        # parameters
  param: two        #
}}                  # section close

This is mostly used for things that embed other resources into your e-mail.

Multi statement sections

Multi statement sections are a bit more complex, they consists of an opening statements, but must be followed by a closing statement later in the document. The closing statement is the same as the open statement but with a leading slash / and no arguments/parameters.

{{ section_type         # section open and type
  param: one            # parameters
  param: two            #
}}                      # closing the top, but opening the 
                        # the multi section

Other text and markdown # section content
supplied by the user.
* list
* item

{{ /section_type  }}    # closing multi section tag

This is mostly used for including longer form text in your document that has special consideration such as supplying preivew text or formatting entire paragraphs/sections.

Currently there are no support for nesting statements in novem e-mails, but we hope to add support for this in the future.

Simplified sections

In addition to the long form sections shown above, if the user does not wish to add any arguments (and thus using the default paramter values) open and close sections can be written on single lines.

{{ section_type }}
content
{{ /section_type }}

See the preview section for an example of this.

Common parameters

All novem sections supports a few common parameters that can be helpful to format and get the most out of your e-mail.

Spacing controls

Spacing is an important part of any good document, so in addition to a separate padding section we also support generic padding (p) and margin (m) controls on all sections.

The syntax is similar to the plot table padding with a directional indicator and a magnitude number between 0 and 5.

 l  -- add left padding to section
 r  -- add right padding to section
 t  -- add top padding to section
 b  -- add bottom padding to section
 
 x  -- add left and rigth padding to section
 y  -- add top and bottom padding to section
 
 a  -- add paddings to sides of the section

To supply multiple values use yaml array notation.

Examples

Add a magnitude 2 padding around a paragrap.

{{ paragraph
  padding: a2
}}

Paragraph text

{{ /paragraph }}

Add an inner padding of 3 a margin of 2 at the top and bottom along with a 1 wide top border of color gray-500 for a paragraph. Also using short forms where possible.

{{ para
  p: a3
  m: y2
  b: t1 gray-500
}}

Paragraph text

{{ /para }}

Add a padding of 1 to the left and 4 to the right.

{{ para
  p: [l1, r4]
}}

Paragraph text

{{ /para }}

Borders

In addition to spaces, novem mail also supports adding borders to our sections. The border grammar is very similar to the spacing controls above.

The parameters are border, borders or b along with a direction, size and optional color code.

Examples

Add a border all around a paragraph, the inverse color will be used by default.

{{ para
  b: a1
}}

Paragraph text

{{ /para }}

Add a paragraph with red left border and green right border.

{{ para
  b: [l1 red, r1 green]
}}

Paragraph text

{{ /para }}

Colors

We also support adding foreground and background colors to all our sections. The parameters here are foreground, fg, background or bg. Like all our colors you can either specify a named novem color an explicit hexa code.

If you want to specifically set a dark mode variant then two colors can be supplied instead.

Examples

A paragraph with a light background with darker text and a solid outer border.

{{ para
  b: a1 inverse
  bg: gray-300
  fg: gray-800
}}

Paragraph text

{{ /para }}
← Content
Visualisation →