Foundation
Jump to Nav

Wrapper

Wrapper creates the necessary structure to wrap elements so that full width backgrounds can applied.


Basics

When using Inky HTML, the <wrapper> tag will create a <table>, <tr>, <th> structure needed to create consistant 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="https://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="https://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 yeild a fluid width background that expands to the width of the email client's viewport.