Email Templates
Search the component library

Email Templates

v1.0.0

Emails inform the users about a specific task or message. They may contain critical information, require decisions, or involve multiple tasks.

Templates

Here are a few examples of common email templates:

  • Email Verification verifies users’ email address to complete the account creation process.
  • Username or Password Reset provides the users with a link to reset the credentials.
  • Password Reset Confirmation informs the users of a successful password reset.

Email Verification

Username or Password Reset

Password Reset Confirmation

Components

You can create an email template with these basic components. If there is something that’s not defined here, feel free to contact Linda Tsai (linda.tsai@pearson.com).

  • Logo

  • Greeting

  • Heading is a line of text that explains what the email is about.

  • Body Copy is used for the main content.

  • Table is helpful for displaying a lot of information for easy viewing.

  • Link is best for non-crucial call to action.

  • Signature

  • Divider separates the body from the footer.

  • Footer contains standard Pearson information. You must follow the copy provided in the templates, but if you need to add more information in the footer, place it between the divider and the current copy.

  • Button is the primary call to action.

Design

Heading

Heading is option. There are three different layouts regarding the usage of the heading. Choose the one that works best depending on the message.

Responsive Behavior

The content adjusts to the size of the viewport, and the email frame (in digital ice blue) shrinks proportionally with the content.

Email design differs from web design in a way that not all email clients support media query, which means that some clients won’t be able to tell how wide the viewport is. Therefore, when you design, don’t rely on breakpoints, instead, come up with a design that fits all sizes.

Desktop

iPhone 6 (IOS 9)

Redlines

Email Frame
Logo
  • Height: 45px
Greeting
  • Text size: 16px
  • Text line-height: 24px
  • Charcoal #252525
Heading
  • Text size: Light 28px
  • Text line-height: 38px
  • Charcoal #252525
Body Copy
  • Text style: same as greeting
Table
  • Style: Basic Table
  • For numeric values, right-align the values for better readability
Links
Signature
  • Text style: same as greeting
Divider
Footer
  • Text size: 12px
  • Text line-height: 16px
  • Medium Gray #6A7070
Buttons

Allow 60px spacing under the first block of text

Separate contents using 40px blocks

The frame adjusts to the width of the viewport

Email Content

Be clear and concise

Users are busy, so don’t make them read too much. Simplify the information to help users focus on the message.

Calls to action

The main point of a of call to action is to get users to do something. It should be more descriptive than “click here”. Start with command verbs to clarify what clicking a link or button will get to. For example:

  • Reset password
  • Order now
  • Learn more

Give the users a reason why they should perform the task. It helps to explain the benefit of taking the action or give a sense of urgency.

A general rule of thumb is to use only one button for the main call to action so it is clear to the users what they should do.

Unlike buttons, it’s easier to include links within the copy of your email so it doesn’t cause an abrupt halt. However, that makes links easy to miss. An easy way to do that is to lengthen the number of words covered in a link. Besides, use meaningful description for the link text instead of the URL.

Learn more about best email design practices by MailChimp

Changelog

1.0.0

Initial version