The components are arranged in the following categories:

Section components are used for the rough structure of the newsletter. Create a section and then fill it with containers, content components, interactive content components, grids, and AMP form components.

In most cases, the Section is the first component. It is a transparent base component. You can fill a section with other components such as a container, an image, or a text element. You can give a section a background color, a size, and different spacings.

With the use of containers, content elements such as texts, buttons, images, or grids can be positioned even more flexibly and responsively. Nevertheless, a container should be located within a section. Additional components can then be added to a container. Containers can also be used within containers, for example to add further spacings.

A section image has the same functions as a normal section. In addition, you can use it to insert a large background image that is displayed across the entire content width. This is particularly suitable for the header, for example.

In contrast to the Section Image, this component displays the background image on the full width of the newsletter.

Content components describe content-based components such as texts, buttons, and images.

Use buttons to link to your website or landing page or other links. In the component settings, you can select different button types and design them according to your wishes in the Styles' Menu.

Create exciting headlines and body text with the Text component. Click on a text to open the Richtext Editor. Here you can choose text formatting, colors, headline font formats and alignments, and more. In the Richtext Editor, you can also create simple HTML tables, view, and edit HTML code as an admin, and insert emojis.

This component allows you to separate content with a horizontal line. You can customize the length, width, and color. In the Styles menu, there are three different types available, which you can design.

This component represents a line that you can use to visually separate content. In contrast to the Simple Separator, you can add a word or a short text in the middle of the line.

The Separator is a horizontal line that separates content. With the Separator with Image, you can place a small image or icon in the middle of the line.

Add a bullet list. Uploaded individual images or icons can be used as bullets.

With the Spacer, you can easily add smaller spacings between components. Choose between three spacings. You can also define the sizes in the Styles' Menu.

To add images, use one of the many Image components. With the Image Block component, images are only displayed one below the other. To link the image, please use the Image Block Linked component.

With this component, images can be displayed exclusively one below the other. A link can be set, which will be opened when the user clicks on the image.

This component is optimal for displaying smaller images side by side.

With this component, you can display several small images side by side. The individual images can be linked. This makes it perfect for displaying small icons in the footer.

Interactive components make email campaigns even more exciting and versatile. Use the product feed to dynamically include products from your online store in your campaigns.

A slideshow allows you to include multiple images. The images are displayed in a gallery. Using arrows, you can switch between images within the sent e-mail.

If you send a campaign with a lot of text, this component is useful to hide a part of the text. By using a button with, e.g., “Read More” the rest of the text can be expanded as desired.

Include a clock that is to run down at a defined time. The countdown is suitable e.g. for sale notifications or product releases.

This component displays the product image in a large size. Product name and price are displayed below the image. Style this component under Product > Large/2 Column.

Add this component to the columns of a 2 Column Grid to display two products side by side. Price and product title are displayed below each product image. Style this component under Product > Medium.

Add this component to the columns of a 3 Column Grid to display three products side by side. Price and product title are displayed below each product image. Style this component under Product > Small.

This component displays only the product image. Use Product Box Large to display product name and price. The component can also be used with a Column Grid to display two or three products side by side.

The product information is displayed as in a 2 Column Grid. The left column displays the image. On the right side are the product details. The component can be styled in the Styles Menu via Product > Large/2 Column.

You can use the grid elements to divide your content horizontally.

A Column Grid is used to divide content horizontally. This component can have two, three or four columns. Content components can be added in the respective column. In the mobile view, the columns are automatically displayed one below the other.

As with the Column Grid, the Column Container divides content horizontally into columns. Here you can choose between two, three and four columns. The difference to the Column Grid is that the columns are displayed side by side in the mobile view.

Use AMP email campaigns that increase interaction and engagement rates. With AMP components, users can interact with the newsletter and fill out form fields directly in the inbox. In doing so, they don't have to be redirected to a landing page. The list fields must then be created in the respective automation list so that the data is collected in JUNE, or even an external system.

To build an AMP form, you need this component at the beginning. Every other AMP component is then placed in this form element.

This component is an input field. Here users can enter any text or for example their email address.

This component serves as a large input field. For example, for messages or comments.

A checkbox represents a small square that can be checked. Your subscribers can use the checkboxes to select one or more options defined by you.

Like the checkbox, this element can be checked. The difference with the checkbox is that with the Radio Group, only one of the options you set can be selected. For example, you can use this component to query the gender of your subscribers.

Build a dropdown menu with different choices. This way, users can use the menu to select their desired option. You can add as many fields as you want. This saves space, unlike the checkbox component.

The button is placed at the end of the form to save all the user's input and submit it to your JUNE.

Create a small pop-up that opens once the user fills in all the mandatory fields and clicks the Submit button.

Once the user clicks the submit button but has not filled in all the mandatory fields, this component will open a small pop-up indicating that not all the fields have been filled in.

The component can be used to build a small navigation within the form. This helps to structure a long form and to build it clearly.

​