Box
A simple div with a strip of color at the top
How they look
Available in our four primary colours.
View demoView code
<tr>
<td class="gg-e-t__white gg-e-padding__right--small gg-e-padding__bottom--tiny gg-e-padding__left--small" style="padding-bottom: 8px; padding-right: 16px; padding-left: 16px; background-color: #FFFFFF; color: #000000; overflow: hidden;" bgcolor="#FFFFFF">
<table class="gg-e-max-width--container-width" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%; max-width: 568px; overflow: hidden;" width="100%">
<tr>
<td colspan="3" class="gg-e-border-top--light-blue gg-e-bgcolor__gallery gg-e-padding__small" style="padding-top: 16px; padding-right: 16px; padding-bottom: 16px; padding-left: 16px; background-color: #ECECEC; overflow: hidden; border-top: solid 8px #35ADCE;" bgcolor="#ECECEC">
<table class="gg-e-max-width--container-width" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%; max-width: 568px; overflow: hidden;" width="100%">
<tr>
<td class="gg-e-padding__bottom--tiny" style="padding-bottom: 8px; overflow: hidden;">
<h2 class="gg-e-text" style="margin: 0; font-size: 16px; line-height: 24px; font-family: 'Poppins', 'Century Gothic', 'CenturyGothic', 'AppleGothic', sans-serif;">I have a blue top</h2>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="gg-e-t__white gg-e-padding__right--small gg-e-padding__bottom--tiny gg-e-padding__left--small" style="padding-bottom: 8px; padding-right: 16px; padding-left: 16px; background-color: #FFFFFF; color: #000000; overflow: hidden;" bgcolor="#FFFFFF">
<table class="gg-e-max-width--container-width" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%; max-width: 568px; overflow: hidden;" width="100%">
<tr>
<td colspan="3" class="gg-e-border-top--light-blue gg-e-bgcolor__gallery gg-e-padding__small" style="padding-top: 16px; padding-right: 16px; padding-bottom: 16px; padding-left: 16px; background-color: #ECECEC; overflow: hidden; border-top: solid 8px #EB5F8E;" bgcolor="#ECECEC">
<table class="gg-e-max-width--container-width" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%; max-width: 568px; overflow: hidden;" width="100%">
<tr>
<td class="gg-e-padding__bottom--tiny" style="padding-bottom: 8px; overflow: hidden;">
<h2 class="gg-e-text" style="margin: 0; font-size: 16px; line-height: 24px; font-family: 'Poppins', 'Century Gothic', 'CenturyGothic', 'AppleGothic', sans-serif;">I have a pink top</h2>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="gg-e-t__white gg-e-padding__right--small gg-e-padding__bottom--tiny gg-e-padding__left--small" style="padding-bottom: 8px; padding-right: 16px; padding-left: 16px; background-color: #FFFFFF; color: #000000; overflow: hidden;" bgcolor="#FFFFFF">
<table class="gg-e-max-width--container-width" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%; max-width: 568px; overflow: hidden;" width="100%">
<tr>
<td colspan="3" class="gg-e-border-top--light-blue gg-e-bgcolor__gallery gg-e-padding__small" style="padding-top: 16px; padding-right: 16px; padding-bottom: 16px; padding-left: 16px; background-color: #ECECEC; overflow: hidden; border-top: solid 8px #72B72A;" bgcolor="#ECECEC">
<table class="gg-e-max-width--container-width" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%; max-width: 568px; overflow: hidden;" width="100%">
<tr>
<td class="gg-e-padding__bottom--tiny" style="padding-bottom: 8px; overflow: hidden;">
<h2 class="gg-e-text" style="margin: 0; font-size: 16px; line-height: 24px; font-family: 'Poppins', 'Century Gothic', 'CenturyGothic', 'AppleGothic', sans-serif;">I have a green top</h2>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="gg-e-t__white gg-e-padding__right--small gg-e-padding__bottom--tiny gg-e-padding__left--small" style="padding-bottom: 8px; padding-right: 16px; padding-left: 16px; background-color: #FFFFFF; color: #000000; overflow: hidden;" bgcolor="#FFFFFF">
<table class="gg-e-max-width--container-width" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%; max-width: 568px; overflow: hidden;" width="100%">
<tr>
<td colspan="3" class="gg-e-border-top--light-blue gg-e-bgcolor__gallery gg-e-padding__small" style="padding-top: 16px; padding-right: 16px; padding-bottom: 16px; padding-left: 16px; background-color: #ECECEC; overflow: hidden; border-top: solid 8px #FCC31E;" bgcolor="#ECECEC">
<table class="gg-e-max-width--container-width" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%; max-width: 568px; overflow: hidden;" width="100%">
<tr>
<td class="gg-e-padding__bottom--tiny" style="padding-bottom: 8px; overflow: hidden;">
<h2 class="gg-e-text" style="margin: 0; font-size: 16px; line-height: 24px; font-family: 'Poppins', 'Century Gothic', 'CenturyGothic', 'AppleGothic', sans-serif;">I have a yellow top</h2>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>