67 lines
1.8 KiB
Markdown
67 lines
1.8 KiB
Markdown
|
---
|
||
|
|
title: Wrapper
|
||
|
|
description: Wrapper creates the necessary structure to wrap elements so that full width backgrounds can applied.
|
||
|
|
tags:
|
||
|
|
- full width
|
||
|
|
- fliud
|
||
|
|
- header
|
||
|
|
- footer
|
||
|
|
---
|
||
|
|
|
||
|
|
## Basics
|
||
|
|
|
||
|
|
When using [Inky](inky.html) 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.
|
||
|
|
|
||
|
|
```inky_example
|
||
|
|
<wrapper>
|
||
|
|
content
|
||
|
|
</wrapper>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Full (fluid) width header or footer
|
||
|
|
|
||
|
|
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.
|
||
|
|
|
||
|
|
```inky_example
|
||
|
|
<style type="text/css">
|
||
|
|
.wrapper.header {
|
||
|
|
background: #8a8a8a !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wrapper.header .columns {
|
||
|
|
padding-bottom: 0 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header p {
|
||
|
|
color: #fff !important;
|
||
|
|
font-weight: bold;
|
||
|
|
margin-bottom: 0 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wrapper.header .header-container {
|
||
|
|
background: #8a8a8a !important;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<wrapper class="header">
|
||
|
|
<spacer size="16"></spacer>
|
||
|
|
<center>
|
||
|
|
<container class="header-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>
|
||
|
|
</center>
|
||
|
|
<spacer size="16"></spacer>
|
||
|
|
</wrapper>
|
||
|
|
```
|
||
|
|
|
||
|
|
Using this structure outside of the container will yeild a fluid width background that expands to the width of the email client's viewport.
|
||
|
|
|
||
|
|
|