Callout email component

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;">

<!-- Callout section -->
				<table role="presentation" width="100%" cellspacing="0" cellpadding="0">
					<tr>
						<td class="column alt" style="border-radius: 10px; background-color: #ffffff; padding: 30px; text-align: center;">
							<h2 style="margin: 0; margin-bottom: 20px; font-size: 28px; line-height: 32px; color: #444444; text-align: center; font-weight: 600;">Give us a try</h2>
							<p style="margin: 0; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;">With your account is a 30-day trial to use all the features that our tool set has to offer. Enough time to start seeing the effort you put in for your business starting to pay off!</p>
							<div style="width: 100%; height: 20px;"><p style="float: left; margin: 0; margin-bottom: 20px; width: 100%; line-height: 0;"> </p></div>
							<span 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">Continue using for free</a><!--[if mso]><i style="letter-spacing: 20px; mso-font-width: -100%; mso-text-raise: 30pt;"> </i><![endif]--></span>
						</td>
					</tr>
				</table>

			</div>

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

	</div>

</body>
</html>

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

Other tools and resources from Blocks Edit

Starter email template - modular email skeleton template to use for your templates
Email template guide - a guide to designing and coding a modular email template
Design and workflow newsletter - monthly digest of email production resources and tools

Starter Design System

Callout email component

HTML code

Share this template

Other tools and resources from Blocks Edit