Masthead

Creating an email header? This is the masthead for you

How they look

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

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

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>

Masthead

How they look

1. Image masthead

2. Text only