Home

Components

m-accordion

AMP Accordion. Allows you to create "accordions" in emails

m-accordion-body

AMP Body of an Accordion Section. Allows you to create the body of a section in an "accordion."

m-accordion-section

AMP Section of an Accordion. Allows you to create a section in an "accordion."

m-accordion-title

AMP Title of an Accordion Section. Allows you to create a clickable section heading in the "accordion" that expands or collapses the content of the section

m-carousel

AMP Carousel. Allows you to create carousels of images and content inside the email

m-form

AMP form. Allows you to create forms in an email When saving an email in Ampier, the action attribute will be generated and substituted automatically

When using various fields (input, select, textarea), you can assign special attributes to them. These will help while saving the code in Ampier

- The data-title attribute allows you to set the Title of the field (used when displaying data)

- Setting the value of the data-required attribute to ‘1’ will allow you to specify that the field is required.

Use data-amp-attributes for apply amp-bind states, E.g.:

data-amp-hidden="mystate == 1"

m-form-error

Allows you to display a validation error message when a form is submitted. Can only be nested within an m-form Supports output patterns with double square brackets

m-form-success

Displays a form success message. Can only be nested within an m-form Supports output patterns with double square brackets

m-list

AMP list. The amp-list component fetches dynamic content from a CORS JSON endpoint. The response from the endpoint contains data, which is rendered in the specified template.

m-template

Tag for using amp-mustache The amp-mustache component alone cannot be used in TJML. For it to work correctly, pick the m-template where necessary. To insert dynamic elements, use double square brackets

 [[]] 

instead of curly brackets

 {{}} 

m-body

The overall wrapping of the entire email. The tag is required and can be used in the email only once.

m-box

Stacking blocks. Can only be used inside m-boxes

m-boxes

Wrapping for stacking blocks, can only contain m-box elements

m-button

Button

m-column

Non-stacking block. (similar to a table cell). Can only be used inside an m-row element

m-head

Specifies the preheader parameters. Can contain a style tag with the description of styles.

m-img

Adds an image.

m-padding

Creates a vertical indent

m-row

Wraps non-stacking blocks (similar to a table row). Can only contain m-column elements

m-separator

Separator (a horizontal line)

m-style

Hosts your own styles, similar to the style tag

m-text

Adds text or link. Can contain regular html tags, e.g., <a>, <b>, etc.

m-wrap

Wraps any element. Allows you to limit the width, set the background color or background image

tj-ui

The tag is required and contains only an m-body. Forms the framework interface

m-accordion

AMP Accordion. Allows you to create "accordions" in emails

Properties

Name	Type	Description
[animate]	Boolean	Animated folding and unfolding of sections
[expand-single-section]	Number	Expands a single section

Example

<m-accordion animate expand-single-section>
	<m-accordion-section expanded>
		<m-accordion-title>Title1</m-accordion-title>
		<m-accordion-body>
			content1
		</m-accordion-body>
	</m-accordion-section>
	<m-accordion-section>
		<m-accordion-title>Title2</m-accordion-title>
		<m-accordion-body>
			content2
		</m-accordion-body>
	</m-accordion-section>
	<m-accordion-section>
		<m-accordion-title>Title3</m-accordion-title>
		<m-accordion-body>
			content3
		</m-accordion-body>
	</m-accordion-section>
</m-accordion>

m-accordion-body

AMP Body of an Accordion Section. Allows you to create the body of a section in an "accordion."

Example

<m-accordion>
	<m-accordion-section>
		<m-accordion-title>Title</m-accordion-title>
		<m-accordion-body>
			content
		</m-accordion-body>
	</m-accordion-section>
</m-accordion>

m-accordion-section

AMP Section of an Accordion. Allows you to create a section in an "accordion."

Properties

Name	Type	Description
[expanded]	Boolean	display opened by default (works only in the amp version of the letter)

Example

<m-accordion>
	<m-accordion-section expanded>
		<m-accordion-title>Title</m-accordion-title>
		<m-accordion-body>
			content
		</m-accordion-body>
	</m-accordion-section>
</m-accordion>

m-accordion-title

AMP Title of an Accordion Section. Allows you to create a clickable section heading in the "accordion" that expands or collapses the content of the section

Example

<m-accordion>
	<m-accordion-section>
		<m-accordion-title>Title</m-accordion-title>
		<m-accordion-body>
			content
		</m-accordion-body>
	</m-accordion-section>
</m-accordion>

m-carousel

AMP Carousel. Allows you to create carousels of images and content inside the email

Properties

Name	Type	Default	Description
[width]	Number	600	Carousel width. Must be set in pixels
[height]	Number	300	Carousel height. Must be set in pixels
[layout]	String	responsive	The layout of the carousel. Allowed values: fill, fixed, fixed-height, flex-item, intrinsic, nodisplay, responsive
[type]	String	slides	Carousel type (slides
[loop]	Boolean		Carousel loop
[autoplay]	Boolean		Carousel autoplay: the slides advance without user interaction
[delay]	Number	5000	Autoplay time

Example

<m-carousel width="600" height="350">
   <m-img src="img/img1.png" width="100%" height="350" alt=""></m-img>
   <m-img src="img/img2.png" width="100%" height="350" alt=""></m-img>
   <m-img src="img/img3.png" width="100%" height="350" alt=""></m-img>
</m-carousel>

m-form

AMP form. Allows you to create forms in an email When saving an email in Ampier, the action attribute will be generated and substituted automatically

When using various fields (input, select, textarea), you can assign special attributes to them. These will help while saving the code in Ampier

- The data-title attribute allows you to set the Title of the field (used when displaying data)

- Setting the value of the data-required attribute to ‘1’ will allow you to specify that the field is required.

Use data-amp-attributes for apply amp-bind states, E.g.:

data-amp-hidden="mystate == 1"

Properties

Name	Type	Default	Description
[action]	string	"create"	Form submission address. If set to ‘create’, the form will be created when the campaign is saved in Ampier
[id]	string	"rand()"	Specifies the state of the form. Upon successful submission, the state changes to ‘true’, which can be used to hide the form
[on]	string	"submit-success: AMP.setState({formId: true})"	AMP event handler. If set or generated automatically, the ID of the m-form element will be substituted for formId
[data-title]	string		Used to name a form component when saved in Ampier

Example

<m-form action="https://ampier.io/amp/post/123?key=mykey&format=json">
   ...
</m-form>

m-form-error

Allows you to display a validation error message when a form is submitted. Can only be nested within an m-form Supports output patterns with double square brackets

Example

<m-form>
 <m-form-error>[[#error]]incorrect <b>[[title]]</b><br />[[/error]]</m-form-error>
</m-form>

Example

<m-form>
 <m-form-error></m-form-error>
</m-form>

m-form-success

Displays a form success message. Can only be nested within an m-form Supports output patterns with double square brackets

Example

<m-form>
 <m-form-success>Thanks you for submit<br /> [[success]]</m-form-success>
</m-form>

Example

<m-form>
 <m-form-success></m-form-success>
</m-form>

m-list

AMP list. The amp-list component fetches dynamic content from a CORS JSON endpoint. The response from the endpoint contains data, which is rendered in the specified template.

Properties

Name	Type	Default	Description
src	string		URL of list data
[data-title]	string		Used to name a form component when saved in Ampier
[max-items]	number		Maximum of items will be shown
[layout]	string	"fill"	Layout type (fill
[width]	number		width in px
[height]	number		height in px

Example

<m-list src="https://ampier.io/amp/get/123?key=mykey&format=json" max-items="3">
   <div>[[comment]]</div>
</m-list>

m-template

Tag for using amp-mustache The amp-mustache component alone cannot be used in TJML. For it to work correctly, pick the m-template where necessary. To insert dynamic elements, use double square brackets

 [[]] 

instead of curly brackets

 {{}} 

Example

<m-template>
  	<div class="comment_item_author">
  	 <span>[[author]]</span>  [[time]]
  	</div>
  	<div class="comment_item_txt">
  	  [[comment]]
  	</div>
</m-template>

m-body

The overall wrapping of the entire email. The tag is required and can be used in the email only once.

Properties

Name	Type	Default	Description
[bgcolor]	string	"#ffffff"	The background color of the entire email
[color]	string	"#000000"	Text color
[font-family]	string	"Verdana, Arial, Helvetica, sans-serif"	Default font family
[font-size]	string	"14px"	Default font size
[line-height]	string	"normal"	Default line height

Example

<m-body bgcolor="#F2F5F8" font-family="Helvetica, Arial, Tahoma, sans-serif" font-size="17px" line-height="normal">
  some tjml code
</body>

m-box

Stacking blocks. Can only be used inside m-boxes

Properties

Name	Type	Default	Description
[align]	string	"center"	Horizontal alignment. Can be left / right / center
[valign]	string	"top"	Vertical alignment. Can be top / bottom / middle
[width]	string	300	Block width in px

Example

<m-boxes align="left" valign="middle">
 <m-box width="435" align="left">...</m-box>
 <m-box width="165" align="left">...</m-box>
</m-boxes>

m-boxes

Wrapping for stacking blocks, can only contain m-box elements

Properties

Name	Type	Default	Description
[align]	string	"center"	Horizontal alignment. Can be left / right / center
[valign]	string	"top"	Vertical alignment. Can be top / bottom / middle
[inverted]	boolean		Reverses the direction of block stacking.
[direction]	string		Deprecated

Example

<m-boxes align="left" valign="middle">
 <m-box width="435" align="left">...</m-box>
 <m-box width="165" align="left">...</m-box>
</m-boxes>

m-button

Button

Properties

Name	Type	Default	Description
[bold]	Boolean		Bold typeface
[color]	string	"#ffffff"	Text color
[bgcolor]	string		Button color
[background]	string		Background image
[border-radius]	string		Button rounding radius
[border-color]	string		Border color
[border-width]	string		Border width
[border-style]	string		Border style (solid
[border]	string		Border width, style and color 1px solid #000000
[href]	string	"#"	URL
[height]	string	58	Button height in px
[width]	string	"100%"	Button width in px or percents
[font-family]	string	"Verdana, Arial, Helvetica, sans-serif"	Font family
[font-size]	string	"14px"	Font size in px or pt
[on]	string		AMP event handler

Example

<m-button href="https://ampier.io" height="40" width="250" bgcolor="#7C1BB7">Button</m-button>

m-column

Non-stacking block. (similar to a table cell). Can only be used inside an m-row element

Properties

Name	Type	Default	Description
[align]	string	"center"	Horizontal alignment. Can be left
[valign]	string	"top"	Vertical alignment. Can be top
[bgcolor]	string		Background color
[width]	string		Block width in px or percents
[height]	string		Block height in px
[border]	string		Border properties, e.g., #cccccc 2px solid
[border-top]	string		Border top properties, e.g.,#cccccc 2px solid
[border-right]	string		Border right properties, e.g., #cccccc 2px solid
[border-bottom]	string		Border bottom properties. E.G.: #cccccc 2px solid
[border-left]	string		Border left properties, e.g., #cccccc 2px solid
[border-radius]	string		Rounding radius
[padding]	string		Padding. Can be set by 1 to 4 parameters in px, according to the CSS standard

Example

<m-row>
  <m-column width="60" valign="middle">Col1</m-column>
  <m-column align="right">Col2</m-column>
</m-row>

m-head

Specifies the preheader parameters. Can contain a style tag with the description of styles.

Properties

Name	Type	Default	Description
[preheader]	string		Preheader text
[short-preheader]	boolean	false	Use short preheader

Example

<m-head preheader="my preheader" short-preheader></m-head>

m-img

Adds an image.

Properties

Name	Type	Default	Description
src	string		Source image URL
width	string		Image width
[height]	string		Image height
[alt]	string		Alt text — the text that the user will see if the image is not displayed
[title]	string		Title text
[href]	string		If the attribute is set, the image will turn into a link
[border-radius]	string		Rounding radius
[inline]	Boolean		Display the image inline
[font-family]	string	"Verdana, Arial, Helvetica, sans-serif"	Font family for alt texts
[font-size]	string	"14px"	Font size for alt texts
[color]	string	"#000000"	Font color for alt texts

Example

<m-img src="img/logo.png" href="https://ampier.io" width="100" height="60" alt="logo"></m-img>

m-padding

Creates a vertical indent

Properties

Name	Type	Default	Description
[size]	Number	10	Vertical indent size in px

Example

<m-padding size="15"></m-padding>

m-row

Wraps non-stacking blocks (similar to a table row). Can only contain m-column elements

Properties

Name	Type	Description
width	string	The width. Can be specified as pixels or percentages

Example

<m-row>
  <m-column width="60" valign="middle">Col1</m-column>
  <m-column align="right">Col2</m-column>
</m-row>

m-separator

Separator (a horizontal line)

Properties

Name	Type	Default	Description
[size]	Number	1	line weight
[color]	string	"#E2E3ED"	line color
[padding]	Number	10	the indent size before and after the line

Example

<m-separator size="2" color="#cccccc" padding="15"></m-separator>

m-style

Hosts your own styles, similar to the style tag

Example

<m-head><m-style>
.myclass{
  padding: 10px;
  width: 100%;
  background: #cccccc;
}
</m-style></m-head>

m-text

Adds text or link. Can contain regular html tags, e.g., <a>, <b>, etc.

Properties

Name	Type	Default	Description
[bold]	Boolean		Bold typeface
[text-decoration]	string	"none"	Underlined text
[color]	string	"#000000"	Text color
[href]	string		A link. If the attribute is specified, the text will be a link
[font-family]	string	"Verdana, Arial, Helvetica, sans-serif"	Font family
[font-size]	string	"14px"	Font size in px or pt
[line-height]	string	"140%"	Line height in px or percents

Example

<m-text bold color="#cccccc" font-size="12px">Lorem ipsum sit dolar</m-text>

Example

<m-text href="https://ampier.io" color="#0000cc">some link</m-text>

Example

<m-text color="#cccccc">text with some <a href="#" style="color:#0000cc">link</a></m-text>

m-wrap

Wraps any element. Allows you to limit the width, set the background color or background image

Properties

Name	Type	Default	Description
[width]	string	"100%"	Block width in px or percents
[height]	string		Block height in px
[outlook-width]	string		Allows you to set a custom width for Outlook (used for widescreen emails)
[align]	string	"center"	Horizontal alignment. Can be left
[valign]	string		Vertical alignment. Can be top
[padding]	string		Padding. Can be set by 1 to 4 parameters in px, according to the CSS standard
[bgcolor]	string		Background color
[border]	string		Border properties, e.g., #cccccc 2px solid
[border-top]	string		Border top properties, e.g., #cccccc 2px solid
[border-right]	string		Border right properties, e.g., #cccccc 2px solid
[border-bottom]	string		Border bottom properties, e.g., #cccccc 2px solid
[border-left]	string		Border left properties, e.g., #cccccc 2px solid
[border-radius]	string		Rounding radius
[box-shadow]	string		Box shadow
[background-image]	string		Background image
[outlook-background-image]	string		Allows you to set a custom background image for Outlook and Lotus (used for widescreen emails)
[background-position]	string		Background image position (Lotus and Outlook will ignore this attribute)

Example

<m-wrap width="600" bgcolor="#ccffff" align="center">
  ...
</m-wrap>

Example

<m-wrap width="1000" outlook-width="700" background-image="img/bg.png" outlook-background-image="img/bg_out.png">
  ...
</m-wrap>

tj-ui

The tag is required and contains only an m-body. Forms the framework interface

Properties

Name	Type	Description
[pixel-perfect]	string	The URL to the email mockup image for testing in the Pixel Perfect mode.
[theme]	string	dark or light theme of UI. System theme used by default