Quickly build HTML emails with utility-first CSS

Getting Started

Overview

This repository contains a collection of email templates designed for various notifications and communications related to the KohortPay platform. The templates are built using Maizzle, a framework for rapidly developing email templates with Tailwind CSS.

Templates Included

1. Payment Group Details
2. New Member Joins the Group
3. Authorization Payment
4. Capture Payment
5. Payment Group Completion

Setup & Usage

1. Clone the Repository:

   git clone <repository-url>

2. Navigate to the Project Directory:

   cd <project-directory>

3. Install Dependencies:

   npm install

4. Build the Templates:

   maizzle build

Template Structure

Each template is structured with a set of predefined components and variables, allowing for dynamic content injection. Components include headers, footers, buttons, and other UI elements, while variables hold the data to be displayed in the templates.

Components

• <x-header>: Contains the email's main title and pretitle.
• <x-footer>: Holds the footer information and any additional links.
• <x-button>: Represents a clickable button, usually used for CTAs.
• <x-item-row>: Displays individual items in a recapitulative section.
• <x-total-row>: Shows the total amount in a recapitulative section.

Variables

Variables are used to inject dynamic content into the templates. They are defined in the config.js file under the locals object and are referenced in the templates using the @{{variableName}} syntax.

Example:

locals: {
  customer: {
    firstName: "John",
  },
  paymentIntent: {
    amount: "30€",
  },
  // ... other variables ...
}

Customization & Testing

• Modify the variables in config.js to test the templates with different data sets.
• Ensure that the templates are displayed correctly in various email clients and devices.
• Adjust the variable names and structures as per project requirements and naming conventions.

License

The Maizzle framework is open-sourced software licensed under the MIT license.