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
.