{"componentChunkName":"component---src-templates-blog-post-js","path":"/blog/free-transactional-email-templates/","result":{"data":{"site":{"siteMetadata":{"title":"The Official MailPace Blog","author":"Paul, founder of MailPace"}},"mdx":{"id":"46bdba13-059c-5f52-b63b-e22dca629ed9","excerpt":"We're releasing a set of Free Transactional Email templates We want to make life easier for developers, so today we're releasing a free set of Transactional…","body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Free Transactional Email Templates\",\n  \"date\": \"2021-09-27T17:15:03.284Z\",\n  \"description\": \"A set of free MIT licensed transactional email templates, built using TailwindCSS\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h2\", null, \"We\\u2019re releasing a set of Free Transactional Email templates\"), mdx(\"p\", null, \"We want to make life easier for developers, so today we\\u2019re releasing a free set of Transactional Email Templates (MIT Licensed)\"), mdx(\"p\", null, \"Here\\u2019s a quick preview:\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"590px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/380beae2263274f75507f68678677568/d6778/screenshot.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"50%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAABYlAAAWJQFJUiTwAAACZklEQVQozz2SS2sTURiGs9Vaa0FLi03S2PQabG5tk7bpDYsb9/4Bty78ESKtLb24FQR/gSLYpVAEdSd4oeBl15rbJDNzZiYzk5nk8cyk+sG7OHDOc773/b6IMEx000VUfiNO39LQWwS1vbNLX18/I6MJ7q+MkJ2OMnh9hNtzaao1BdNy0DUV8e0VQmsiTBthWERaLQen3cUWCk75C5bjh8Cdp3v0Xx0gGk9yJxdldiLO0PBN0pksjaaK58s3to3z5zMty6Rlu1iWTcSQHSpKDSEMFNXg/PwsBB4ePmNmepqN9TVyC0usrq5TLBZYWSlRqVRpNhtSTenIot32wje+3yGi6QZn5Trlqryg6iiNxgXwiMmpGUprmywWl1ksFMnlsiGwLIG1utJTrSbBKpquYzsOkU8/XR6/dtl+4/LixKftdULg3v4RM/eecPfRMRsPj8ltPWAqGWdpuRRmqAlTdubT6XbpdDqhPM8nYrY8moaPKqWZXvhLUPv7h4wlUxRKW+SLm2TzBVKpWZaDDsvndD2Lf6VqQtr1Q6gcSgvTNDCEkDkK6krP8oG0HI/HWJjPk8tmyOfn5UByrK+V+Pqrzsl3mw8/fKp6F6/t4EtYmKHjuGGrwcGTvzgXHR4cHBGLxWVueebSadJSs7Mp1leX+HgqePkenr9zOT3vRSSdh+/DtbHlyA3TkrLRZTZBPd3dY+DaIMmJSRK3xkmMTzAajZHJ5jENTd4IQHK63SAmV+bZDm1HgmUMIJWayllFo6ao/xf70uUrxMfGiSamiI5NcmNoWC52hkq1jqqbMjuDYEt00ZPjtvkL7Xpon/cIJH8AAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Screenshot of Free HTML transactional email templates\",\n    \"title\": \"Screenshot of Free HTML transactional email templates\",\n    \"src\": \"/static/380beae2263274f75507f68678677568/fcda8/screenshot.png\",\n    \"srcSet\": [\"/static/380beae2263274f75507f68678677568/12f09/screenshot.png 148w\", \"/static/380beae2263274f75507f68678677568/e4a3f/screenshot.png 295w\", \"/static/380beae2263274f75507f68678677568/fcda8/screenshot.png 590w\", \"/static/380beae2263274f75507f68678677568/efc66/screenshot.png 885w\", \"/static/380beae2263274f75507f68678677568/c83ae/screenshot.png 1180w\", \"/static/380beae2263274f75507f68678677568/d6778/screenshot.png 3092w\"],\n    \"sizes\": \"(max-width: 590px) 100vw, 590px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"Check out the source code / setup instructions here:\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/mailpace/templates/\"\n  }, \"https://github.com/mailpace/templates/\")), mdx(\"h2\", null, \"Technical Details\"), mdx(\"p\", null, \"The templates are built using \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://maizzle.com/\"\n  }, \"Maizzle\"), \" and \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://tailwindcss.com/\"\n  }, \"Tailwind CSS\"), \".\"), mdx(\"p\", null, \"Maizzle is a really cool post-processor that allows you to use TailwindCSS to create emails. All styles are inlined and a bunch of best practices are followed to make it super easy to create high quality, good looking emails. \"), mdx(\"p\", null, \"Tailwind gives you utility-based CSS classes, which is a really neat way to build interfaces. We use Tailwind extensively across all of our apps and landing pages.\"), mdx(\"p\", null, \"It\\u2019s very easy to enhance and build out on top of these templates (and they\\u2019re MIT licensed), so feel free to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"git clone\"), \" and start modifying them.\"), mdx(\"h2\", null, \"Want to help us out?\"), mdx(\"p\", null, \"If you like our templates or you\\u2019re using them (or planning to use them), be sure to:\"), mdx(\"p\", null, \"a) Star the project on github\"), mdx(\"p\", null, \"b) Share the templates far and wide\"), mdx(\"p\", null, \"c) Contribute more templates back to the library\"), mdx(\"style\", {\n    \"className\": \"grvsc-styles\"\n  }, \"\\n  .grvsc-container {\\n    overflow: auto;\\n    -webkit-overflow-scrolling: touch;\\n    padding-top: 1rem;\\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\\n    padding-bottom: 1rem;\\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\\n    border-radius: 8px;\\n    border-radius: var(--grvsc-border-radius, 8px);\\n    font-feature-settings: normal;\\n  }\\n  \\n  .grvsc-code {\\n    display: inline-block;\\n    min-width: 100%;\\n  }\\n  \\n  .grvsc-line {\\n    display: inline-block;\\n    box-sizing: border-box;\\n    width: 100%;\\n    padding-left: 1.5rem;\\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\\n    padding-right: 1.5rem;\\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\\n  }\\n  \\n  .grvsc-line-highlighted {\\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\\n  }\\n  \\n\"));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"Free Transactional Email Templates","date":"September 27, 2021","description":"A set of free MIT licensed transactional email templates, built using TailwindCSS"}}},"pageContext":{"slug":"/free-transactional-email-templates/","previous":{"fields":{"slug":"/using-html-modules/"},"frontmatter":{"title":"Modularizing a static website with HTML Modules and PostHTML"}},"next":{"fields":{"slug":"/verify-paddle-webhooks-in-ruby/"},"frontmatter":{"title":"How to Verify Paddle.com Webhooks / Alerts in Ruby on Rails"}}}},"staticQueryHashes":["1956864136","63159454"]}