Interactive email template
Blog roll with category filter
Serve latest posts by selected topic so each subscriber can self-filter.
Blog-roll modules keep educational newsletters relevant for broad audiences.
Inbox preview
Static HTML rendering of the email body. Use it to check the layout before sending the live AMP version to a test inbox.
Mailneo demo <hello@mailneo.co>
10:42 AM (2 min ago)
Blog roll with category filter
to me · interactive email
code snippets
<!doctype html>
<html amp4email>
<head>
<meta charset="utf-8" />
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<style amp4email-boilerplate>body{visibility:hidden}</style>
<style amp-custom>
body { margin: 0; padding: 16px; font-family: Arial, Helvetica, sans-serif; background: #fff7ed; color: #1f2937; }
.card { max-width: 560px; margin: 0 auto; padding: 16px; border: 1px solid #fed7aa; border-radius: 12px; background: #ffffff; }
h1 { margin: 0 0 8px; font-size: 24px; line-height: 30px; }
.muted { color: #6b7280; font-size: 13px; line-height: 18px; }
.btn { display: inline-block; margin-top: 10px; padding: 10px 14px; border: 0; border-radius: 8px; background: #f97316; color: #ffffff; text-decoration: none; font-weight: 700; cursor: pointer; }
.pill { display: inline-block; margin-right: 8px; margin-bottom: 8px; padding: 4px 9px; border-radius: 999px; border: 1px solid #fdba74; background: #fff7ed; font-size: 12px; }
.item { padding: 10px; border: 1px solid #fed7aa; border-radius: 10px; margin-top: 8px; }
</style>
<title>Blog roll with category filter</title>
</head>
<body>
<section class="card">
<h1>New from the Mailneo blog</h1>
<p class="muted">Pick a topic to update the list.</p>
<amp-state id="blogState">
<script type="application/json">
{"topic": "strategy"}
</script>
</amp-state>
<amp-selector layout="container" on="select:AMP.setState({blogState: {topic: event.targetOption}})">
<span option="strategy" class="pill">Strategy</span>
<span option="deliverability" class="pill">Deliverability</span>
<span option="design" class="pill">Design</span>
</amp-selector>
<amp-list width="auto" height="220" layout="fixed-height" [src]="'https://amp.mailneo.co/demo/blog-roll?topic=' + blogState.topic" src="https://amp.mailneo.co/demo/blog-roll?topic=strategy">
<template type="amp-mustache">
<div class="item">
<p style="margin:0;font-weight:700;">{{title}}</p>
<p class="muted" style="margin:6px 0 0;">{{readingTime}} min read</p>
</div>
</template>
<div placeholder class="muted">Loading posts...</div>
</amp-list>
</section>
</body>
</html>AMP components used
use cases
Content newsletter
Serve segmented reading lists in one campaign.
Industry: B2B SaaS
Product education
Guide users to relevant docs based on topic preference.
gotchas
Category taxonomy
Use stable topic slugs so feed queries do not break after CMS edits.
Archive pruning
Exclude outdated posts from dynamic feed payloads.
conversion uplift data
No conversion benchmark was attached to this template yet.