Intro/hero email component

Simple

Photos via Unsplash, icons via The Noun Project

HTML code

<!DOCTYPE html>
<html lang="en" dir="ltr" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
	<meta name="color-scheme" content="light dark">
	<title>Starter email components</title>
	<!--[if mso]>
	<noscript>
		<xml>
			<o:OfficeDocumentSettings>
				<o:PixelsPerInch>96</o:PixelsPerInch>
			</o:OfficeDocumentSettings>
		</xml>
	</noscript>
	<![endif]-->
	<style>
/* Dark mode settings */
		:root {
			color-scheme: light dark;
		}

/* Reset */
		html, body {
			margin: 0 auto !important;
			padding: 0 !important;
			height: 100% !important;
			width: 100% !important;
		}
		.main {
			box-sizing: border-box;
		}

/* Responsive adjustments */
		@media screen and (max-width: 480px) {
			.column {
				display: block !important;
				width: 100% !important;
				box-sizing: border-box;
				padding: 0 14px 14px 14px !important;
			}
			.column:last-child {
				padding-bottom: 0 !important;
			}
			.column.alt {
				padding-top: 14px !important;
				padding-bottom: 0 !important;
			}
			.column.alt:last-child {
				padding-bottom: 14px !important;
			}
			.column img.fill {
				width: 100% !important;
				height: auto !important;
			}
			.icons .column {
				width: 50% !important;
				float: left;
			}
			.icons .column:nth-child(3) {
				padding-bottom: 0 !important;
			}
			.icons .column.alt:nth-child(3) {
				padding-bottom: 14px !important;
			}
		}

/* Dark mode adjustments */
		@media (prefers-color-scheme: dark) {
			body, .wrapper {
				background-color: #222 !important;
			}
			h1, h2, h3, p, ul li, code {
				color: #f1f1f1 !important;
			}
			.column.alt {
				background-color: #1b1b1b !important;
			}
			.btn {
				background: #a6a6a6 !important;
			}
			.btn a {
				color: #404040 !important;
			}
		}
	</style>
</head>
<body style="padding: 30px 0 !important; background: #efefef;">
	<div style="display: none;"> </div>
	<div role="article" lang="en" dir="ltr" class="wrapper" style="background: #efefef; font-size: 16px; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;">

<!-- Container -->

		<!--[if true]>
		<table role="presentation" style="width: 600px;" align="center"><tr><td>
		<![endif]-->
		<div class="main" style="max-width: 600px; margin: 0 auto;">

			<div class="content" style="margin: 0; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 18px; line-height: 24px; color: #444444; text-align: left; font-weight: 300;">

<!-- Intro/hero section -->
				<h1 style="margin: 0; margin-bottom: 10px; font-size: 36px; line-height: 40px; color: #444444; text-align: left; font-weight: 600;">A better way to run your business</h1>
				<img src="https://blocksedit.com/starter/img/photo-intro.jpg" width="600" height="auto" alt="" style="display: block; border-radius: 10px; width: 100%; height: auto;">
				<div style="width: 100%; height: 20px;"><p style="float: left; margin: 0; margin-bottom: 20px; width: 100%; line-height: 0;"> </p></div>
				<p style="margin: 0; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;">Running your business can get complicated but it doesn't have to! It requires focusing on basic principles and the core of what makes you and your product or service unique. We'll help you with that focus.</p>
				<div style="width: 100%; height: 20px;"><p style="float: left; margin: 0; margin-bottom: 20px; width: 100%; line-height: 0;"> </p></div>
				<span class="btn" style="display: inline-block; border-radius: 50px; background: #3c97db; mso-padding-alt: 0;"><!--[if mso]><i style="letter-spacing: 20px; mso-font-width: -100%; mso-text-raise: 30pt;"> </i><![endif]--><a href="#" style="display: inline-block; padding: 12px 25px; font-family: Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1; text-decoration: none; text-align: center; color: #ffffff; mso-text-raise: 15pt;" target="_blank">Get started</a><!--[if mso]><i style="letter-spacing: 20px; mso-font-width: -100%; mso-text-raise: 30pt;"> </i><![endif]--></span>

			</div>

		</div>
		<!--[if true]>
		</td></tr></table>
		<![endif]-->

	</div>

</body>
</html>

Copy code | Download code on GitHub | View editable example in Blocks Edit

Centered

Photos via Unsplash, icons via The Noun Project

HTML code

<!DOCTYPE html>
<html lang="en" dir="ltr" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
	<meta name="color-scheme" content="light dark">
	<title>Starter email components</title>
	<!--[if mso]>
	<noscript>
		<xml>
			<o:OfficeDocumentSettings>
				<o:PixelsPerInch>96</o:PixelsPerInch>
			</o:OfficeDocumentSettings>
		</xml>
	</noscript>
	<![endif]-->
	<style>
/* Dark mode settings */
		:root {
			color-scheme: light dark;
		}

/* Reset */
		html, body {
			margin: 0 auto !important;
			padding: 0 !important;
			height: 100% !important;
			width: 100% !important;
		}
		.main {
			box-sizing: border-box;
		}

/* Responsive adjustments */
		@media screen and (max-width: 480px) {
			.column {
				display: block !important;
				width: 100% !important;
				box-sizing: border-box;
				padding: 0 14px 14px 14px !important;
			}
			.column:last-child {
				padding-bottom: 0 !important;
			}
			.column.alt {
				padding-top: 14px !important;
				padding-bottom: 0 !important;
			}
			.column.alt:last-child {
				padding-bottom: 14px !important;
			}
			.column img.fill {
				width: 100% !important;
				height: auto !important;
			}
			.icons .column {
				width: 50% !important;
				float: left;
			}
			.icons .column:nth-child(3) {
				padding-bottom: 0 !important;
			}
			.icons .column.alt:nth-child(3) {
				padding-bottom: 14px !important;
			}
		}

/* Dark mode adjustments */
		@media (prefers-color-scheme: dark) {
			body, .wrapper {
				background-color: #222 !important;
			}
			h1, h2, h3, p, ul li, code {
				color: #f1f1f1 !important;
			}
			.column.alt {
				background-color: #1b1b1b !important;
			}
			.btn {
				background: #a6a6a6 !important;
			}
			.btn a {
				color: #404040 !important;
			}
		}
	</style>
</head>
<body style="padding: 30px 0 !important; background: #efefef;">
	<div style="display: none;"> </div>
	<div role="article" lang="en" dir="ltr" class="wrapper" style="background: #efefef; font-size: 16px; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;">

<!-- Container -->

		<!--[if true]>
		<table role="presentation" style="width: 600px;" align="center"><tr><td>
		<![endif]-->
		<div class="main" style="max-width: 600px; margin: 0 auto;">

			<div class="content" style="margin: 0; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 18px; line-height: 24px; color: #444444; text-align: left; font-weight: 300;">

<!-- Intro/hero section -->
				<img src="https://blocksedit.com/starter/img/photo-intro.jpg" width="600" height="auto" alt="" style="display: block; border-radius: 10px; width: 100%; height: auto;">
				<div style="width: 100%; height: 20px;"><p style="float: left; margin: 0; margin-bottom: 20px; width: 100%; line-height: 0;"> </p></div>
				<h1 style="margin: 0; margin-bottom: 10px; font-size: 36px; line-height: 40px; color: #444444; text-align: left; font-weight: 600; text-align: center;">A better way to run your business</h1>
				<p style="margin: 0; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; text-align: center;">Running your business can get complicated but it doesn't have to! It requires focusing on basic principles and the core of what makes you and your product or service unique. We'll help you with that focus.</p>
				<div style="width: 100%; height: 20px;"><p style="float: left; margin: 0; margin-bottom: 20px; width: 100%; line-height: 0;"> </p></div>
				<p style="margin: 0; text-align: center;"><span class="btn" style="display: inline-block; border-radius: 50px; background: #3c97db; mso-padding-alt: 0;"><!--[if mso]><i style="letter-spacing: 20px; mso-font-width: -100%; mso-text-raise: 30pt;"> </i><![endif]--><a href="#" style="display: inline-block; padding: 12px 25px; font-family: Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1; text-decoration: none; text-align: center; color: #ffffff; mso-text-raise: 15pt;" target="_blank">Get started</a><!--[if mso]><i style="letter-spacing: 20px; mso-font-width: -100%; mso-text-raise: 30pt;"> </i><![endif]--></span></p>

			</div>

		</div>
		<!--[if true]>
		</td></tr></table>
		<![endif]-->

	</div>

</body>
</html>

Copy code | Download code on GitHub | View editable example in Blocks Edit

Starter Design System

Intro/hero email component

Simple

HTML code

Centered

HTML code

Share this template

Other tools and resources from Blocks Edit