Image components

The pictures, but not the hand drawn ones.

How they look

Centered image

320 x 568

View code

    
<tr>
  <td style="padding-top: 16px; padding-bottom: 16px; background-color: #FFFFFF; color: #000000; overflow: hidden;" bgcolor="#FFFFFF">
    <img style="display: block; margin: auto; text-align: center; max-width: 200px; width: 100%;" src="https://www.giffgaff.com/styleguide/images/optimised-assets/homepage-new-visitors/sally.png" alt="Please define an alt text">
  </td>
</tr>

Full width image

This image will be set to 100% of it’s parent’s size.

View demo

320 x 568

View code

    
<tr>
  <td style="padding-top: 16px; padding-right: 16px; padding-bottom: 16px; padding-left: 16px; background-color: #FFFFFF; color: #000000; overflow: hidden;" bgcolor="#FFFFFF">
    <a href="#" rel="noopener noreferrer" style="text-decoration: none;"><img src="https://via.placeholder.com/1136x400" width="568" alt="Please define an alt text" style="display: block; width: 100%; max-width: 568px; height: auto; margin: 0 auto;">
    </a></td>
</tr>

Image on the left, text on the right

On small screens, the image will sit on top of the copy.

View demo

320 x 568

View code

    
<tr>
  <td style="padding-top: 16px; padding-right: 16px; padding-bottom: 16px; padding-left: 16px; margin: auto; text-align: center; font-size: 0; background-color: #FFFFFF; color: #000000; overflow: hidden;" align="center" bgcolor="#FFFFFF">
    <!--[if (gte mso 9)|(IE)]>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="45%" valign="top" style="text-align: center;">
<![endif]-->
    <div class="gg-e-multi-col__child" style="max-width: 254px; display: inline-block; vertical-align: top; width: 100%;">
      <table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation" style="overflow: hidden;">
        <tr>
          <td class="gg-e-padding__right--mob-0" style="padding-right: 8px; padding-bottom: 8px; margin: auto; text-align: center; overflow: hidden;" align="center">
            <img src="https://www.giffgaff.com/styleguide/images/optimised-assets/homepage-new-visitors/sally.png" alt="Please define an alt text" style="display: block; width: 100%; max-width: 254px;">
          </td>
        </tr>
      </table>
    </div>
    <!--[if (gte mso 9)|(IE)]>
</td><td width="55%%" valign="top" style="text-align: center;">
<![endif]-->
    <div class="gg-e-multi-col__child" style="max-width: 298px; display: inline-block; vertical-align: top; width: 100%;">
      <table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation" style="overflow: hidden;">
        <tr>
          <td class="gg-e-padding__left--mob-0" style="padding-top: 8px; padding-bottom: 8px; padding-left: 8px; text-align: left; overflow: hidden;" align="left">
            <p class="gg-e-text" style="margin: 0; font-family: 'Poppins', 'Helvetica', 'arial', sans-serif; font-size: 16px; font-weight: bold; line-height: 24px;">Title here</p>
            <p class="gg-e-text" style="margin: 0; font-family: 'Poppins', 'Helvetica', 'arial', sans-serif; font-size: 16px; font-weight: 400; line-height: 24px;">Content goes here</p>
          </td>
        </tr>
      </table>
    </div>
    <!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
  </td>
</tr>