├── .gitignore ├── LICENSE ├── README.md ├── bbeam ├── .gitignore ├── README.md ├── emails │ ├── Invoice.tsx │ ├── Newsletter.tsx │ ├── Reactivation.tsx │ ├── Review.tsx │ ├── assets │ │ ├── bbeam-logo-white.png │ │ ├── invoice-strip.png │ │ ├── linkedin.png │ │ ├── logo-yellow.png │ │ ├── logo.png │ │ ├── placeholder-image.png │ │ ├── question-mark.png │ │ ├── reactivation-bg.png │ │ ├── review-nudge.png │ │ ├── review-strip.png │ │ ├── sun.png │ │ ├── thumbsdown.png │ │ ├── thumbsup.png │ │ └── twitter.png │ ├── components │ │ ├── Button.tsx │ │ ├── Footer.tsx │ │ ├── Header.tsx │ │ ├── Heading.tsx │ │ ├── Layout.tsx │ │ ├── Link.tsx │ │ ├── List.tsx │ │ ├── Spacer.tsx │ │ └── Text.tsx │ ├── index.ts │ ├── previews │ │ ├── Invoice.tsx │ │ ├── Newsletter.tsx │ │ ├── Reactivation.tsx │ │ └── Review.tsx │ ├── theme.ts │ └── util │ │ ├── assetUrl.ts │ │ └── cssHelpers.ts ├── mailing.config.json ├── package.json ├── previews_html │ ├── invoice_preview.html │ ├── newsletter_preview.html │ ├── reactivation_preview.html │ └── review_preview.html ├── tsconfig.json └── yarn.lock ├── book-book ├── .gitignore ├── README.md ├── emails │ ├── AccountCreated.tsx │ ├── NewSignIn.tsx │ ├── Reservation.tsx │ ├── ResetPassword.tsx │ ├── components │ │ ├── Button.tsx │ │ ├── Divider.tsx │ │ ├── Footer.tsx │ │ ├── Header.tsx │ │ ├── Heading.tsx │ │ ├── List.tsx │ │ └── Text.tsx │ ├── index.ts │ ├── layouts │ │ └── Base.tsx │ ├── previews │ │ ├── AccountCreated.tsx │ │ ├── NewSignIn.tsx │ │ ├── Reservation.tsx │ │ └── ResetPassword.tsx │ └── theme.ts ├── mailing.config.json ├── package.json └── yarn.lock ├── fynn ├── .gitignore ├── README.md ├── emails │ ├── ApplicationApproved.tsx │ ├── ApplicationComplete.tsx │ ├── ExitInterview.tsx │ ├── FinalizingInvite.tsx │ ├── FinalizingReminder1.tsx │ ├── FinalizingReminder2.tsx │ ├── FinalizingReminder3.tsx │ ├── FinalizingReminder4.tsx │ ├── FinalizingReminder5.tsx │ ├── FinalizingReminder6.tsx │ ├── FinalizingReminder7.tsx │ ├── IncompleteReminder1.tsx │ ├── IncompleteReminder2.tsx │ ├── IncompleteReminder3.tsx │ ├── IncompleteReminder4.tsx │ ├── IncompleteReminder5.tsx │ ├── IncompleteReminder6.tsx │ ├── MicrodepositFailure.tsx │ ├── StudentDispersed.tsx │ ├── TuitionRequestReminder1.tsx │ ├── TuitionRequestReminder2.tsx │ ├── TuitionRequestReminder3.tsx │ ├── TuitionRequestReminder4.tsx │ ├── TuitionRequestReminder5.tsx │ ├── TuitionRequestReminder6.tsx │ ├── TuitionRequestReminder7.tsx │ ├── assets │ │ ├── action-required.png │ │ ├── balloons.png │ │ ├── exit-interview-group.png │ │ ├── instagram.png │ │ ├── jumping-man.png │ │ ├── logo-full.png │ │ ├── logo.png │ │ ├── one-dollar.png │ │ ├── pause.png │ │ ├── payment-pause.png │ │ ├── payment-reduction.png │ │ ├── reminder.png │ │ ├── squiggle.png │ │ ├── twitter.png │ │ └── two-dollars.png │ ├── components │ │ ├── BaseLayout.tsx │ │ ├── Button.tsx │ │ ├── Divider.tsx │ │ ├── Footer.tsx │ │ ├── Head.tsx │ │ ├── Headline.tsx │ │ ├── HeadlineImage.tsx │ │ ├── Li.tsx │ │ ├── Link.tsx │ │ ├── P.tsx │ │ ├── Spacer.tsx │ │ └── theme.ts │ ├── index.ts │ ├── previews │ │ ├── FinalizingReminder.tsx │ │ ├── IncompleteReminder.tsx │ │ ├── Misc.tsx │ │ └── TuitionRequestReminder.tsx │ └── util │ │ └── assetUrl.ts ├── mailing.config.json ├── package.json ├── previews_html │ ├── finalizing_reminder_finalizing_reminder1.html │ ├── finalizing_reminder_finalizing_reminder2.html │ ├── finalizing_reminder_finalizing_reminder3.html │ ├── finalizing_reminder_finalizing_reminder4.html │ ├── finalizing_reminder_finalizing_reminder5.html │ ├── finalizing_reminder_finalizing_reminder6.html │ ├── finalizing_reminder_finalizing_reminder7.html │ ├── incomplete_reminder_incomplete_reminder1.html │ ├── incomplete_reminder_incomplete_reminder2.html │ ├── incomplete_reminder_incomplete_reminder3.html │ ├── incomplete_reminder_incomplete_reminder4.html │ ├── incomplete_reminder_incomplete_reminder5.html │ ├── incomplete_reminder_incomplete_reminder6.html │ ├── misc_application_approved.html │ ├── misc_application_complete.html │ ├── misc_exit_interview.html │ ├── misc_finalizing_invite.html │ ├── misc_microdeposit_failure.html │ ├── misc_student_dispersed.html │ ├── tuition_request_reminder_tuition_request_reminder1.html │ ├── tuition_request_reminder_tuition_request_reminder2.html │ ├── tuition_request_reminder_tuition_request_reminder3.html │ ├── tuition_request_reminder_tuition_request_reminder4.html │ ├── tuition_request_reminder_tuition_request_reminder5.html │ ├── tuition_request_reminder_tuition_request_reminder6.html │ └── tuition_request_reminder_tuition_request_reminder7.html ├── tsconfig.json └── yarn.lock ├── lancey ├── .gitignore ├── README.md ├── emails │ ├── NewFeature.jsx │ ├── NewView.jsx │ ├── PasswordReset.jsx │ ├── SuccessfulIntegration.jsx │ ├── TrialEnded.jsx │ ├── UsageExceeded.jsx │ ├── Welcome.jsx │ ├── assets │ │ ├── ab-test.png │ │ ├── clock.png │ │ ├── exclamation.png │ │ ├── green-check.png │ │ ├── linkedin.png │ │ ├── logo-full.png │ │ ├── logo.png │ │ ├── smirk.png │ │ └── sparkle.png │ ├── components │ │ ├── BaseLayout.jsx │ │ ├── Button.jsx │ │ ├── DesktopSpacer.jsx │ │ ├── Divider.jsx │ │ ├── Footer.jsx │ │ ├── Head.jsx │ │ ├── Headline.jsx │ │ ├── IconImage.jsx │ │ ├── Li.jsx │ │ ├── Link.jsx │ │ ├── P.jsx │ │ └── theme.js │ ├── index.js │ ├── previews │ │ ├── NewFeature.jsx │ │ ├── NewView.jsx │ │ ├── PasswordReset.jsx │ │ ├── SuccessfulIntegration.jsx │ │ ├── TrialEnded.jsx │ │ ├── UsageExceeded.jsx │ │ └── Welcome.jsx │ └── util │ │ └── assetUrl.js ├── mailing.config.json ├── package.json ├── previews_html │ ├── new_feature_preview.html │ ├── new_view_preview.html │ ├── password_reset_preview.html │ ├── successful_integration_preview.html │ ├── trial_ended_preview.html │ ├── usage_exceeded_preview.html │ └── welcome_preview.html └── yarn.lock └── thoughtful-post ├── .gitignore ├── README.md ├── emails ├── NewMatch.tsx ├── Survey.tsx ├── Upcoming.tsx ├── assets │ ├── calendar.png │ ├── cards.png │ ├── cart.png │ ├── checkbox-checked.png │ ├── checkbox.png │ ├── facebook.png │ ├── helping-hand.png │ ├── instagram.png │ └── logo-full.png ├── components │ ├── Button.tsx │ ├── Cards.tsx │ ├── Checklist.tsx │ ├── Footer.tsx │ ├── Heading.tsx │ ├── Layout.tsx │ ├── Link.tsx │ ├── Spacer.tsx │ └── Text.tsx ├── index.ts ├── previews │ ├── NewMatch.tsx │ ├── Survey.tsx │ └── Upcoming.tsx ├── theme.ts ├── tsconfig.json └── util │ ├── accessibleColor.ts │ ├── assetUrl.ts │ └── cssHelpers.ts ├── mailing.config.json ├── package.json ├── previews_html ├── new_match_preview.html ├── survey_preview.html ├── upcoming_preview.html └── upcoming_with_list.html └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Sofn Inc 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | Mailing logo 3 | Mailing logo 4 | 5 |
6 | 7 | # Templates 8 | 9 | This repo is for showcasing email templates built with [Mailing](https://www.mailing.run). Built some cool templates you want to share with the community? Submit a PR adding it to the list. 10 | 11 |

12 | 13 | 14 | 15 | ### Lancey [Demo](https://lancey-mailing.vercel.app/) / [Source](https://github.com/sofn-xyz/mailing-templates/tree/main/lancey) 16 | 17 |

18 | 19 | 20 | 21 | ### BBeam [Demo](https://bbeam-mailing.vercel.app/) / [Source](https://github.com/sofn-xyz/mailing-templates/tree/main/bbeam) 22 | 23 |

24 | 25 | 26 | 27 | ### Mailing [Demo](https://emails.mailing.run/) / [Source](https://github.com/sofn-xyz/mailing/tree/main/packages/web/emails) 28 | 29 |

30 | 31 | 32 | 33 | ### Fynn [Demo](https://fynn-mailing.vercel.app/) / [Source](https://github.com/sofn-xyz/mailing-templates/tree/main/fynn) 34 | 35 |

36 | 37 | 38 | 39 | 40 | ### ThoughtfulPost [Demo](https://thoughtful-post-mailing.vercel.app/) / [Source](https://github.com/sofn-xyz/mailing-templates/tree/main/thoughtful-post) 41 | 42 |

43 | 44 | 45 | 46 | 47 | ### BookBook [Demo](https://book-book-mailing.vercel.app/) / [Source](https://github.com/sofn-xyz/mailing-templates/tree/main/book-book) 48 | 49 |
50 | -------------------------------------------------------------------------------- /bbeam/.gitignore: -------------------------------------------------------------------------------- 1 | .mailing 2 | node_modules 3 | -------------------------------------------------------------------------------- /bbeam/README.md: -------------------------------------------------------------------------------- 1 | # BBeam + Mailing 2 | 3 | Templates for BBeam 4 | 5 | Built with [Mailing](https://www.mailing.run) 6 | 7 | 8 | ## Local development 9 | 10 | ``` 11 | yarn install 12 | yarn mailing 13 | ``` 14 | -------------------------------------------------------------------------------- /bbeam/emails/Invoice.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | MjmlSection, 3 | MjmlColumn, 4 | MjmlWrapper, 5 | MjmlImage, 6 | MjmlGroup, 7 | MjmlRaw, 8 | } from "mjml-react"; 9 | import Layout from "./components/Layout"; 10 | import Footer from "./components/Footer"; 11 | import Heading from "./components/Heading"; 12 | import Link from "./components/Link"; 13 | import Text from "./components/Text"; 14 | import { fontSize, colors, borderRadius, themeDefaults } from "./theme"; 15 | import assetUrl from "./util/assetUrl"; 16 | import React from "react"; 17 | 18 | export type InvoiceData = { 19 | billingPeriod: string; // "Nov 1-30" 20 | total: number; // 1000 21 | }; 22 | type InvoiceProps = { 23 | email: string; 24 | name: string; 25 | invoice: InvoiceData; 26 | }; 27 | 28 | const InvoiceRow = ({ 29 | left, 30 | right, 31 | }: { 32 | left: React.ReactNode; 33 | right: React.ReactNode; 34 | }) => { 35 | return ( 36 | 37 | 38 | 39 | {left} 40 | 41 | 42 | {right} 43 | 44 | 45 | 46 | ); 47 | }; 48 | 49 | const dollarFormatter = new Intl.NumberFormat("en-US", { 50 | style: "currency", 51 | currency: "USD", 52 | }); 53 | 54 | export default function Invoice({ email, name, invoice }: InvoiceProps) { 55 | return ( 56 | 57 | 62 | 63 | 64 | 65 | 66 | 73 | 74 | 82 | 103 | 104 |
75 | BBeam Logo 81 | 83 | 90 | {invoice.billingPeriod} 91 | 92 |
93 | 100 | Billing period 101 | 102 |
105 | 106 | 107 |
108 |
109 |
110 | 111 | 112 | 113 | 114 | 123 | Thanks for using BBeam 124 | 125 | 126 | Your subscription continues and you’ve been charged. 127 | 128 | 129 | 130 | 131 | 132 | 138 | 139 | 140 | 147 | 148 | 149 | 150 | 151 | 156 | 157 | 158 | 159 | 166 | Total 167 | 168 | 169 | 170 | 178 | {dollarFormatter.format(invoice.total)} 179 | 180 | 181 | 182 | 183 | 184 | 185 | You saved $2.00 because your first week was free. 186 | 187 | 188 | 189 | 194 | 195 | Questions about your bill? Lorem ipsum dolor sit 196 | amet, consectetur adipiscing elit, sed do eiusmod{" "} 197 | tempor incididunt. 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 209 | 4TB Storage{" "} 210 | 211 | (4 weeks x {dollarFormatter.format(3.0)}) 212 | 213 | 214 | } 215 | right={{dollarFormatter.format(12.0)}} 216 | /> 217 | 218 | 219 | 220 | 221 | 222 | Subtotal} 224 | right={{dollarFormatter.format(12.0)}} 225 | /> 226 | 227 | 231 | -{dollarFormatter.format(3.0)} 232 | 233 | } 234 | /> 235 | 236 | 239 | Legal item 240 | 241 | 252 | 253 | 254 | } 255 | right={dollarFormatter.format(0.5)} 256 | /> 257 | 258 | 259 | 260 | 261 | 262 | 263 | Duis aute irure dolor in reprehenderit in voluptate velit esse 264 | cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat 265 | cupidatat non proident, sunt in culpa qui officia deserunt mollit 266 | anim id est laborum. 267 | 268 | 269 | 270 | 271 | 272 |