Information listing email component

Preview

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

<!-- Individual listing section -->
				<table role="presentation" width="100%" cellspacing="0" cellpadding="0">
					<tbody><tr>
						<td class="column alt" style="border-radius: 10px; background-color: #ffffff; text-align: left; overflow: hidden;">
							<div>
								<!--[if true]>
								<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="all: unset; opacity: 0;">
									<tr>
								<![endif]-->
								<div style="display: table; width: 100%;">
									<!--[if true]><td width="33.3%"><![endif]-->
									<!--[if !true]><!-->
										<div class="column" style="display: table-cell; width: 33.3%; text-align: center; vertical-align: middle;">
									<!--<![endif]-->
											<a href="#"><img height="auto" src="https://blocksedit.com/starter/img/product-app.jpg" width="190" alt="" class="fill" style="display: block; width: 190px; height: auto;"></a>
									<!--[if !true]><!-->
										</div>
									<!--<![endif]-->
									<!--[if true]>
										</td>
										<td width="66.6%" style="padding-top: 10px; padding-right: 30px; padding-bottom: 10px; padding-left: 20px; vertical-align: middle;">
									<![endif]-->
									<!--[if !true]><!-->
										<div class="column" style="display: table-cell; width: 66.6%; padding-top: 10px; padding-right: 30px; padding-bottom: 10px; padding-left: 20px; vertical-align: middle;">
									<!--<![endif]-->
											<h3 style="margin: 0; margin-bottom: 10px; font-size: 20px; line-height: 22px; color: #444444; text-align: left; font-weight: 600;">New tool available</h3>
											<p style="margin: 0; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; color: #444444; font-weight: 300;">We've added this feature based on user feedback and research. We also eat our own dog food and have been using it with our internal team the last few months as we've fine tuned it!</p>
									<!--[if !true]><!-->
										</div>
									<!--<![endif]-->
									<!--[if true]></td><![endif]-->
								</div>
								<!--[if true]>
									</tr>
								</table>
								<![endif]-->
							</div>
						</td>
					</tr></tbody>
				</table>

			</div>

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

	</div>

</body>
</html>

Copy Code | Download HTML

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

Information listing email component

Preview

HTML code

Share this template

Other tools and resources from Blocks Edit