⚛️ Atomic Design Components

Complete email component library following Atomic Design methodology with frontend-aligned design tokens.

Total Components 14

Atoms 7

Molecules 4

Organisms 3

← Back to Email Gallery 📖 Learn Atomic Design

⚛️ ATOMS - Design Tokens & Basic Elements

Fundamental building blocks that cannot be broken down further. These are design tokens (colors, typography, spacing) and single HTML elements with inline styles.

Color System

resources/views/emails/atoms/_colors.blade.php

Frontend-aligned color palette matching showprima-frontend design tokens. Stripe-inspired professional aesthetic with blue primary brand.

Neutrals (Stripe-Inspired)

neutral-900

neutral-700

neutral-500

neutral-200

Primary Brand (Blue)

primary-500

primary-600

Semantic Colors

success-500

warning-500

error-500

info-500

Usage

@@include('emails.atoms._colors')

Typography Atoms

resources/views/emails/atoms/h1.blade.php, h2.blade.php, h3.blade.php, text.blade.php, small.blade.php

Semantic HTML headings and text elements with email-safe inline styles. Inter font stack with proper fallbacks.

Text Hierarchy

@component('emails.atoms.h1', ['colors' => $colors]) H1 Page Heading (28px) @endcomponent @component('emails.atoms.h2', ['colors' => $colors]) H2 Section Heading (20px) @endcomponent @component('emails.atoms.h3', ['colors' => $colors]) H3 Subsection Heading (16px) @endcomponent @component('emails.atoms.text', ['colors' => $colors]) Body text paragraph (14px). This is the standard text used for email content with comfortable line height and neutral color. @endcomponent @component('emails.atoms.small', ['colors' => $colors]) Small text for fine print and disclaimers (12px). @endcomponent

Usage

@@component('emails.atoms.h1', ['colors' => $colors])
    Welcome to Global Gala
@@endcomponent

@@component('emails.atoms.text', ['colors' => $colors])
    Thank you for joining us.
@@endcomponent

Spacer Atom

resources/views/emails/atoms/spacer.blade.php

Vertical spacing control using email-safe divs with explicit height.

height

Usage

@@include('emails.atoms.spacer', ['height' => '40px'])

🧩 MOLECULES - Simple Components

Groups of atoms functioning together as a unit. Relatively simple but serve a clear purpose.

Button Molecule

resources/views/emails/molecules/button.blade.php

CTA button with Outlook MSO conditionals, multiple variants, and sizes. Table-based for email compatibility.

href variant size colors

Button Variants

variant="primary"

@component('emails.molecules.button', [ 'href' => '#', 'variant' => 'primary', 'size' => 'medium', 'colors' => $colors ]) Primary Button @endcomponent

variant="secondary"

@component('emails.molecules.button', [ 'href' => '#', 'variant' => 'secondary', 'size' => 'medium', 'colors' => $colors ]) Secondary Button @endcomponent

variant="success"

@component('emails.molecules.button', [ 'href' => '#', 'variant' => 'success', 'size' => 'medium', 'colors' => $colors ]) Success Button @endcomponent

variant="danger"

@component('emails.molecules.button', [ 'href' => '#', 'variant' => 'danger', 'size' => 'medium', 'colors' => $colors ]) Danger Button @endcomponent

Button Sizes

size="small"

@component('emails.molecules.button', [ 'href' => '#', 'variant' => 'primary', 'size' => 'small', 'colors' => $colors ]) Small Button @endcomponent

size="medium"

@component('emails.molecules.button', [ 'href' => '#', 'variant' => 'primary', 'size' => 'medium', 'colors' => $colors ]) Medium Button @endcomponent

size="large"

@component('emails.molecules.button', [ 'href' => '#', 'variant' => 'primary', 'size' => 'large', 'colors' => $colors ]) Large Button @endcomponent

Usage

@@component('emails.molecules.button', [
    'href' => 'https://globalgala.com',
    'variant' => 'primary', // primary|secondary|success|danger
    'size' => 'medium', // small|medium|large
    'colors' => $colors
])
    Explore Events
@@endcomponent

Link Molecule

resources/views/emails/molecules/link.blade.php

Text link with consistent styling and brand color.

href colors

@component('emails.atoms.text', ['colors' => $colors]) This is a paragraph with a @component('emails.molecules.link', ['href' => '#', 'colors' => $colors])text link@endcomponent embedded inline. @endcomponent

Usage

@@component('emails.molecules.link', [
    'href' => 'https://globalgala.com',
    'colors' => $colors
])
    View your order
@@endcomponent

Badge Molecule

resources/views/emails/molecules/badge.blade.php

Status indicator with colored background and semantic variants.

variant colors

Badge Variants

variant="success"

@component('emails.molecules.badge', ['variant' => 'success', 'colors' => $colors]) Confirmed @endcomponent

variant="warning"

@component('emails.molecules.badge', ['variant' => 'warning', 'colors' => $colors]) Pending @endcomponent

variant="error"

@component('emails.molecules.badge', ['variant' => 'error', 'colors' => $colors]) Failed @endcomponent

variant="info"

@component('emails.molecules.badge', ['variant' => 'info', 'colors' => $colors]) Processing @endcomponent

Usage

@@component('emails.molecules.badge', [
    'variant' => 'success', // success|warning|error|info|neutral
    'colors' => $colors
])
    Confirmed
@@endcomponent

Info Row Molecule

resources/views/emails/molecules/info-row.blade.php

Label-value pair in table format for email compatibility. Perfect for order details and transaction data.

label value isLast colors

@component('emails.organisms.card', ['colors' => $colors]) @component('emails.atoms.h3', ['colors' => $colors]) Order Details @endcomponent @component('emails.molecules.info-row', [ 'label' => 'Order Number', 'value' => '#12345', 'colors' => $colors ]) @endcomponent @component('emails.molecules.info-row', [ 'label' => 'Order Date', 'value' => 'October 15, 2025', 'colors' => $colors ]) @endcomponent @component('emails.molecules.info-row', [ 'label' => 'Total Amount', 'value' => '€18.61', 'colors' => $colors, 'isLast' => true ]) @endcomponent @endcomponent

Usage

@@component('emails.molecules.info-row', [
    'label' => 'Order Number',
    'value' => '#12345',
    'colors' => $colors,
    'isLast' => false // Set to true to remove bottom border
])
@@endcomponent

🧬 ORGANISMS - Complex Components

Relatively complex components composed of molecules and/or atoms. They form distinct sections of an interface.

Alert Box Organism

resources/views/emails/organisms/alert-box.blade.php

Status messages with colored backgrounds, borders, and optional titles. Semantic color variants for different message types.

variant title colors

Alert Variants

@component('emails.organisms.alert-box', [ 'variant' => 'success', 'title' => 'Success!', 'colors' => $colors ]) Your payment has been processed successfully. @endcomponent @component('emails.organisms.alert-box', [ 'variant' => 'warning', 'title' => 'Warning', 'colors' => $colors ]) Please verify your email address within 24 hours. @endcomponent @component('emails.organisms.alert-box', [ 'variant' => 'error', 'title' => 'Error', 'colors' => $colors ]) Your payment could not be processed. Please try again. @endcomponent @component('emails.organisms.alert-box', [ 'variant' => 'info', 'colors' => $colors ]) Info alert without a title. Your order is being processed. @endcomponent

Usage

@@component('emails.organisms.alert-box', [
    'variant' => 'success', // success|warning|error|info
    'title' => 'Payment Confirmed', // Optional
    'colors' => $colors
])
    Your payment has been processed successfully.
@@endcomponent

Card Organism

resources/views/emails/organisms/card.blade.php

Elevated content container with border. Perfect for grouping related information.

colors

@component('emails.organisms.card', ['colors' => $colors]) @component('emails.atoms.h3', ['colors' => $colors]) Card Title @endcomponent @component('emails.atoms.text', ['colors' => $colors]) This is a card organism. It provides a clean container for grouping related content with a border and white background. @endcomponent @endcomponent

Usage

@@component('emails.organisms.card', ['colors' => $colors])
    <h2>Card Content</h2>
    <p>Your content here...</p>
@@endcomponent

Section Organism

resources/views/emails/organisms/section.blade.php

Content grouping with optional background color. Use to visually separate different sections of an email.

background colors

Background Variants

@component('emails.organisms.section', [ 'background' => 'neutral', 'colors' => $colors ]) @component('emails.atoms.h3', ['colors' => $colors]) Section with Neutral Background @endcomponent @component('emails.atoms.text', ['colors' => $colors]) This section has a subtle neutral background for visual separation. @endcomponent @endcomponent @component('emails.organisms.section', [ 'background' => 'white', 'colors' => $colors ]) @component('emails.atoms.h3', ['colors' => $colors]) Section with White Background @endcomponent @component('emails.atoms.text', ['colors' => $colors]) This section has a white background. @endcomponent @endcomponent

Usage

@@component('emails.organisms.section', [
    'background' => 'neutral', // neutral|white|transparent
    'colors' => $colors
])
    <h2>Section Content</h2>
    <p>Your content here...</p>
@@endcomponent

Global Gala Email Design System v2.0

Following Atomic Design methodology with email-safe components