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> 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.
Use a <title> tag to add a title to your email. We add the title to the <head> of the message.
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.
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.
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.