If you can't see it in all its glory click hereeye
giffgaff

Membername:  xxxx Phone number: xxxx

expander

responsive email template

The introduction can have several paragraphs, but it should be short enough to make the main image visible:

Main email image

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):

  1. As with regular lists, we can have formatted text and items with several lines of text.
  2. Links are also allowed.
  3. 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):

Image inside a dark box


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):

Main email image

Numbered lists are also allowed:

  1. This is the first item of the numbered list
  2. 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)

Table image

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

Table image

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

Table image

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.

Main email image

Second column

Second column has the same dimensions as the first column

Main email image


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)
Table image

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
Table image

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
Table image
  • 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
Table image

Images here have the same 70x80 size. This means that there is less space left for the text.


Second item with a list
Table image
  • Lists look nice here.
  • Short text is better.
  • Even on mobile.

Last item
Table image

Do not try to center the text vertically by adding empty lines.


And also two columns inside:

Box 1

Table image

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

Table image

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

Table image

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

Table image

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:

Member name xxxxx
Phone number 07xxxxxxxxx
email me@myprovider.com

There can be also yellow tables:

Member name xxxxx
Phone number 07xxxxxxxxx
email me@myprovider.com
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):

Image inside a dark box

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):

Image inside a dark box

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):

Image inside a dark box

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):

Image inside a dark box

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):

Image inside a dark box

Follow us: on Facebook on Twitter on Google+ on Youtube on Instagram

Account

Password reset

Top-up

Send a SIM to a friend

Help

Ask the Community

Ask an agent

Replies from agents

News

Blog

Twitter

Facebook

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.