Email - Components - Pajak Design System

Email Wrap

Root wrapper — a 600 px centred column. Place all other email components inside it.

x-pajak::email-wrap

Email Wrap

Email content goes here.

email-wrap.blade.php

<x-pajak::email-wrap>
    <p style="padding:24px;text-align:center;color:#45566D;font-size:15px;">Email content goes here.</p>
</x-pajak::email-wrap>

Email Header

Top bar with a blue background. Accepts a $logo named slot and an optional tag prop for a small chip label on the right.

x-pajak::email-header

Email Header — with tag

ACME

Confirmation

email-header.blade.php

<x-pajak::email-wrap>
    <x-pajak::email-header tag="Confirmation">
        <x-slot:logo>
            <span style="color:#fff;font-weight:700;font-size:18px;letter-spacing:-0.3px;">ACME</span>
        </x-slot:logo>
    </x-pajak::email-header>
</x-pajak::email-wrap>

Email Header — no tag

ACME

email-header-no-tag.blade.php

<x-pajak::email-wrap>
    <x-pajak::email-header>
        <x-slot:logo>
            <span style="color:#fff;font-weight:700;font-size:18px;letter-spacing:-0.3px;">ACME</span>
        </x-slot:logo>
    </x-pajak::email-header>
</x-pajak::email-wrap>

Email Hero

Coloured hero band below the header. Background colour is set via the color prop (any CSS colour value). Supports named slots for the eyebrow label, title, and a default slot for the subtitle.

x-pajak::email-hero

Email Hero — default

Getting started

Welcome to ACME.

Your account is ready. Here's what to do next.

email-hero-default.blade.php

<x-pajak::email-wrap>
    <x-pajak::email-hero>
        <x-slot:eyebrow>Getting started</x-slot:eyebrow>
        <x-slot:title>Welcome to ACME.</x-slot:title>
        Your account is ready. Here's what to do next.
    </x-pajak::email-hero>
</x-pajak::email-wrap>

Email Hero — custom colors

Submitted successfully

Your return is on its way.

Keep this confirmation for your records.

26 days remaining

Don't miss the deadline.

Your draft is saved — just a few minutes to complete.

email-hero-colors.blade.php

<div class="ex-col">
    <x-pajak::email-wrap>
        <x-pajak::email-hero color="#1A7A43">
            <x-slot:eyebrow>Submitted successfully</x-slot:eyebrow>
            <x-slot:title>Your return is on its way.</x-slot:title>
            Keep this confirmation for your records.
        </x-pajak::email-hero>
    </x-pajak::email-wrap>

    <x-pajak::email-wrap>
        <x-pajak::email-hero color="#B87318">
            <x-slot:eyebrow>26 days remaining</x-slot:eyebrow>
            <x-slot:title>Don't miss the deadline.</x-slot:title>
            Your draft is saved — just a few minutes to complete.
        </x-pajak::email-hero>
    </x-pajak::email-wrap>
</div>

Email Body

White content area. All body content — salutation, paragraphs, infocards, alerts, CTAs — goes inside this component. Salutation and paragraph text are written directly as HTML rather than via a dedicated component, giving full control over font sizes, weights, and spacing.

x-pajak::email-body

Email Body

Hi Jan,

Thank you for creating your account. We're here every step of the way.

email-body.blade.php

<x-pajak::email-wrap>
    <x-pajak::email-body>
        <p style="font-size:17px;font-weight:600;margin-bottom:14px;">Hi Jan,</p>
        <p style="font-size:15px;line-height:1.65;color:#45566D;margin-bottom:20px;">
            Thank you for creating your account. We're here every step of the way.
        </p>
    </x-pajak::email-body>
</x-pajak::email-wrap>

Email Infocard

A rounded key–value detail card, typically used to summarise submission details, draft status, or document metadata. Each row is an x-pajak::email-infocard-row.

x-pajak::email-infocard

Email Infocard

Submission details

Confirmation number REF-2025-08412

Return type PIT-37

Tax year 2025

Net result Refund: 1 240,00 PLN

email-infocard.blade.php

@use('Pajak\Ui\Common\Enums\Email\EmailAccent')

<x-pajak::email-wrap>
    <x-pajak::email-body>
        <x-pajak::email-infocard title="Submission details">
            <x-pajak::email-infocard-row label="Confirmation number" value="REF-2025-08412" :accent="EmailAccent::Blue" />
            <x-pajak::email-infocard-row label="Return type" value="PIT-37" />
            <x-pajak::email-infocard-row label="Tax year" value="2025" />
            <x-pajak::email-infocard-row label="Net result" value="Refund: 1 240,00 PLN" :accent="EmailAccent::Green" />
        </x-pajak::email-infocard>
    </x-pajak::email-body>
</x-pajak::email-wrap>

Email Alert

A contextual alert strip. The type prop drives the icon and colour scheme. Use the $title slot for the bold heading and the default slot for the message body.

x-pajak::email-alert

Email Alert

Secure access

Your document is protected by your account login.

Refund processing time

Your refund is typically processed within 45 days of submission.

Late filing penalty

Submitting after the deadline may result in a significant penalty.

Action required

Your submission was rejected. Please correct the highlighted fields and resubmit.

email-alert.blade.php

@use('Pajak\Ui\Common\Enums\AlertType')

<x-pajak::email-wrap>
    <x-pajak::email-body>
        <x-pajak::email-alert :type="AlertType::Info">
            <x-slot:title>Secure access</x-slot:title>
            Your document is protected by your account login.
        </x-pajak::email-alert>

        <x-pajak::email-alert :type="AlertType::Success">
            <x-slot:title>Refund processing time</x-slot:title>
            Your refund is typically processed within 45 days of submission.
        </x-pajak::email-alert>

        <x-pajak::email-alert :type="AlertType::Warning">
            <x-slot:title>Late filing penalty</x-slot:title>
            Submitting after the deadline may result in a significant penalty.
        </x-pajak::email-alert>

        <x-pajak::email-alert :type="AlertType::Error">
            <x-slot:title>Action required</x-slot:title>
            Your submission was rejected. Please correct the highlighted fields and resubmit.
        </x-pajak::email-alert>
    </x-pajak::email-body>
</x-pajak::email-wrap>

Email CTA

A centred call-to-action link button. Use the secondary prop for an outline variant. Multiple CTAs can be placed side-by-side by wrapping them in a flex container.

x-pajak::email-cta

Email CTA — primary

Start my return

email-cta-primary.blade.php

<x-pajak::email-wrap>
    <x-pajak::email-body>
        <x-pajak::email-cta href="#">
            Start my return
        </x-pajak::email-cta>
    </x-pajak::email-body>
</x-pajak::email-wrap>

Email CTA — custom color, secondary & side-by-side

email-cta-variants.blade.php

<div class="ex-col">
    <x-pajak::email-wrap>
        <x-pajak::email-body>
            <x-pajak::email-cta href="#" color="#27AE60">
                View my submission
            </x-pajak::email-cta>
        </x-pajak::email-body>
    </x-pajak::email-wrap>

    <x-pajak::email-wrap>
        <x-pajak::email-body>
            <x-pajak::email-cta href="#" :secondary="true">
                View in account
            </x-pajak::email-cta>
        </x-pajak::email-body>
    </x-pajak::email-wrap>

    <x-pajak::email-wrap>
        <x-pajak::email-body>
            <div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:28px 0;">
                <x-pajak::email-cta href="#">Download PDF</x-pajak::email-cta>
                <x-pajak::email-cta href="#" :secondary="true">View in account</x-pajak::email-cta>
            </div>
        </x-pajak::email-body>
    </x-pajak::email-wrap>
</div>

Email Steps

A vertical numbered step list. Each x-pajak::email-step renders a numbered (or done-check) bubble alongside a title and optional description.

x-pajak::email-steps

Email Steps

Profile completed

Your personal details are saved.

2

Import your PIT-11

Upload your employer's statement.

3

Review and submit

Most returns take under 10 minutes.

email-steps.blade.php

<x-pajak::email-wrap>
    <x-pajak::email-body>
        <x-pajak::email-steps>
            <x-pajak::email-step :number="1" :done="true"
                title="Profile completed"
                description="Your personal details are saved." />
            <x-pajak::email-step :number="2"
                title="Import your PIT-11"
                description="Upload your employer's statement." />
            <x-pajak::email-step :number="3"
                title="Review and submit"
                description="Most returns take under 10 minutes." />
        </x-pajak::email-steps>
    </x-pajak::email-body>
</x-pajak::email-wrap>

Email Divider

A thin horizontal rule for separating content sections. No props or slots.

x-pajak::email-divider

Email Divider

Content above the divider.

Content below the divider.

email-divider.blade.php

<x-pajak::email-wrap>
    <x-pajak::email-body>
        <p style="font-size:15px;color:#45566D;margin-bottom:20px;">Content above the divider.</p>
        <x-pajak::email-divider />
        <p style="font-size:15px;color:#45566D;margin-top:20px;">Content below the divider.</p>
    </x-pajak::email-body>
</x-pajak::email-wrap>

Email Note

A small muted footnote paragraph — typically placed after a divider for legal, support, or reference copy. Plain links (<a> tags) inside the slot are styled automatically.

x-pajak::email-note

Email Note

Save or print this email as your proof of submission. The confirmation number above is your official reference.

Questions? Contact us at [email protected].

email-note.blade.php

<x-pajak::email-wrap>
    <x-pajak::email-body>
        <x-pajak::email-note>
            Save or print this email as your proof of submission. The confirmation number above
            is your official reference.
        </x-pajak::email-note>

        <x-pajak::email-note>
            Questions? Contact us at
            <a href="mailto:[email protected]">[email protected]</a>.
        </x-pajak::email-note>
    </x-pajak::email-body>
</x-pajak::email-wrap>

Email Footer

The footer band at the bottom of the email. Accepts a $logo named slot, a $links named slot for navigation links, and a default slot for the legal/address copy. Each <a> inside $links is styled automatically.

x-pajak::email-footer

Email Footer

email-footer.blade.php

<x-pajak::email-wrap>
    <x-pajak::email-footer>
        <x-slot:logo>
            <span style="color:#3F6FCA;font-weight:700;font-size:18px;letter-spacing:-0.3px;">ACME</span>
        </x-slot:logo>

        <x-slot:links>
            <a href="#">My Account</a>
            <a href="#">Help Centre</a>
            <a href="#">Privacy Policy</a>
            <a href="#">Unsubscribe</a>
        </x-slot:links>

        ACME Corp · 123 Example Street · Warsaw, Poland<br>
        You received this because you created an account. <a href="#">Unsubscribe</a>.
    </x-pajak::email-footer>
</x-pajak::email-wrap>

Full template

A complete welcome email composed from all sub-components — header, hero, body, infocard, steps, alert, CTA, divider, note, and footer.

Full template

ACME

Welcome

Getting started

Welcome — your account is ready.

Here's what to do next to get up and running.

Hi Jan,

Thank you for creating your account. We're here every step of the way.

Account details

Account number ACC-2025-00142

Plan Professional

Billing cycle Monthly

Status Active

1

Complete your profile

Add your details so we can pre-fill your information.

2

Import your documents

Upload or connect your account for automatic import.

3

Review and submit

We'll check everything before you confirm.

Secure access

Your account is protected. Never share your login credentials with anyone.

Get started

Questions? Our support team is available Monday–Friday, 9:00–18:00.

full-template.blade.php

@use('Pajak\Ui\Common\Enums\Email\EmailAccent')
@use('Pajak\Ui\Common\Enums\AlertType')

<x-pajak::email-wrap>

    <x-pajak::email-header tag="Welcome">
        <x-slot:logo>
            <span style="color:#fff;font-weight:700;font-size:18px;letter-spacing:-0.3px;">ACME</span>
        </x-slot:logo>
    </x-pajak::email-header>

    <x-pajak::email-hero color="#3F6FCA">
        <x-slot:eyebrow>Getting started</x-slot:eyebrow>
        <x-slot:title>Welcome — your account is ready.</x-slot:title>
        Here's what to do next to get up and running.
    </x-pajak::email-hero>

    <x-pajak::email-body>

        <p style="font-size:17px;font-weight:600;margin-bottom:14px;">Hi Jan,</p>
        <p style="font-size:15px;line-height:1.65;color:#45566D;margin-bottom:20px;">
            Thank you for creating your account. We're here every step of the way.
        </p>

        <x-pajak::email-infocard title="Account details">
            <x-pajak::email-infocard-row label="Account number" value="ACC-2025-00142" :accent="EmailAccent::Blue" />
            <x-pajak::email-infocard-row label="Plan" value="Professional" />
            <x-pajak::email-infocard-row label="Billing cycle" value="Monthly" />
            <x-pajak::email-infocard-row label="Status" value="Active" :accent="EmailAccent::Green" />
        </x-pajak::email-infocard>

        <x-pajak::email-steps>
            <x-pajak::email-step :number="1" title="Complete your profile"
                description="Add your details so we can pre-fill your information." />
            <x-pajak::email-step :number="2" title="Import your documents"
                description="Upload or connect your account for automatic import." />
            <x-pajak::email-step :number="3" title="Review and submit"
                description="We'll check everything before you confirm." />
        </x-pajak::email-steps>

        <x-pajak::email-alert :type="AlertType::Info">
            <x-slot:title>Secure access</x-slot:title>
            Your account is protected. Never share your login credentials with anyone.
        </x-pajak::email-alert>

        <x-pajak::email-cta href="#">
            Get started
        </x-pajak::email-cta>

        <x-pajak::email-divider />

        <x-pajak::email-note>
            Questions? Our support team is available Monday–Friday, 9:00–18:00.
        </x-pajak::email-note>

    </x-pajak::email-body>

    <x-pajak::email-footer>
        <x-slot:logo>
            <span style="color:#3F6FCA;font-weight:700;font-size:18px;letter-spacing:-0.3px;">ACME</span>
        </x-slot:logo>

        <x-slot:links>
            <a href="#">My Account</a>
            <a href="#">Help Centre</a>
            <a href="#">Privacy Policy</a>
        </x-slot:links>

        ACME Corp · 123 Example Street · Warsaw, Poland<br>
        You received this because you created an account. <a href="#">Unsubscribe</a>.
    </x-pajak::email-footer>

</x-pajak::email-wrap>