Syntax - optional top-level tags

Learn how to define optional, top-level elements in your component.

Looking for overviews of <script> and <template>? Check out Required syntax.

We offer four, optional, top-level elements to help you create custom components:

You can also set directives in these tags.

style

<style> tags allow you to add CSS to your component. Pass them to the <template> tag to style your content. Check out our article on styling for more.

title

Use a <title> tag to add a title to your email. We add the title to the <head> of the message.

Multiple titles

If you create multiple, identical titles, we only add one to the <head>.

If you create multiple, non-identical <title> tags, we place all in the <head> and let the browser decide which to display.

meta

You can add <meta> tags to the message. These will render in the <head> of the message.

If multiple, identical tags are added, only one is placed in the head.

<meta name="robots" content="noindex" />
<template>This is the component</template>

If you create multiple, non-identical <meta> tags, we place all in the <head> and let the browser decide which to use.

You can link to external stylesheets with the <link> tag. This makes it easy to add support for hosted fonts.

If multiple, identical tags are added, only one is placed in the head.

<script>
    const fontFamily = 'Inter'
</script>
<link rel="stylesheet" #set:href="https://fonts.googleapis.com/css?family=${fontFamily}">
<template>
    <p #style:font-family="fontFamily"><slot /></p>
</template>

If you create multiple, non-identical <link> tags, we place all in the <head> and let the browser decide if it needs to fetch each one.

Directives

For these top-level tags - <title>, <meta> , <link>, <style> - you can use directives to set attributes dynamically and conditionally add/remove them.

You can use #if, #else-if, and #else for conditionally displaying these tags.

<script>
    const useExternal = true;
</script>
<link #if="useExternal" rel="stylesheet" href="https://example.com/hosted.css">
<style #else>
    /* local styles */
</style>

You can also dynamically set properties on the <title> , <meta> and <link> tags using #set.

Previous ArticleNext Article