Box

A simple div with a strip of color at the top


How they look

Available in our four primary colours.

View demo Open in new window
320 x 568
View 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>