goodybag with details

This little beauty shows what comes with a goodybag

How they look

Remember, emails can’t render SVGs so always use our goodybag PNG images.

View demo Open in new window
Open in new window
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">
    <table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation" style="overflow: hidden;">
      <tbody>
        <tr>
          <td style="padding-bottom: 16px; overflow: hidden;">
            <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="overflow: hidden;">
              <tbody><tr>
                <td style="overflow: hidden;"><img src="https://static.giffgaff.com/design-system/brand/latest/goodybags/20-pound-goodybag.png" alt="£20 goodybag" width="82" style="display: block; width: 100%; max-width: 82px; padding-right: 16px;"></td>
                <td style="vertical-align: bottom; overflow: hidden;" valign="bottom">
                  <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="overflow: hidden;">
                    <tbody><tr>
                      <td style="padding-top: 8px; padding-right: 8px; overflow: hidden;"><img src="https://static.giffgaff.com/design-system/brand/latest/goodybags/allowance-icons/data.png" width="16" alt="xx goodybag" style="display: block;"></td>
                      <td style="padding-top: 8px; overflow: hidden;"><span class="gg-e-text" style="font-family: 'Poppins', 'Century Gothic', 'CenturyGothic', 'AppleGothic', sans-serif; font-size: 16px; font-weight: 400; line-height: 24px;">XX data</span></td>
                    </tr>
                    <tr>
                      <td style="padding-top: 8px; padding-right: 8px; overflow: hidden;"><img src="https://static.giffgaff.com/design-system/brand/latest/goodybags/allowance-icons/minutes.png" width="16" style="display: block;"></td>
                      <td style="padding-top: 8px; overflow: hidden;"><span class="gg-e-text" style="font-family: 'Poppins', 'Century Gothic', 'CenturyGothic', 'AppleGothic', sans-serif; font-size: 16px; font-weight: 400; line-height: 24px;">Unlimited minutes</span></td>
                    </tr>
                    <tr>
                      <td style="padding-top: 8px; padding-right: 8px; overflow: hidden;"><img src="https://static.giffgaff.com/design-system/brand/latest/goodybags/allowance-icons/texts.png" width="16" style="display: block;"></td>
                      <td style="padding-top: 8px; overflow: hidden;"><span class="gg-e-text" style="font-family: 'Poppins', 'Century Gothic', 'CenturyGothic', 'AppleGothic', sans-serif; font-size: 16px; font-weight: 400; line-height: 24px;">Unlimited texts</span></td>
                    </tr>
                  </tbody></table>
                </td>
              </tr>
            </tbody></table>
          </td>
        </tr>
      </tbody>
    </table>
  </td>
</tr>