Foundation

Basics

When using Inky HTML, the <wrapper> tag will create a <table>, <tr>, <th> structure needed to create consistent full width backgrounds. You can add classes to the wrapper to target CSS properties on it or target elements within it. The .wrapper-inner class is available to add padding to the wrapper.

HTML
<wrapper>
  content
</wrapper>
<table class="wrapper" align="center">
  <tr>
    <td class="wrapper-inner">
      content
    </td>
  </tr>
</table>

DEMO

Creating a fluid header with the <wrapper> component is pretty straight forward. Wrapping a <container> will keep your content bound to the width of the container. Add a class to the <wrapper class=""> to add a background color.

HTML
<style type="text/css">
.header {
  background: #8a8a8a;
}

.header .columns {
  padding-bottom: 0;
}

.header p {
  color: #fff;
  margin-bottom: 0;
}

.header .wrapper-inner {
  padding: 20px; /*controls the height of the header*/
}

.header .container {
  background: #8a8a8a;
}

.wrapper.secondary {
  background: #f3f3f3;
}
</style>

<wrapper class="header" bgcolor="#8a8a8a">
  <container>
    <row class="collapse">
      <columns small="6" valign="middle">
        <img src="http://placehold.it/200x50/663399">
      </columns>
      <columns small="6" valign="middle">
        <p class="text-right">BASIC</p>
      </columns>
    </row>
  </container>
</wrapper>
<style type="text/css">
  .header {
    background: #8a8a8a;
  }

  .header .columns {
    padding-bottom: 0;
  }

  .header p {
    color: #fff;
    margin-bottom: 0;
  }

  .header .wrapper-inner {
    padding: 20px;
    /*controls the height of the header*/
  }

  .header .container {
    background: #8a8a8a;
  }

  .wrapper.secondary {
    background: #f3f3f3;
  }
</style>

<table bgcolor="#8a8a8a" class="wrapper header" align="center">
  <tr>
    <td class="wrapper-inner">
      <table align="center" class="container">
        <tbody>
          <tr>
            <td>
              <table class="row collapse">
                <tbody>
                  <tr>
                    <th class="small-6 large-6 columns first" valign="middle">
                      <table>
                        <tr>
                          <th>
                            <img src="http://placehold.it/200x50/663399">
                          </th>
                        </tr>
                      </table>
                    </th>
                    <th class="small-6 large-6 columns last" valign="middle">
                      <table>
                        <tr>
                          <th>
                            <p class="text-right">BASIC</p>
                          </th>
                        </tr>
                      </table>
                    </th>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
    </td>
  </tr>
</table>

DEMO

Using this structure outside of the container will yield a fluid width background that expands to the width of the email client's viewport.

Stay on top of what’s happening in responsive design.

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »