{# Email components -- A set of useful helper macros that can be used inside of an email template to layout the content. -------------------------------------------------------------------------------- {%- import "../components/email.html" as _email -%} -------------------------------------------------------------------------------- #} {# Spacer -- A table with a set height against it, used to emulate vertical margin between 2 elements. By standard, the height of the spacer is 20px, but the macro can be passed a `type` value which can be used to modify this height: `small` - Small height spacer `large` - Large height spacer `mobile-compact` - Standard height spacer, but small in mobile devices The macro also accepts a custom `class` attribute. -------------------------------------------------------------------------------- {{ _email.spacer(type='large') }} -------------------------------------------------------------------------------- #} {% macro spacer(type=None, class=None) %}
{% endmacro %} {# Divider -- A horizontal rule used to divide sections of content within the main body of the email. The macro accepts a custom `class` attribute. -------------------------------------------------------------------------------- {{ _email.divider() }} -------------------------------------------------------------------------------- #} {% macro divider(class=None) %}
{% endmacro %} {# Buttons -- A container used for wrapping one or more button macros within a table, spacing them appropriately. If you only have one button, you can pass the `buttons` macro everything you would pass the `button` macro. This includes `text`, `url`, and `class`, and these would then be used to create a single button within the table. -------------------------------------------------------------------------------- {{ _email.buttons('My button', url='/some-url') }} -------------------------------------------------------------------------------- Alternatively, if you have more than one button, you can use a caller. -------------------------------------------------------------------------------- {%- call _email.buttons() -%} {{ _email.button('Button one', url='/some-url-1') }} {{ _email.button('Button two', url='/some-url-2') }} {%- endcall -%} -------------------------------------------------------------------------------- #} {% macro buttons(text, url, class=None) %}
{% if caller %} {{ caller() }} {% elif text and url %} {{ button(text, url, class) }} {% endif %}
{% endmacro %} {# Button -- A single pre-formatted button using an `` tag. Must be passed `text` and `url` but can also be passed a custom `class` attribute. -------------------------------------------------------------------------------- {{ _email.button('My button', url='/some-url') }} -------------------------------------------------------------------------------- #} {% macro button(text, url, class=None) %} {{ text }} {% endmacro %} {# Content -- A container used to wrap around the different types of content blocks (i.e. box and list). Although the content wrapper is not required, it is recommended so that standard formatted styles are not applied to the content block. The macro can optionally be passed `heading_text` which will insert a pre-formatted `h2` at the top of the content block. It can also be passed a custom `class` attribute. -------------------------------------------------------------------------------- {%- call _email.content(heading_text='My heading') -%} ... {%- endcall -%} -------------------------------------------------------------------------------- #} {% macro content(heading_text=None, class=None) %}
{% if heading_text %} {{ content_heading(heading_text) }} {% endif %} {{ caller() }}
{% endmacro %} {# Content heading -- The `content_heading` can be used within the `content` macro. It is a pre-formatted heading used at the top of the `content` macro. Must be passed a `text` attribute. It can also be passed a custom `class` attribute. -------------------------------------------------------------------------------- {{ _email.content_heading('My heading') }} -------------------------------------------------------------------------------- #} {% macro content_heading(text, class=None) %}

{{ text }}

{% endmacro %} {# Content box -- The `content_box` can be used within the `content` macro. It is a container with a coloured background against it used to highlight a block of text content. The text content can be passed using the `text` attribute like so: -------------------------------------------------------------------------------- {{ _email.content_box(text='Some text') }} -------------------------------------------------------------------------------- By default any text passed is marked as safe, allowing you to pass HTML, but you can overide this behaviour by setting `make_safe` to `False`. If you don't want to pass the text as a parameter you can alternatively use a caller like so: -------------------------------------------------------------------------------- {%- call _email.content_box() -%} ... {%- endcall -%} -------------------------------------------------------------------------------- It can also be passed a custom `class` attribute. #} {% macro content_box(text=None, make_safe=True, class=None) %}
{%- if caller -%} {{ caller() }} {%- elif text -%} {{ text|safe if make_safe else text }} {%- endif -%}
{% endmacro %} {# Content list -- The `content_list` can be used within the `content` macro. It is a container used to wrap a list of `content_rows` to layout data in a standard tabular format. The macro can be passed a custom `class` attribute. -------------------------------------------------------------------------------- {%- call _email.content_list() -%} ... {%- endcall -%} -------------------------------------------------------------------------------- #} {% macro content_list(class=None) %} {{ caller() }}
{% endmacro %} {# Content list row -- The `content_row` should be used within the `content_list` macro. Each row consists of three columns. A label, a spacer, and a value. You can optionally pass `label_text` and `text` to the macro in order to set a label and value for the row like so: -------------------------------------------------------------------------------- {{ _email.content_row(text='Some text') }} -------------------------------------------------------------------------------- If no `label_text` is passed, the value column is given a `colspan` of 3 to make it full width, the label and spacer columns are then hidden. By default the `label_text` and `text` values are marked as safe allowing you to pass HTML, however you can overide this by setting `make_safe` to `False`. Alternatively, if you do not wish to pass `text` as a parameter, you can instead use a caller like so: -------------------------------------------------------------------------------- {%- call _email.content_row(label_text='My label') -%} ... {%- endcall -%} -------------------------------------------------------------------------------- The macro can also be passed a custom `class` attribute. #} {% macro content_row(label_text=None, text=None, make_safe=True, class=None) %} {% if label_text %} {{ label_text|safe if make_safe else label_text }} {% endif %}
{%- if caller -%} {{ caller() }} {%- elif text -%} {{ text|safe if make_safe else text }} {%- endif -%}
{% endmacro %}