responsive email template
The introduction can have several paragraphs, but it should be short enough to make the main image visible:
After the main image emails can have more text, with more detailed explanations. Lists can be used for organizing
information in a clearer way:
- Each item of the list can have also formatted text or
links. Items can have lots of text so they take several lines.
Although nested lists are supported, its usage is discouraged.
- Lists can be used to organize a set of options, instructions, steps or features.
- Short lists are recommended over long and complicated lists.
Numbered lists can also be used (but they should only be used when strictly necessary):
- As with regular lists, we can have formatted text and items with several lines of text.
- Links are also allowed.
- Again, short lists are better
Header 4
Dark boxes are used to highlight important information. These boxes can have
rich text, and the standard elements.
- Lists are also allowed inside dark boxes.
- They render exactly the same way as regular lists.
Images in dark boxes are permitted, but they must be smaller than the regular ones. Also,
they must use a grey background (hex code #f4f4f4):
|
Header 3
|
Some emails may contain a column in the right, so they can fit more
information in less space.
- Lists are allowed here.
- Basically, any kind of regular formatting is allowed inside the left column.
This left column may contain as well a main image, which will have a
smaller size than a regular main image (and won't have a mobile version):
Numbered lists are also allowed:
- This is the first item of the numbered list
- This one is the second and last one.
Important note
When using two columns emails, it's recommended to not mix them with
single column sections (so the whole mail will have two columns).
|
First item (header 5)
Regular text with links, and any kind of allowed
formatting. Multiple lines are allowed and the text can be smaller than the image.
Second item
Regular text with links, and any kind of allowed
formatting. Multiple lines are allowed and the text can be smaller than the image.
Last item
Regular text with links, and any kind of allowed
formatting. Multiple lines are allowed and the text can be smaller than the image.
|
|
First column
Emails can also contain two similar columns (separated by a line). This is useful to display lots of information (like statement usages) indiscriminately across both columns.
|
Second column
Second column has the same dimensions as the first column
|
Sometimes is better to present information inline with images, so the information is displayed in a more
visual way. To do so, 70x80 icon images are used.
The icons should always be in the left column, and items should be separated by lines:
First item (Header 5)
|
|
Regular text with links, and any kind of allowed
formatting. Multiple lines are allowed and the text can be smaller than the image.
|
Another item
|
|
If the text is really really long, there is no problem in using several paragraphs.
When there are several paragraphs, the text may become bigger than the image, which may
look bad in mobile (although it's allowed).
|
The last item
|
|
- Lists can be used here as well.
- But they must be kept small, because long lists may look bad.
- Three one-line items fit perfectly (only on desktop).
|
Header 4
Dark boxes can also have lists with inline images:
First item
|
|
Images here have the same 70x80 size. This means that there is less
space left for the text.
|
Second item with a list
|
|
- Lists look nice here.
- Short text is better.
- Even on mobile.
|
Last item
|
|
Do not try to center the text vertically by adding empty lines.
|
|
And also two columns inside:
Box 1
Regular text with links, and any kind of allowed
formatting. Multiple lines are allowed and the text can be smaller than the image.
|
Box 2
Regular text with links, and any kind of allowed
formatting. Multiple lines are allowed and the text can be smaller than the image.
|
Box 3
Regular text with links, and any kind of allowed
formatting. Multiple lines are allowed and the text can be smaller than the image.
|
Box 4
Regular text with links, and any kind of allowed
formatting. Multiple lines are allowed and the text can be smaller than the image.
|
|
Tables
Tables can be used to display tabular information; like information about the user or statistics:
There can be also yellow tables:
| Member name |
xxxxx |
| Phone number |
07xxxxxxxxx |
| email |
[email protected] |
| Birth date |
7th July 1910 |
| Total points |
500 points |
Multicolumn tables are also supported, and tables can have a header.
For stats,a highlighted row can be used to display important information:
| |
Jan |
Feb |
Mar |
April |
| Texts |
41 |
20 |
32 |
234 |
| Mins |
2210 |
1876 |
1423 |
19 |
| MB |
230.44 |
140.33 |
11.45 |
109.22 |
| Total |
230.44 |
140.33 |
11.45 |
109.22 |
|
Yellow boxes
Yellow boxes can exist. the links have different color.
- Each item of the list can have also formatted text or
links. Items can have lots of text so they take several lines.
Although nested lists are supported, its usage is discouraged.
- Lists can be used to organize a set of options, instructions, steps or features.
- Short lists are recommended over long and complicated lists.
Header 4
Dark boxes are used to highlight important information. These boxes can have
rich text, and the standard elements.
- Lists are also allowed inside dark boxes.
- They render exactly the same way as regular lists.
Images in dark boxes are permitted, but they must be smaller than the regular ones. Also,
they must use a grey background (hex code #f4f4f4):
|
|
Green boxes
Green boxes can exist. the links have different color.
- Each item of the list can have also formatted text or
links. Items can have lots of text so they take several lines.
Although nested lists are supported, its usage is discouraged.
- Lists can be used to organize a set of options, instructions, steps or features.
- Short lists are recommended over long and complicated lists.
Header 4
Dark boxes are used to highlight important information. These boxes can have
rich text, and the standard elements.
- Lists are also allowed inside dark boxes.
- They render exactly the same way as regular lists.
Images in dark boxes are permitted, but they must be smaller than the regular ones. Also,
they must use a grey background (hex code #f4f4f4):
|
|
Turquoise boxes
Yellow boxes can exist. the links have different color.
- Each item of the list can have also formatted text or
links. Items can have lots of text so they take several lines.
Although nested lists are supported, its usage is discouraged.
- Lists can be used to organize a set of options, instructions, steps or features.
- Short lists are recommended over long and complicated lists.
Header 4
Dark boxes are used to highlight important information. These boxes can have
rich text, and the standard elements.
- Lists are also allowed inside dark boxes.
- They render exactly the same way as regular lists.
Images in dark boxes are permitted, but they must be smaller than the regular ones. Also,
they must use a grey background (hex code #f4f4f4):
|
|
Blue boxes
Blue boxes can exist. the links have different color.
- Each item of the list can have also formatted text or
links. Items can have lots of text so they take several lines.
Although nested lists are supported, its usage is discouraged.
- Lists can be used to organize a set of options, instructions, steps or features.
- Short lists are recommended over long and complicated lists.
Header 4
Dark boxes are used to highlight important information. These boxes can have
rich text, and the standard elements.
- Lists are also allowed inside dark boxes.
- They render exactly the same way as regular lists.
Images in dark boxes are permitted, but they must be smaller than the regular ones. Also,
they must use a grey background (hex code #f4f4f4):
|
|
Grey boxes
Grey boxes can exist. the links have different color.
- Each item of the list can have also formatted text or
links. Items can have lots of text so they take several lines.
Although nested lists are supported, its usage is discouraged.
- Lists can be used to organize a set of options, instructions, steps or features.
- Short lists are recommended over long and complicated lists.
Header 4
Dark boxes are used to highlight important information. These boxes can have
rich text, and the standard elements.
- Lists are also allowed inside dark boxes.
- They render exactly the same way as regular lists.
Images in dark boxes are permitted, but they must be smaller than the regular ones. Also,
they must use a grey background (hex code #f4f4f4):
|
|
|
What do you think about this email? Let us know
Follow us:
|
|
Full terms and conditions and privacy policy. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Maecenas malesuada pellentesque lorem. Sed id
erat non quam laoreet eleifend. In molestie faucibus tellus ut sollicitudin.
Vestibulum gravida tincidunt metus, at commodo mi cursus id. Donec interdum,
sem eget tristique vulputate, est sapien blandit eros, vulputate fermentum
arcu felis volutpat dui. Praesent egestas eleifend varius. Proin scelerisque
dictum porttitor. Suspendisse at enim neque. Phasellus lobortis convallis
massa sit amet elementum. Nulla et lorem velit, quis congue metus.
Quisque varius imperdiet justo, eu consequat massa feugiat a. Mauris eu
ligula ultrices urna fringilla adipiscing ut eu quam. Fusce auctor, neque
vitae ullamcorper commodo, justo neque vulputate elit, sit amet porta tellus
lorem a erat. Suspendisse potenti. Quisque eget lectus dui. Duis dolor nisl,
facilisis eget accumsan eu, lacinia a felis. Praesent rutrum urna mattis eros
iaculis egestas. Pellentesque sollicitudin tincidunt dictum.
|
|
