Masthead

Creating an email header? This is the masthead for you


How they look

1. Image masthead

Ensure that you use an alt tag that effectively describes the heading. This image will flex to 100% width of the device, until it reaches 600px, at which point it will sit at 600px.

View demo Open in new window
320 x 568
View code
    
<tr>
  <td style="overflow: hidden;">
    <a href="#" rel="noopener noreferrer" style="text-decoration: none;"><img src="https://via.placeholder.com/1200x624" width="600" alt="Please define an alt text" style="display: block; width: 100%; max-width: 600px; height: auto;">
    </a>
  </td>
</tr>
  

2. Text only

View demo Open in new window
320 x 568
View code
    
<tr>
  <td style="background-color: #FFFFFF; color: #000000; overflow: hidden; padding-top: 16px; padding-bottom: 16px; padding-left: 16px;" bgcolor="#FFFFFF">
    <h1 class="gg-e-text gg-e-text__shout" style="margin: 0; font-size: 54px; line-height: 64px; font-family: 'Poppins', 'Helvetica', 'arial', sans-serif;">Big headline</h1>
    <p class="gg-e-text" style="margin: 0; font-family: 'Poppins', 'Helvetica', 'arial', sans-serif; font-size: 16px; font-weight: 400; line-height: 24px;">Optional subheadlines</p>
  </td>
</tr>