In Inky HTML, use the `<block-grid>` tag with the attribute `up="n"`, where `n` is the number of items per row.
-```inky
+```inky_example
<block-grid up="3">
<td>Item 1</td>
<td>Item 2</td>
In Inky HTML, the `<button>` tag creates all of this markup for you.
-```inky
+```inky_example
<button href="zurb.com">Button</button>
```
In Inky HTML, add the same class to the `<button>` tag.
-```inky
+```inky_example
<button href="zurb.com" class="tiny">Tiny Button</button>
<button href="zurb.com" class="small">Small Button</button>
<button href="zurb.com" class="large">Large Button</button>
In Inky HTML, add the `.expanded` class to the `<button>` tag.
-```inky
+```inky_example
<button href="zurb.com" class="expand">Expanded Button</button>
```
Change the background color of a button by adding the class `.secondary`, `.success`, `.warning`, or `.alert` to the outer `<table>` (or the `<button>` tag in Inky HTML).
-```inky
+```inky_example
<button href="zurb.com" class="secondary">Secondary Button</button>
<button href="zurb.com" class="success">Success Button</button>
<button href="zurb.com" class="warning">Warning Button</button>
When using [Inky](inky.html) HTML, the `<callout>` tag will create this structure for you.
-```inky
+```inky_example
<callout>
<p>Beware of the Kraken! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</callout>
The color of a callout can be changed by adding the class `.success`, `.warning`, or `.alert` to the element.
-```inky
+```inky_example
<callout class="primary">
<p>Successfully avoided Kraken. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
</callout>
A container is a full table, so it needs the tags `<table>` `<tbody>`, `<tr>`, and finally `<td>`. The class `.container` goes on the `<table>`.
-```inky
+```inky_example
<container></container>
```
In Inky HTML, use the `<row>` tag to create a row.
-```inky
+```inky_example
<row></row>
```
In Inky HTML, use the `<columns>` class to create a column.
-```inky
+```inky_example
<columns>This is a column.</columns>
```
In Inky HTML, set the attribute `small` or `large` on the `<columns>` tag with the size you want. If you don't fill in `small`, it will use 12 by default. If you fill in `small` but not `large`, `large` will use the same value as `small`.
-```inky
+```inky_example
<columns small="12" large="6"></columns>
```
In Inky HTML, these classes are added for you.
-```inky
+```inky_example
<columns large="4">One</columns>
<columns large="4">Two</columns>
<columns large="4">Three</columns>
Collapsing a row removes the gutters from every column, which is the spacing between them. Add the class `.collapse` to a row to enable this.
-```inky
+```inky_example
<row class="collapse">
<columns large="6">These columns touch.</columns>
<columns large="6">These columns touch.</columns>
Use the class `.large-offset-n` to create an offset, where `n` is the amount of columns to offset by. So, for example, `.large-offset-3` would offset the column by 25% of the width of the row.
-```inky
+```inky_example
<row>
<columns large="3" class="large-offset-3">One</columns>
<columns large="3">Two</columns>
Inky keeps you out of a sea of tables and focused on your email. Check out this example—click "Switch to Inky" to see the difference.
-```inky
+```inky_example
<container>
<row>
<columns></columns>
In Inky HTML, use the tag `<menu>` to make a menu, and the tag `<item>` to make an item.
-```inky
+```inky_example
<menu>
<item href="http://zurb.com">Item</item>
<item href="http://zurb.com">Item</item>
Menu items have padding around them, which in some situations will misalign your link text with another element of your design. To strip the padding from menu items, add the class `.simple` to the menu. There will still be some horizontal space between them, to space them out.
-```inky
+```inky_example
<menu class="simple">
<item href="http://zurb.com">Item</item>
<item href="http://zurb.com">Item</item>
Menus align horizontally by default. To switch to a vertical menu, add the class `.vertical` to the menu.
-```inky
+```inky_example
<menu class="vertical">
<item href="http://zurb.com">Item</item>
<item href="http://zurb.com">Item</item>
The thumbnail style adds padding and a box shadow to an image. To use it, just add the class `.thumbnail` to an image element.
-```inky
+```inky_example
<table class="thumbnail">
<tr>
<td><img src="//placehold.it/300x300" class="thumbnail" /></td>
**To show content only on mobile clients,** add the class `.hide-for-large` to the element.
-```inky
+```inky_example
<callout class="hide-for-large">
<p>This callout will only appear on small screens.</p>
</callout>
**To show content only on desktop clients,** add the class `.show-for-large` to the element.
-```inky
+```inky_example
<callout class="show-for-large">
<p>This callout will only appear on large screens.</p>
</callout>
projects / thirdparty / foundation / foundation-emails.git / commitdiff
