123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!-- *********
Welcome to Slinky!

You can write any Inky or HTML markup in here.

When you're ready, click the "Get your HTML email" button  to get your ready-to-go responsive email!
********-->


<table class="body"><tr><td class="center" align="center" valign="top"><center>
  
<!--   Begin Custom Inky Tags! -->
        <container>
          <spacer size="32"></spacer>
          
<!--           You can you row and columns tags just like in F4E! -->
          <row>
            <columns>
              <center>
                <img src="https://i10.createsend1.com/ei/y/DA/528/38B/035407/img/zurb-foundation-logo.png" width="200" style="width: 200px!important;" alt="Foundation logo">
              </center>
            </columns>
          </row>

          <row>
            <columns>
              <p>Howdy!<br> Check out this awesome Inky Email!</p>
            </columns>
          </row>

          <row>
            <columns>
              <a href="https://foundation.zurb.com/emails/docs/"><img class="main-img" width="548" src="https://s3.amazonaws.com/prod-influence/uploads/attachments/1622/original/0dd6cca06376551c776c3b36bfa5a892.png?1474308269" alt="image of and link to video on website"></a>
            </columns>
          </row>
          <spacer size="20"></spacer>
          
          <row>
            <columns small="12" large="6">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore eligendi, maiores inventore eius laudantium recusandae tenetur, enim placeat assumenda quasi deleniti accusamus aliquid! Doloribus laboriosam rerum voluptatibus explicabo ducimus cupiditate.</p>
            </columns>
            <columns small="12" large="6">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore eligendi, maiores inventore eius laudantium recusandae tenetur, enim placeat assumenda quasi deleniti accusamus aliquid! Doloribus laboriosam rerum voluptatibus explicabo ducimus cupiditate.</p>
            </columns>
          </row>
          
          <row>
            <columns>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga sed officiis et aut eligendi pariatur nostrum, dolore quae tempora ullam rem impedit labore sint doloribus quasi animi iusto in aliquid.</p>
              <p>With Love,
                <br>Inky</p>

            </columns>
          </row>

          <spacer size="10"></spacer>
          <row class="footer">
            <columns>
              <h5 class="text-center">Sharing is caring</h5>
              <p class="text-center">Share ZURB Foundation Insider and keep the good vibes going.</p>
            </columns>
          </row>

          <row id="share-news">
            <columns large="6">
              <table class="button facebook">
                <tr>
                  <th style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;background:#3b5998;border-collapse:collapse!important;border-color:#3b5998;color:white !important;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;hyphens:auto;line-height:19px;margin:0;padding:0;text-align: center;transition:.25s ease-in;vertical-align: middle;word-wrap:break-word;width: 580px;height: 40px;">
                    <fblike style="color: #ffffff !important; text-decoration: none;">
                      <font color="#FFFFFF">Like on Facebook</font>
                    </fblike>
                  </th>
                </tr>
              </table>
            </columns>
            <columns large="6">
              <table class="button twitter">
                <tr>
                  <th style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;background:#00acee;border-collapse:collapse!important;border-color:#00acee;color:white;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;hyphens:auto;line-height:19px;margin:0;padding:0;text-align: center;transition:.25s ease-in;vertical-align: middle;word-wrap:break-word;width: 580px;height: 40px;">
                    <tweet style="color: #ffffff !important; text-decoration: none;">
                      <font color="#FFFFFF">Share on Twitter</font>
                    </tweet>
                  </th>
                </tr>
              </table>
            </columns>
          </row>
          <spacer size="16"></spacer>

          <row class="footer">
            <columns>
              <hr>
              <spacer size="32"></spacer>
              <h5>brought to you by <a href="https://zurb.com/">zurb</a></h5>
              <p class="copywrite">Talk to us on the phone <strong>(408) 341-0600</strong> or by email to <a class="copywrite" style="color: inherit !important" href="mailto:getstarted@zurb.com">getstarted@zurb.com</a></p>
              <p class="copywrite">ZURB, Inc. 100 W. Rincon Ave | Campbell, CA 95008</p>
              <p class="copywrite">© 1998 – 2016 ZURB</p>
              <spacer size="32"></spacer>
              <p class="copywrite">Want to Unsubscribe? We’re sorry to see you go, but happy to make it easy on you.
                <unsubscribe style="color: inherit !important" class="copywrite"> Unsubscribe</unsubscribe>
              </p>
            </columns>
          </row>

        </container>
      </center>
    </td>
  </tr>
</table>
            
          
!
            
              //  Foundation for Emails Settings
//  ------------------------------
//
//  Table of Contents:
//
//   1. Global
//   2. Grid
//   3. Block Grid
//   4. Typography
//   5. Button
//   6. Callout
//   7. Menu
//   8. Thumbnail


// 1. Global
// ---------

$primary-color: #2199e8;
$secondary-color: #777777;
$success-color: #3adb76;
$warning-color: #ffae00;
$alert-color: #ec5840;
$light-gray: #f3f3f3;
$medium-gray: #cacaca;
$dark-gray: #8a8a8a;
$black: #0a0a0a;
$white: #fefefe;
$pre-color: #ff6908;
$global-width: 580px;
$global-width-small: 95%;
$global-gutter: 16px;
$body-background: $light-gray;
$container-background: $white;
$global-padding: 16px;
$global-margin: 16px;
$global-radius: 3px;
$global-rounded: 500px;
$global-breakpoint: $global-width + $global-gutter;

// 2. Grid
// -------

$grid-column-count: 12;
$column-padding-bottom: $global-padding;
$container-radius: 0;

// 3. Block Grid
// -------------

$block-grid-max: 8;
$block-grid-gutter: $global-gutter;

// 4. Typography
// -------------

$global-font-color: $black;
$body-font-family: Helvetica, Arial, sans-serif;
$global-font-weight: normal;
$header-color: inherit;
$global-line-height: 1.3;
$global-font-size: 16px;
$body-line-height: $global-line-height;
$header-font-family: $body-font-family;
$header-font-weight: $global-font-weight;
$h1-font-size: 34px;
$h2-font-size: 30px;
$h3-font-size: 28px;
$h4-font-size: 24px;
$h5-font-size: 20px;
$h6-font-size: 18px;
$header-margin-bottom: 10px;
$paragraph-margin-bottom: 10px;
$small-font-size: 80%;
$small-font-color: $medium-gray;
$lead-font-size: $global-font-size * 1.25;
$lead-line-height: 1.6;
$text-padding: 10px;
$subheader-lineheight: 1.4;
$subheader-color: $dark-gray;
$subheader-font-weight: $global-font-weight;
$subheader-margin-top: 4px;
$subheader-margin-bottom: 8px;
$hr-width: $global-width;
$hr-border: 1px solid $black;
$hr-margin: 20px auto;
$anchor-text-decoration: none;
$anchor-color: $primary-color;
$anchor-color-visited: $anchor-color;
$anchor-color-hover: darken($primary-color, 10%);
$anchor-color-active: $anchor-color-hover;
$stat-font-size: 40px;

// 5. Button
// ---------

$button-padding: (
  tiny: 4px 8px 4px 8px,
  small: 5px 10px 5px 10px,
  default: 8px 16px 8px 16px,
  large: 10px 20px 10px 20px,
);
$button-font-size: (
  tiny: 10px,
  small: 12px,
  default: 16px,
  large: 20px,
);
$button-color: $white;
$button-color-alt: $medium-gray;
$button-font-weight: bold;
$button-margin: 0 0 $global-margin 0;
$button-background: $primary-color;
$button-border: 2px solid $button-background;
$button-radius: $global-radius;
$button-rounded: $global-rounded;

// 6. Callout
// ----------

$callout-background: $white;
$callout-background-fade: 85%;
$callout-padding: 10px;
$callout-margin-bottom: $global-margin;
$callout-border: 1px solid darken($callout-background, 20%);
$callout-border-secondary: 1px solid darken($secondary-color, 20%);
$callout-border-success: 1px solid darken($success-color, 20%);
$callout-border-warning: 1px solid darken($warning-color, 20%);
$callout-border-alert: 1px solid darken($alert-color, 20%);

// 7. Menu
// -------

$menu-item-padding: 10px;
$menu-item-gutter: 10px;
$menu-item-color: $primary-color;

// 8. Thumbnail
// ------------

$thumbnail-border: solid 4px $white;
$thumbnail-margin-bottom: $global-margin;
$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
$thumbnail-transition: box-shadow 200ms ease-out;
$thumbnail-radius: $global-radius;








// Foundation for Emails by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

/// Calculates a percentage value for a grid column width.
/// @access private
/// @param {number} $colNumber - Column count of the column.
/// @param {number} $totalColumns - Column count of the entire row.
/// @returns {number} A percentage width value.
@function -zf-grid-calc-pct($colNumber, $totalColumns) {
  @return floor(percentage(($colNumber / $totalColumns)) * 1000000) / 1000000;
}

/// Calculates a pixel value for a grid column width.
/// @access private
/// @param {number} $columnNumber - Column count of the column.
/// @param {number} $totalColumns - Column count of the entire row.
/// @param {number} $containerWidth - Width of the surrounding container, in pixels.
/// @returns {number} A pixel width value.
@function -zf-grid-calc-px($columnNumber, $totalColumns, $containerWidth) {
  @return ($containerWidth / $totalColumns * $columnNumber - $global-gutter);
}
// Foundation for Emails by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

////
/// @group global
////

/// Primary color for interactive components like links and buttons.
/// @type Color
$primary-color: #2199e8 !default;

/// Secondary color, used with components that support the `.secondary` class.
/// @type Color
$secondary-color: #777777 !default;

/// Color to indicate a positive status or action, used with the `.success` class.
/// @type Color
$success-color: #3adb76 !default;

/// Color to indicate a caution status or action, used with the `.warning` class.
/// @type Color
$warning-color: #ffae00 !default;

/// Color to indicate a negative status or action, used with the `.alert` class.
/// @type Color
$alert-color: #ec5840 !default;

/// Color used for light gray UI items within Foundation.
/// @type Color
$light-gray: #f3f3f3 !default;

/// Color used for medium gray UI items within Foundation.
/// @type Color
$medium-gray: #cacaca !default;

/// Color used for dark gray UI items within Foundation.
/// @type Color
$dark-gray: #8a8a8a !default;

/// Color used for black ui items within Foundation
/// @type Color
$black: #0a0a0a !default;

/// Color used for white ui items within Foundation
/// @type Color
$white: #fefefe !default;

/// Color used code.
/// @type Color
$pre-color: #ff6908 !default;

/// Width of the container.
/// @type Number
$global-width: 580px !default;

/// Width of the container on small screens.
/// @type Length
$global-width-small: 95% !default;

/// Gutter for grid elements.
/// @type length
$global-gutter: 16px !default;

/// Body background color.
/// @type Length
$body-background: $light-gray !default;

/// Color for the container background
/// @type Color
$container-background: $white !default;

/// Global padding.
/// @type Number
$global-padding: 16px !default;

/// Global margin. Margin requires a capital 'M' to workin Outlook.com
/// @type Number
$global-margin: 16px !default;

/// Global raidus of radius-corners.
/// @type Number
$global-radius: 3px !default;

/// Global rounded radius of rounded-corners.
/// @type Number
$global-rounded: 500px !default;

/// Global media query to switch from desktop to mobile styles.
/// @type String
$global-breakpoint: $global-width + $global-gutter !default;

.wrapper {
  width: 100%;
}
// Foundation for Emails by ZURB
// zurb.com/ink/
// Licensed under MIT Open Source

////
/// @group normalize
////

#outlook a {
  padding: 0;
}

body {
  width: 100% !important;
  min-width: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  margin: 0;
  Margin: 0;
  padding: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.ExternalClass {
  width: 100%;

  &,
  p,
  span,
  font,
  td,
  div {
    line-height: 100%;
  }
}

#backgroundTable {
  margin: 0;
  Margin: 0;
  padding: 0;
  width: 100% !important;
  line-height: 100% !important;
}

img {
  outline: none;
  text-decoration: none;
  -ms-interpolation-mode: bicubic;
  width: auto;
  max-width: 100%;
  clear: both;
  display: block;
}

center {
  width: 100%;
  min-width: $global-width;
}

a img {
  border: none;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

td {
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
  border-collapse: collapse !important;
}

table, tr, td {
  padding: 0;
  vertical-align: top;
  text-align: left;
}
// Foundation for Emails by ZURB
// zurb.com/ink/
// Licensed under MIT Open Source

////
/// @group grid
////

/// Default number of columns for an email.
/// @type Number
$grid-column-count: 12 !default;

/// Default padding for the bottom of a column.
/// @type Number
$column-padding-bottom: $global-padding !default;

/// Default border radius for the container. Use a px value
/// @type Number
$container-radius: 0 !default;

//For viewing email in browser
@media only screen {
  html {
    min-height: 100%;
    background: $body-background;
  }
}

table {
  &.body {
    background: $body-background;
    height: 100%;
    width: 100%;
  }

  &.container {
    background: $container-background;
    width: $global-width;
    margin: 0 auto;
    Margin: 0 auto;
    text-align: inherit;
  }

  &.row {
    padding: 0;
    width: 100%;
    position: relative;
  }

  &.spacer {
    width: 100%;
    td {
      mso-line-height-rule: exactly;
    }
  }
}

table.container table.row {
  display: table;
}

td.columns,
td.column,
th.columns,
th.column {
  margin: 0 auto;
  Margin: 0 auto;
  padding-left: $global-gutter;
  padding-bottom: $column-padding-bottom;

  // Prevents Nested columns from double the padding
  .column,
  .columns {
    padding-left: 0 !important;
    padding-right: 0 !important;

    center {
      min-width: none !important;
    }
  }
}

td.columns.last,
td.column.last,
th.columns.last,
th.column.last {
  padding-right: $global-gutter;
}

//makes sure nested tables are 100% width
td.columns,
td.column,
th.columns,
th.column {
  table:not(.button) {
    width: 100%;
  }
}

@for $i from 1 through $grid-column-count {
  td.large-#{$i},
  th.large-#{$i} {
    width: -zf-grid-calc-px($i, $grid-column-count, $global-width);
    padding-left: $global-gutter / 2;
    padding-right: $global-gutter / 2;
  }

  td.large-#{$i}.first,
  th.large-#{$i}.first {
    padding-left: $global-gutter;
  }

  td.large-#{$i}.last,
  th.large-#{$i}.last {
    padding-right: $global-gutter;
  }

  //Collapsed logic
  .collapse {
    > tbody > tr > td.large-#{$i},
    > tbody > tr > th.large-#{$i} {
      padding-right: 0;
      padding-left: 0;
      width: -zf-grid-calc-px($i, $grid-column-count, $global-width) + $global-gutter;
    }

    //Gotta give it that extra love for the first and last columns.
    td.large-#{$i}.first,
    th.large-#{$i}.first,
    td.large-#{$i}.last,
    th.large-#{$i}.last {
      width: -zf-grid-calc-px($i, $grid-column-count, $global-width) + ($global-gutter * 1.5);
    }
  }

  td.large-#{$i} center,
  th.large-#{$i} center {
    min-width: -zf-grid-calc-px($i, $grid-column-count, $global-width) - ($global-gutter * 2);
  }

  .body .columns td.large-#{$i},
  .body .column td.large-#{$i},
  .body .columns th.large-#{$i},
  .body .column th.large-#{$i} {
    width: -zf-grid-calc-pct($i, $grid-column-count);
  }
}

@for $i from 1 through ($grid-column-count - 1) {
  td.large-offset-#{$i},
  td.large-offset-#{$i}.first,
  td.large-offset-#{$i}.last,
  th.large-offset-#{$i},
  th.large-offset-#{$i}.first,
  th.large-offset-#{$i}.last {
    //1.5 takes in effect a whole empty cell.
    padding-left: -zf-grid-calc-px($i, $grid-column-count, $global-width) + $global-gutter * 2;
  }
}

td.expander,
th.expander {
  visibility: hidden;
  width: 0;
  padding: 0 !important;
}

// adds radius to container
table.container.radius {
  border-radius: $container-radius;
  border-collapse: separate;
}
// Foundation for Emails by ZURB
// zurb.com/ink/
// Licensed under MIT Open Source

////
/// @group block-grid
////

/// The highest number of `.x-up` classes available when using the block grid CSS.
/// @type Number
$block-grid-max: 8 !default;

/// Gutter between elements in a block grid.
/// @type Number
$block-grid-gutter: $global-gutter !default;

.block-grid {
  width: 100%;
  max-width: $global-width;

  td {
    display: inline-block;
    padding: $block-grid-gutter / 2;
  }
}

// Sizing classes
@for $i from 2 through $block-grid-max {
  .up-#{$i} td {
    width: floor(($global-width - $i * $block-grid-gutter) / $i) !important;
  }
}
// Foundation for Emails by ZURB
// zurb.com/ink/
// Licensed under MIT Open Source

////
/// @group alignment
////

table,
th,
td,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span {
  &.text-center {
    text-align: center;
  }

  &.text-left {
    text-align: left;
  }

  &.text-right {
    text-align: right;
  }
}

span.text-center {
  display: block;
  width: 100%;
  text-align: center;
}

@media only screen and (max-width: #{$global-breakpoint}) {
  .small-float-center {
    margin: 0 auto !important;
    float: none !important;
    text-align: center !important;
  }

  .small-text-center {
    text-align: center !important;
  }

  .small-text-left {
    text-align: left !important;
  }

  .small-text-right {
    text-align: right !important;
  }
}

img.float-left {
  float: left;
  text-align: left;
}

img.float-right {
  float: right;
  text-align: right;
}

img.float-center,
img.text-center {
  margin: 0 auto;
  Margin: 0 auto;
  float: none;
  text-align: center;
}

table,
td,
th {
  &.float-center {
    margin: 0 auto;
    Margin: 0 auto;
    float: none;
    text-align: center;
  }
}

// Foundation for Emails by ZURB
// zurb.com/ink/
// Licensed under MIT Open Source

////
/// @group visibility
////

.hide-for-large {
  display: none !important;
  mso-hide: all; // hide selected elements in Outlook 2007-2013
  overflow: hidden;
  max-height: 0;
  font-size: 0;
  width: 0;
  line-height: 0;

  @media only screen and (max-width: #{$global-breakpoint}) {
    display: block !important;
    width: auto !important;
    overflow: visible !important;
    max-height: none !important;
    font-size: inherit !important;
    line-height: inherit !important;
  }
}

table.body table.container .hide-for-large * {
  mso-hide: all; // hide selected elements in Outlook 2007-2013
}

table.body table.container .hide-for-large,
table.body table.container .row.hide-for-large {
  @media only screen and (max-width: #{$global-breakpoint}) {
    display: table !important;
    width: 100% !important;
  }
}

table.body table.container .callout-inner.hide-for-large {
  @media only screen and (max-width: #{$global-breakpoint}) {
    display: table-cell !important;
    width: 100% !important;
  }
}

table.body table.container .show-for-large {
  @media only screen and (max-width: #{$global-breakpoint}) {
    display: none !important;
    width: 0;
    mso-hide: all; // hide selected elements in Outlook 2007-2013
    overflow: hidden;
  }
}

// [todo] add image resets
// img {
//   max-height: 0;
//   width: 0;
// }
// in media query
// img { 
//   max-height: none !important; 
//   width: auto !important; 
// }
// Foundation for Emails by ZURB
// zurb.com/ink/
// Licensed under MIT Open Source

////
/// @group typography
////

/// Global font color.
/// @type Color
$global-font-color: $black !default;

/// Global font family.
/// @type Font
$body-font-family: Helvetica, Arial, sans-serif !default;

/// Global font weight.
/// @type Keyword
$global-font-weight: normal !default;

/// Global font weight.
/// @type Keyword
$header-color: inherit !default;

/// Global line height.
/// @type Number
$global-line-height: 1.3 !default;

/// Font size of body text.
/// @type Number
$global-font-size: 16px !default;

/// Line height of body text.
/// @type Number
$body-line-height: $global-line-height !default;

/// Font family of headings.
/// @type List
$header-font-family: $body-font-family !default;

/// Font family of headings.
/// @type List
$header-font-weight: $global-font-weight !default;

/// Font size of `<h1>` elements.
/// @type Number
$h1-font-size: 34px !default;

/// Font size of `<h2>` elements.
/// @type Number
$h2-font-size: 30px !default;

/// Font size of `<h3>` elements.
/// @type Number
$h3-font-size: 28px !default;

/// Font size of `<h4>` elements.
/// @type Number
$h4-font-size: 24px !default;

/// Font size of `<h5>` elements.
/// @type Number
$h5-font-size: 20px !default;

/// Font size of `<h6>` elements.
/// @type Number
$h6-font-size: 18px !default;

/// Margin bottom of `<h1>` through `<h6>` elements.
/// @type Number
$header-margin-bottom: 10px !default;

/// Margin bottom of paragraphs.
/// @type Number
$paragraph-margin-bottom: 10px !default;

/// Default font size for `<small>`.
/// @type Number
$small-font-size: 80% !default;

/// Color of `<small>` elements when placed inside headers.
/// @type Color
$small-font-color: $medium-gray !default;

/// Font size of lead paragraphs.
/// @type Number
$lead-font-size: $global-font-size * 1.25 !default;

/// Line height of lead paragraphs.
/// @type Number
$lead-line-height: 1.6 !default;

/// Padding inside paragraphs.
/// @type Number
$text-padding: 10px !default;

/// Default line height for subheaders.
/// @type Number
$subheader-lineheight: 1.4 !default;

/// Default font color for subheaders.
/// @type Color
$subheader-color: $dark-gray !default;

/// Default font weight for subheaders.
/// @type String
$subheader-font-weight: $global-font-weight !default;

/// Default top margin for subhheaders.
/// @type Number
$subheader-margin-top: 4px !default;

/// Default bottom margin for subheaders.
/// @type Number
$subheader-margin-bottom: 8px !default;

/// Maximum width of a divider.
/// @type Number
$hr-width: $global-width !default;

/// Default border for a divider.
/// @type List
$hr-border: 1px solid $black !default;

/// Default margin for a divider.
/// @type Number | List
$hr-margin: 20px auto !default;

/// Text decoration for anchors.
/// @type Keyword
$anchor-text-decoration: none !default;

/// Text color of anchors.
/// @type Color
$anchor-color: $primary-color !default;

/// Text color of anchors to visited links.
/// @type Color
$anchor-color-visited: $anchor-color !default;

/// Text color of anchors on hover.
/// @type Color
$anchor-color-hover: darken($primary-color, 10%) !default;

/// Text color of active anchors.
/// @type Color
$anchor-color-active: $anchor-color-hover !default;

/// Default font size for statistic numbers.
/// @type Number
$stat-font-size: 40px !default;

body,
table.body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
td,
th,
a {
  color: $global-font-color;
  font-family: $body-font-family;
  font-weight: $global-font-weight;
  padding: 0;
  margin: 0;
  Margin: 0;
  text-align: left;
  line-height: $global-line-height;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: $header-color;
  word-wrap: normal;
  font-family: $header-font-family;
  font-weight: $header-font-weight;
  margin-bottom: $header-margin-bottom;
  Margin-bottom: $header-margin-bottom;
}

h1 {
  font-size: $h1-font-size;
}

h2 {
  font-size: $h2-font-size;
}

h3 {
  font-size: $h3-font-size;
}

h4 {
  font-size: $h4-font-size;
}

h5 {
  font-size: $h5-font-size;
}

h6 {
  font-size: $h6-font-size;
}

body,
table.body,
p,
td,
th {
  font-size: $global-font-size;
  line-height: $body-line-height;
}

p {
  margin-bottom: $paragraph-margin-bottom;
  Margin-bottom: $paragraph-margin-bottom;

  &.lead {
    font-size: $lead-font-size;
    line-height: $lead-line-height;
  }

  &.subheader {
    margin-top: $subheader-margin-top;
    margin-bottom: $subheader-margin-bottom;
    Margin-top: $subheader-margin-top;
    Margin-bottom: $subheader-margin-bottom;
    font-weight: $subheader-font-weight;
    line-height: $subheader-lineheight;
    color: $subheader-color;
  }
}

small {
  font-size: $small-font-size;
  color: $small-font-color;
}

a {
  color: $anchor-color;
  text-decoration: $anchor-text-decoration;

  &:hover {
    color: $anchor-color-hover;
  }

  &:active {
    color: $anchor-color-active;
  }

  &:visited {
    color: $anchor-color-visited;
  }
}

h1 a,
h1 a:visited,
h2 a,
h2 a:visited,
h3 a,
h3 a:visited,
h4 a,
h4 a:visited,
h5 a,
h5 a:visited,
h6 a,
h6 a:visited {
  color: $anchor-color;
}

pre {
  background: $light-gray;
  margin: 30px 0;
  Margin: 30px 0;

  code {
    color: $medium-gray;

    span.callout {
      color: $dark-gray;
      font-weight: bold;
    }

    span.callout-strong {
      color: $pre-color;
      font-weight: bold;
    }
  }
}

// Horizontal rule
table.hr {
  width: 100%;
  
  th {
    height: 0;
    max-width: $hr-width;
    border-top: 0;
    border-right: 0;
    border-bottom: $hr-border;
    border-left: 0;
    margin: $hr-margin;
    Margin: $hr-margin;
    clear: both;
  }
}

// Use to style a large number to display a statistic
.stat {
  font-size: $stat-font-size;
  line-height: 1;

  p + & {
    margin-top: -16px;
    Margin-top: -16px;
  }
}

// preheader styles
span.preheader {
  display: none !important;
  visibility: hidden;
  mso-hide: all !important;
  font-size: 1px;
  color: $body-background; // needs to match background color of it's container
  line-height: 1px;
  max-height: 0px;
  max-width: 0px;
  opacity: 0;
  overflow: hidden;
}
// Foundation for Emails by ZURB
// zurb.com/ink/
// Licensed under MIT Open Source

////
/// @group button
////

/// Padding inside buttons at various sizes.
/// @type Map
$button-padding: (
  tiny: 4px 8px 4px 8px,
  small: 5px 10px 5px 10px,
  default: 8px 16px 8px 16px,
  large: 10px 20px 10px 20px,
) !default;

/// Font sizes of buttons at various sizes.
/// @type Map
$button-font-size: (
  tiny: 10px,
  small: 12px,
  default: 16px,
  large: 20px,
) !default;

/// Text color of buttons.
/// @type Color
$button-color: $white !default;

/// Text color of buttons with a light background.
/// @type Color
$button-color-alt: $medium-gray !default;

/// Font weight of buttons.
/// @type Weight
$button-font-weight: bold !default;

/// Margin around buttons.
/// @type List
$button-margin: 0 0 $global-margin 0 !default;

/// Background color of buttons.
/// @type Color
$button-background: $primary-color !default;

/// Border around buttons.
/// @type Border
$button-border: 2px solid $button-background !default;

/// Border radius of buttons. Not supported by all email clients.
/// @type Number
$button-radius: $global-radius !default;

/// Border radius of rounded buttons. Not supported by all email clients.
/// @type Number
$button-rounded: $global-rounded !default;

table.button {
  width: auto;
  margin: $button-margin;
  Margin: $button-margin;

  table {

    td {
      text-align: left;
      color: $button-color;
      background: $button-background;
      border: $button-border;

      a {
        font-family: $body-font-family;
        font-size: map-get($button-font-size, default);
        font-weight: $button-font-weight;
        color: $button-color;
        text-decoration: none;
        display: inline-block;
        padding: map-get($button-padding, default);
        border: 0 solid $button-background;
        border-radius: $button-radius;
      }
    }
  }

  &.radius table td {
    border-radius: $button-radius;
    border: none;
  }

  &.rounded table td {
    border-radius: $button-rounded;
    border: none;
  }
}

table.button:hover table tr td a,
table.button:active table tr td a,
table.button table tr td a:visited,
table.button.tiny:hover table tr td a,
table.button.tiny:active table tr td a,
table.button.tiny table tr td a:visited,
table.button.small:hover table tr td a,
table.button.small:active table tr td a,
table.button.small table tr td a:visited,
table.button.large:hover table tr td a,
table.button.large:active table tr td a,
table.button.large table tr td a:visited {
  color: $button-color;
}

table.button.tiny {
  table {
    td,
    a {
      padding: map-get($button-padding, tiny);
    }

    a {
      font-size: map-get($button-font-size, tiny);
      font-weight: normal;
    }
  }
}

table.button.small {
  table {
    td,
    a {
      padding: map-get($button-padding, small);
      font-size: map-get($button-font-size, small);
    }
  }
}

table.button.large {
  table {
    a {
      padding: map-get($button-padding, large);
      font-size: map-get($button-font-size, large);
    }
  }
}

table.button.expand,
table.button.expanded {
  width: 100% !important;

  table {
    width: 100%;

    a {
      text-align: center;
      width: 100%;
      padding-left: 0;
      padding-right: 0;
    }
  }

  center {
    min-width: 0;
  }
}

table.button:hover,
table.button:visited,
table.button:active {
  table {
    td {
      background: darken($button-background, 10%);
      color: $button-color;
    }
  }
}

table.button:hover,
table.button:visited,
table.button:active {
  table {
    a {
      border: 0 solid darken($button-background, 10%);
    }
  }
}

table.button.secondary {
  table {
    td {
      background: $secondary-color;
      color: $button-color;
      border: 0px solid $secondary-color;
    }

    a {
      color: $button-color;
      border: 0 solid $secondary-color;
    }
  }
}

table.button.secondary:hover {
  table {
    td {
      background: lighten($secondary-color, 10%);
      color: $button-color;
    }

    a {
      border: 0 solid lighten($secondary-color, 10%);
    }
  }
}

table.button.secondary:hover {
  table {
    td a {
      color: $button-color;
    }
  }
}

table.button.secondary:active {
  table {
    td a {
      color: $button-color;
    }
  }
}

table.button.secondary {
  table {
    td a:visited {
      color: $button-color;
    }
  }
}

table.button.success {
  table {
    td {
      background: $success-color;
      border: 0px solid $success-color;
    }

    a {
      border: 0 solid $success-color;
    }
  }
}

table.button.success:hover {
  table {
    td {
      background: darken($success-color, 10%);
    }

    a {
      border: 0 solid darken($success-color, 10%);
    }
  }
}

table.button.alert {
  table {
    td {
      background: $alert-color;
      border: 0px solid $alert-color;
    }

    a {
      border: 0 solid $alert-color;
    }
  }
}

table.button.alert:hover {
  table {
    td {
      background: darken($alert-color, 10%);
    }

    a {
      border: 0 solid darken($alert-color, 10%);
    }
  }
}

table.button.warning {
  table {
    td {
      background: $warning-color;
      border: 0px solid $warning-color;
    }

    a {
      border: 0px solid $warning-color;
    }
  }
}

table.button.warning:hover {
  table {
    td {
      background: darken($warning-color, 10%);
    }

    a {
      border: 0px solid darken($warning-color, 10%);
    }
  }
}
// Foundation for Emails by ZURB
// zurb.com/ink/
// Licensed under MIT Open Source

////
/// @group callout
////

/// Background color of a callout.
/// @type Color
$callout-background: $white !default;

/// Fade value for callout backgrounds.
/// @type Number
$callout-background-fade: 85% !default;

/// Padding inside a callout.
/// @type Length
$callout-padding: 10px !default;

/// Bottom margin of a callout.
/// @type Length
$callout-margin-bottom: $global-margin !default;

/// Border around a callout.
/// @type Border
$callout-border: 1px solid darken($callout-background, 20%) !default;

/// Border around a callout with the `.success` class.
/// @type Border
$callout-border-secondary: 1px solid darken($secondary-color, 20%) !default;

/// Border around a callout with the `.success` class.
/// @type Border
$callout-border-success: 1px solid darken($success-color, 20%) !default;

/// Border around a callout with the `.warning` class.
/// @type Border
$callout-border-warning: 1px solid darken($warning-color, 20%) !default;

/// Border around a callout with the `.alert` class.
/// @type Border
$callout-border-alert: 1px solid darken($alert-color, 20%) !default;

table.callout {
  margin-bottom: $callout-margin-bottom;
  Margin-bottom: $callout-margin-bottom;
}

th.callout-inner {
  width: 100%;
  border: $callout-border;
  padding: $callout-padding;
  background: $callout-background;

  &.primary {
    background: scale-color($primary-color, $lightness: $callout-background-fade);
    border: $callout-border-secondary;
    color: $black;
  }

  &.secondary {
    background: scale-color($secondary-color, $lightness: $callout-background-fade);
    border: $callout-border-secondary;
    color: $black;
  }

  &.success {
    background: scale-color($success-color, $lightness: $callout-background-fade);
    border: $callout-border-success;
    color: $white;
  }

  &.warning {
    background: scale-color($warning-color, $lightness: $callout-background-fade);
    border: $callout-border-warning;
    color: $white;
  }

  &.alert {
    background: scale-color($alert-color, $lightness: $callout-background-fade);
    border: $callout-border-alert;
    color: $white;
  }
}
// Foundation for Emails by ZURB
// zurb.com/ink/
// Licensed under MIT Open Source

////
/// @group thumbnail
////

/// Border around thumbnail images.
/// @type Border
$thumbnail-border: solid 4px $white !default;

/// Bottom margin for thumbnail images.
/// @type Length
$thumbnail-margin-bottom: $global-margin !default;

/// Box shadow under thumbnail images.
/// @type Shadow
$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2) !default;

/// Box shadow under thumbnail images.
/// @type Shadow
$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5) !default;

/// Transition proprties for thumbnail images.
/// @type Transition
$thumbnail-transition: box-shadow 200ms ease-out !default;

/// Default radius for thumbnail images.
/// @type Number
$thumbnail-radius: $global-radius !default;

/// Adds thumbnail styles to an element.
.thumbnail {
  border: $thumbnail-border;
  box-shadow: $thumbnail-shadow;
  display: inline-block;
  line-height: 0;
  max-width: 100%;
  transition: $thumbnail-transition;
  border-radius: $thumbnail-radius;
  margin-bottom: $thumbnail-margin-bottom;

  &:hover,
  &:focus {
    box-shadow: $thumbnail-shadow-hover;
  }
}
// Foundation for Emails by ZURB
// zurb.com/ink/
// Licensed under MIT Open Source

////
/// @group outlook
////

body.outlook p {
  display: inline !important;
}
// Foundation for Emails by ZURB
// zurb.com/ink/
// Licensed under MIT Open Source

////
/// @group media-query
////

@media only screen and (max-width: #{$global-breakpoint}) {
  table.body img {
    width: auto;
    height: auto;
  }

  table.body center {
    min-width: 0 !important;
  }

  table.body .container {
    width: $global-width-small !important;
  }

  //If it supports border-box, why not? Am I right?
  //Also, by default pad that to the global-gutter variable
  table.body .columns,
  table.body .column {
    height: auto !important;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: $global-gutter !important;
    padding-right: $global-gutter !important;

    // Nested columns won't double the padding
    .column,
    .columns {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }

  // Collpased columns have no gutter.
  .collapse {
    table.body & .columns,
    table.body & .column {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }

  // Basic grid rules
  @for $i from 1 through $grid-column-count {
    td.small-#{$i},
    th.small-#{$i} {
      display: inline-block !important;
      width: -zf-grid-calc-pct($i, $grid-column-count) !important;
    }
  }

  //If it's the last column in column count (12 by default),
  //give it block and 100% width to knock down the wimpy columns to their own row.
  .columns td.small-#{$grid-column-count},
  .column td.small-#{$grid-column-count},
  .columns th.small-#{$grid-column-count},
  .column th.small-#{$grid-column-count} {
    display: block !important;
    width: 100% !important;
  }

  @for $i from 1 through ($grid-column-count - 1) {
    table.body td.small-offset-#{$i},
    table.body th.small-offset-#{$i} {
      //1.5 takes in effect a whole empty cell.
      margin-left: -zf-grid-calc-pct($i, $grid-column-count) !important;
      Margin-left: -zf-grid-calc-pct($i, $grid-column-count) !important;
    }
  }

  table.body table.columns td.expander,
  table.body table.columns th.expander {
    display: none !important;
  }

  table.body .right-text-pad,
  table.body .text-pad-right {
    padding-left: $text-padding !important;
  }

  table.body .left-text-pad,
  table.body .text-pad-left {
    padding-right: $text-padding !important;
  }

  //menu
  table.menu {
    width: 100% !important;

    td,
    th {
      width: auto !important;
      display: inline-block !important;
    }

    &.vertical,
    &.small-vertical {
      td,
      th {
        display: block !important;
      }
    }
  }

  // Centers the menus!
  table.menu[align="center"] {
    width: auto !important;
  }

  // expands buttons for small only
  table.button.small-expand,
  table.button.small-expanded {
    width: 100% !important;

    table {
      width: 100%;

      a {
        text-align: center !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
    }

    center {
      min-width: 0;
    }
  }
}

.footer h5 {
  text-align: center;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;

  a {
    color: #333 !important;
    font-weight: bold;
  }
}

.footer p {
  text-align: center;
  margin-bottom: 0px;
  font-size: 11px;
  color: #999;

  a {
    color: #999;
    font-weight: bold;
  }
}

            
          
!
            
              var data = getCodePenId();
var a = document.createElement('a');
var linkText = document.createTextNode("Get your HTML email");
a.appendChild(linkText);
a.target ="_blank";
a.href = 'https://zurb.com/playground/slinky?codepen_user=' + data.user + '&codepen_slug=' + data.id + '#inlined-email';
a.style="position:fixed; bottom:20px; right:20px;display:block;color:#fff;background-color:#EC2E71; padding:10px;text-align:center; padding: 16px 18px;"
if(data.type === 'editor') { 
  document.body.appendChild(a);
}

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console