Build faster, better
with blocks
x‑Maizzle

Senior Emailing Developer

aka Bartosz Talarek
is excited to share

x-Maizzle HTML Layer 1.0

Examples: x-Maizzle/examples

Visual Studio Code Extension:
Syntax highlighting and autocompletion for x-Maizzle markup language

x-Maizzle HTML Layer 1.0 Visual Studio Code Extension

Syntax

Core
x-html, x-body, x-web-fonts

Content
x-p, x-h1, x-h2, x-h3, x-span, x-link, x-image, x-button

Layout
x-column, x-row, x-col, x-background, x-border, x-list, x-divider, x-mobile-show, x-mobile-hide

Helpers
x-br, x-nowrap, x-serif, x-sans-serif, x-monospace

Kinetic
x-tap-to-reveal

Core

Front Matter variables block (default values)
---
preheader: ""
subject: ""
language: "en"
dir: "ltr"
paragraphFont: "Georgia,Times,serif"
headlineFont: "Arial,Helvetica,sans-serif"
serifFont: "Georgia,Times,serif"
sansSerifFont: "Arial,Helvetica,sans-serif"
monospaceFont: "Consolas,monospace"
---

Principles

CSS properties are mapped to x-Maizzle attributes using camelCase notation.

For example: background-color CSS -> backgroundColor x-Maizzle.

Note that not all CSS properties are supported or translated into x-Maizzle attributes.

The x-layout | x-content represent a combination of layout and content-related elements.

CSS Helpers

Component attribute name mobile.
w-full - makes container width 100%.
left, right, center - align left | right | center.
pt-0, pt-10, pt-20 - padding top 0 | 10 | 20 px.
pb-0, pb-10, pb-20 - padding bottom 0 | 10 | 20 px.
px-0, px-10, px-20 - padding left and right 0 | 10 | 20 px.
py-0, py-10, py-20 - padding top and bottom 0 | 10 | 20 px.

Component attribute name dark.
off - maintains light mode color values in dark mode.

x-html, x-body, x-web-fonts

Our starting point. Surrounding code for layout and content elements. It includes CSS Helpers and preheader block.

--- preheader: "" subject: "" language: "en" dir: "ltr" paragraphFont: "Georgia,Times,serif" headlineFont: "Arial,Helvetica,sans-serif" --- <x-html> <x-web-fonts> <x-google-font typeface="sans-serif" family="Montserrat" /> <x-google-font typeface="serif" family="Prata" /> </x-web-fonts> <x-body> x-layout | x-content </x-body> </x-html>

Copy to clipboard

x-body

<x-body backgroundColor="#ffffff" align="center" padding="0" dark="on" mobile="" > x-layout | x-content </x-body>

Copy to clipboard

x-web-fonts

Font family refers to the name of any Google Font, while typeface specifies the style: sans-serif, serif, or monospace.

<x-web-fonts> <x-google-font typeface="sans-serif" family="Montserrat" /> <x-google-font typeface="serif" family="Prata" /> </x-web-fonts>

Copy to clipboard

Content

x-p, x-h1, x-h2, x-h3

Gain full control over text styling with fully customizable paragraphs and headlines. Easily adjust color, font, size, and alignment across all devices, with seamless support for dark mode and mobile responsiveness. Both elements share the same attributes, differing only in their default values.

<x-p color="#000000" fontFamily="Georgia, Times, serif" fontSize="16px" lineHeight="22px" fontWeight="normal" textAlign="left" padding="0" letterSpacing="normal" textTransform="none" dark="on" mobile="" > x-content-text </x-p>

Copy to clipboard

<x-h1 color="#000000" fontFamily="Arial, Helvetica, sans-serif" fontSize="24px" lineHeight="32px" fontWeight="bold" textAlign="left" padding="0" letterSpacing="normal" textTransform="none" dark="on" mobile="" > x-content-text </x-h1>

Copy to clipboard

<x-h2 color="#000000" fontFamily="Arial, Helvetica, sans-serif" fontSize="22px" lineHeight="30px" fontWeight="bold" textAlign="left" padding="0" letterSpacing="normal" textTransform="none" dark="on" mobile="" > x-content-text </x-h2>

Copy to clipboard

<x-h3 color="#000000" fontFamily="Arial, Helvetica, sans-serif" fontSize="20px" lineHeight="28px" fontWeight="bold" textAlign="left" padding="0" letterSpacing="normal" textTransform="none" dark="on" mobile="" > x-content-text </x-h3>

Copy to clipboard

x-span

<x-span color="" fontSize="" lineHeight="" letterSpacing="" fontWeight="normal" textTransform="" dark="off" mobile="" > x-content-text </x-span>

Copy to clipboard

x-link

<x-link href="" color="#0000ff" textDecoration="underline" fontFamily="" fontSize="" lineHeight="" fontWeight="" letterSpacing="" textTransform="" target="_blank" dark="off" mobile="" > x-content-text </x-link>

Copy to clipboard

You can make text bold (b | strong), italic (i | em), underline (u), ~~strikethrough~~ (strike), make a link (x-link), define² superscript₂ (sup | sub).

<x-p color="#323232" padding="60px 0 0 0"> You can make text <b>bold </b> (b | strong), <i>italic </i> (i | em), <u>underline </u> (u), <strike>strikethrough </strike> (strike), <x-link href="https://hermod.tech">make a link </x-link> (x-link), define <sup>2 </sup> superscript <sub>2 </sub> (sup | sub). </x-p>

Copy to clipboard

x-image

<x-image imgSrc="https://placehold.co/600" width="600" height="" alt="" href="" align="center" padding="0" borderRadius="0" dark="on" mobile="" />

Copy to clipboard

<x-image imgSrc="images/row-4a.jpg" width="200" align="left" padding="120px 0 0 0" mobile="w-full" />

Copy to clipboard

<x-image imgSrc="images/row-04-270x180@3x.jpg" width="300" padding="120px 0 0 0" />

Copy to clipboard

<x-image imgSrc="images/row-03-270x180@3x.png" width="400" align="right" padding="120px 0 0 0" mobile="center" />

Copy to clipboard

x-button

<x-button href="" backgroundColor="transparent" width="" color="#000000" fontFamily="Arial, Helvetica, sans-serif" fontSize="18px" lineHeight="24px" fontWeight="normal" textDecoration="none" align="center" padding="0" innerPadding="0" borderColor="transparent" borderWidth="0" borderStyle="solid" borderRadius="0" letterSpacing="normal" textTransform="none" dark="on" mobile="" > x-content-text </x-button>

Copy to clipboard

Discover
What To Do

<x-button href="https://hermod.tech" backgroundColor="#ad0d4d" color="#ffffff" align="left" padding="120px 0 0 0" innerPadding="16px 50px" borderRadius="4px" dark="off" mobile="center" > x-content-text (Discover What To Do) </x-button>

Copy to clipboard

Plan How To Do It

<x-button href="https://hermod.tech" color="#1d5c96" fontSize="24px" width="100%" padding="120px 0 0 0" innerPadding="16px 30px" borderColor="#1d5c96" borderWidth="4px" dark="off" > x-content-text (Plan How To Do It) </x-button>

Copy to clipboard

Act make it happen

<x-button href="https://hermod.tech" backgroundColor="#38b550" color="#ffffff" align="right" padding="120px 0 0 0" innerPadding="16px 30px" borderRadius="16px" textTransform="uppercase" dark="off" mobile="center" > x-content-text (Act Make It Happen) </x-button>

Copy to clipboard

Layout

x-column

<x-column backgroundColor="" width="" height="" align="center" verticalAlign="top" padding="0" borderRadius="0" dark="off" mobile="" > x-layout | x-content </x-column>

Copy to clipboard

Placeholder for layout and content elements.

Looking for some
extra help?

Let me help you get to the next level.
Take advantage and save when working with me.


<x-column width="480" padding="120px 0 0 0">
	<x-image imgSrc="images/float-2b.png" width="480" padding="20px 0 0 0" />
	<x-column backgroundColor="#e1dcbc" padding="0 20px 30px 20px" dark="darkContent3">
		<x-p color="#323232" padding="20px 0 0 0">
			<x-sans-serif>
				Placeholder for layout and content elements.
			</x-sans-serif>
		</x-p>
		<x-image imgSrc="images/float-1a.png" width="440" padding="20px 0 0 0" />
		<x-h3 color="#323232" fontSize="24px" lineHeight="28px" fontWeight="normal" padding="30px 0 0 0">
			Looking for some<br> <strong>extra help</strong>?
		</x-h3>
		<x-p color="#323232" padding="30px 0 0 0">
			<x-sans-serif>
				Let me help you get to the next level.
				<br>
				Take advantage and save when working with me.
			</x-sans-serif>
		</x-p>
		<x-button href="https://hermod.tech" backgroundColor="#38b550" color="#ffffff" padding="30px 0 0 0" innerPadding="12px 30px" borderRadius="24px" dark="off" mobile="right">
			Get In Touch
		</x-button>
	</x-column>
	<x-divider color="#393a3d" size="4px" style="solid" />
</x-column>

Copy to clipboard

x-row

<x-row backgroundColor="" align="center" verticalAlign="top" padding="0" dir="ltr" responsive="on" dark="off" > x-layout | x-content </x-row>

Copy to clipboard

x-col

<x-col backgroundColor="" width="auto" height="" align="center" verticalAlign="top" padding="0" dark="off" mobile="" > x-layout | x-content </x-col>

Copy to clipboard

x-row, x-col

<x-row backgroundColor="#e1dcbc" dark="darkContent3"> <x-col width="300" padding="20px 20px 0 20px"> x-h3 x-p x-button </x-col> <x-col width="300" verticalAlign="bottom"> x-image </x-col> </x-row>

Copy to clipboard

Looking for some
extra help

If you feel you could use some
extra guidance this year.


<x-column padding="120px 0 0 0">
	<x-row backgroundColor="#e1dcbc" dark="darkContent3">
		<x-col width="300" padding="20px 20px 0 20px">
			<x-h3 color="#393a3d" fontSize="26px" lineHeight="30px" textAlign="right" padding="30px 0 0 0" mobile="center">
				Looking for some<br> extra help
			</x-h3>
			<x-p color="#393a3d" fontSize="14px" textAlign="right" padding="30px 0 0 0" mobile="center">
				<x-sans-serif>
					If you feel you could use some
					<br>
					extra guidance this year.
				</x-sans-serif>
			</x-p>
			<x-button href="https://hermod.tech" color="#785644" align="right" padding="30px 0" innerPadding="10px 30px" borderColor="#785644" borderWidth="1px" borderRadius="6px" dark="off" mobile="center">
				Learn More
			</x-button>
		</x-col>
		<x-col width="300" verticalAlign="bottom">
			<x-image imgSrc="images/headshot-1b.png" width="300" />
		</x-col>
	</x-row>
</x-column>
<x-divider color="#393a3d" size="4px" style="solid" />

Copy to clipboard

Looking for some
extra help

If you feel you could use some
extra guidance this year.


<x-column padding="120px 0 0 0">
	<x-row backgroundColor="#f2bc94" dir="rtl" dark="darkContent3">
		<x-col width="300" padding="20px 20px 0 20px">
			<x-h3 color="#393a3d" fontSize="26px" lineHeight="30px" textAlign="left" padding="30px 0 0 0" mobile="center">
				Looking for some<br> extra help
			</x-h3>
			<x-p color="#393a3d" fontSize="14px" textAlign="left" padding="30px 0 0 0" mobile="center">
				<x-sans-serif>
					If you feel you could use some
					<br>
					extra guidance this year.
				</x-sans-serif>
			</x-p>
			<x-button href="https://hermod.tech" color="#785644" align="left" padding="30px 0" innerPadding="10px 30px" borderColor="#785644" borderWidth="1px" borderRadius="6px" dark="off" mobile="center">
				Learn More
			</x-button>
		</x-col>
		<x-col width="300" verticalAlign="bottom">
			<x-image imgSrc="images/headshot-2a.png" width="300" />
		</x-col>
	</x-row>
</x-column>
<x-divider color="#393a3d" size="4px" style="solid" />

Copy to clipboard

x-background

<x-background backgroundImage="https://placehold.co/600x400" backgroundColor="#ffffff" backgroundPosition="center top" backgroundRepeat="no-repeat" backgroundSize="cover" width="600" height="400" align="center" verticalAlign="middle" mobile="" > x-layout | x-content </x-background>

Copy to clipboard

★ Discover
★ Plan
★ Act

Ready To Use


<x-column padding="120px 0 0 0">
	<x-background backgroundImage="images/Background.png" backgroundColor="#3f7732" backgroundPosition="right top" width="600" height="338" verticalAlign="middle">
		<x-column width="400" padding="20px">
			<x-h2 color="#ffd700" fontSize="40px" lineHeight="46px" padding="20px 0 0 0" dark="off" mobile="pt-0">
				<x-nowrap><x-span color="#eaeaea">★</x-span> Discover</x-nowrap>
				<br>
				<x-nowrap><x-span color="#eaeaea">★</x-span> Plan</x-nowrap>
				<br>
				<x-nowrap><x-span color="#eaeaea">★</x-span> Act</x-nowrap>
			</x-h2>
			<x-button href="learn.more.html" backgroundColor="#ad0d4d" color="#eaeaea" align="left" padding="20px 0 0 0" innerPadding="12px 30px" borderRadius="8px" dark="off">
				<strong>Ready To Use</strong>
			</x-button>
		</x-column>
	</x-background>
</x-column>

Copy to clipboard

x-border

<x-border backgroundColor="" borderColor="#000000" borderWidth="1px" borderStyle="solid" align="center" padding="0" borderRadius="0" dark="off" mobile="" > x-layout | x-content </x-border>

Copy to clipboard

x-list

<x-list padding="20px 0 0 0"> <x-item> <x-marker> x-layout | x-content </x-marker> x-layout | x-content </x-item> </x-list>

Copy to clipboard

An ordered list can use markers such as [1…9], [a–z], while an unordered list typically uses bullets like •, or any other symbol you prefer. It can also serve as a layout container—for example, with an image in the left column and text or other elements in the right column.

1)

An ordered list list item 1.

2)

An ordered list list item 2.


<x-list padding="20px 0 0 0">
	<x-item>
		<x-marker>
			<x-p color="#323232" textAlign="right" padding="10px 6px 0 0">1)</x-p>
		</x-marker>
		<x-p color="#323232" padding="10px 0 0 0">
			An ordered list list item 1.
		</x-p>
	</x-item>
	<x-item>
		<x-marker>
			<x-p color="#323232" textAlign="right" padding="10px 6px 0 0">2)</x-p>
		</x-marker>
		<x-p color="#323232" padding="10px 0 0 0">
			An ordered list list item 2.
		</x-p>
	</x-item>
</x-list>

Copy to clipboard

a.

An ordered list list item a.

b.

An ordered list list item b.


<x-list padding="20px 0 0 0">
	<x-item>
		<x-marker>
			<x-p color="#323232" textAlign="right" padding="10px 6px 0 0">a.</x-p>
		</x-marker>
		<x-p color="#323232" padding="10px 0 0 0">
			An ordered list list item a.
		</x-p>
	</x-item>
	<x-item>
		<x-marker>
			<x-p color="#323232" textAlign="right" padding="10px 6px 0 0">b.</x-p>
		</x-marker>
		<x-p color="#323232" padding="10px 0 0 0">
			An ordered list list item b.
		</x-p>
	</x-item>
</x-list>

Copy to clipboard

•

An unordered list item •.

•

An unordered list item •.


<x-list padding="20px 0 0 0">
	<x-item>
		<x-marker>
			<x-p color="#323232" fontSize="22px" textAlign="right" padding="10px 6px 0 0">•</x-p>
		</x-marker>
		<x-p color="#323232" padding="10px 0 0 0">
			An unordered list item •.
		</x-p>
	</x-item>
	<x-item>
		<x-marker>
			<x-p color="#323232" fontSize="22px" textAlign="right" padding="10px 6px 0 0">•</x-p>
		</x-marker>
		<x-p color="#323232" padding="10px 0 0 0">
			An unordered list item •.
		</x-p>
	</x-item>
</x-list>

Copy to clipboard

Discover

what to do

Plan

how to do it

Act

make it happen


<x-list padding="20px 0 0 0">
	<x-item>
		<x-marker>
			<x-image imgSrc="images/SlideDiscover.png" width="160" padding="30px 6px 0 0" />
		</x-marker>
		<x-h2 color="#323232" fontSize="40px" lineHeight="46px" padding="40px 0 0 0">
			<strong>Discover</strong>
		</x-h2>
		<x-p color="#323232" fontSize="20px" lineHeight="26px" padding="6px 0 0 0">
			<x-nowrap>what to do</x-nowrap>
		</x-p>
	</x-item>
	<x-item>
		<x-marker>
			<x-image imgSrc="images/SlidePlan.png" width="160" padding="30px 6px 0 0" />
		</x-marker>
		<x-h2 color="#323232" fontSize="40px" lineHeight="46px" padding="40px 0 0 0">
			<strong>Plan</strong>
		</x-h2>
		<x-p color="#323232" fontSize="20px" lineHeight="26px" padding="6px 0 0 0">
			<x-nowrap>how to do it</x-nowrap>
		</x-p>
	</x-item>
	<x-item>
		<x-marker>
			<x-image imgSrc="images/SlideAct.png" width="160" padding="30px 6px 0 0" />
		</x-marker>
		<x-h2 color="#323232" fontSize="40px" lineHeight="46px" padding="40px 0 0 0">
			<strong>Act</strong>
		</x-h2>
		<x-p color="#323232" fontSize="20px" lineHeight="26px" padding="6px 0 0 0">
			<x-nowrap>make it happen</x-nowrap>
		</x-p>
	</x-item>
</x-list>

Copy to clipboard

x-divider

<x-divider width="600" color="#000000" size="1px" style="solid" align="center" padding="40px 0 0 0" dark="on" mobile="" >

Copy to clipboard

<x-divider size="4px" style="dotted" padding="60px 0 0 0" dark="darkInvert" >

Copy to clipboard

x-mobile-show

<x-mobile-show> x-layout | x-content visible on mobile, hidden on desktop. </x-mobile-show>

Copy to clipboard

x-mobile-hide

<x-mobile-hide> x-layout | x-content hidden on mobile, visible on desktop. </x-mobile-hide>

Copy to clipboard

Helpers

x-br

<x-br mobile="off" />

Copy to clipboard

x-nowrap

<x-nowrap> Text nowrap. </x-nowrap>

Copy to clipboard

x-serif

<x-serif> Text font family: serif typeface. </x-serif>

Copy to clipboard

x-sans-serif

<x-sans-serif> Text font family: sans-serif typeface. </x-sans-serif>

Copy to clipboard

x-monospace

<x-monospace> Text font family: monospace typeface. </x-monospace>

Copy to clipboard

Kinetic

x-tap-to-reveal

<x-tap-to-reveal width="600" tapImageSrc="https://placehold.co/600x400/png?text=Tap+To+Reveal" fallbackSrc="https://placehold.co/600x400/png?text=Image+Revealed+Fallback" href="https://hermod.tech" />

Copy to clipboard

Email Development

Bartosz Talarek