Email Templates
Search the component library

Email Templates

v1.0.0

Use email templates to create messages that include information that infrequently changes from message to message. Messages can contain critical information, require decisions, or involve multiple tasks.

Templates

Here are a few examples of common types of email templates:

  • Email Verification used to verify users' email address for creating an account.
  • Username or Password Reset provides users with a link to reset their credentials.
  • Password Reset Confirmation informs users that their password was successfully reset.

Email Verification

Username or Password Reset

Password Reset Confirmation

Components

You can create an email template using these basic components. If there is something that's not defined here, feel free to contact Ed Zee (edward.zee@pearson.com).

  • Logo

  • Greeting

  • Heading explains what email message is about.

  • Body copy is used for main content.

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

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

  • Signature

  • Divider separates the body from footer.

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

  • Button is primary call to action.

Design

Headings

Choose the heading that works best with 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. So, when you design, don't rely on breakpoints, instead, come up with a design that fits all sizes.

Email Verification

iPhone 6 (IOS 9)

Redlines

Email frameDigital Ice Blue #d6ebe8
LogoHeight: 45px
GreetingText size: 16px
Text line-height: 24px
Charcoal #252525
HeadingText size: Light 28px
Text line-height: 38px
Charcoal #252525
Body copyText style: same as greeting
TableStyle: Standard table
For numeric values, right-align the values for better readability
LinksGeneric Link
SignatureText style: same as greeting
DividerThickness: 1px
Concrete #c7c7c7
FooterText size: 12px
Text line-height: 16px
Medium Gray #6A7070
ButtonsStyle: Primary Button
Size: Large
On mobile devices, buttons expand to full width

Allow 60px spacing under the first block of text

Separate contents using 40px blocks

The frame adjusts to the width of the viewport

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.

Buttons versus links

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