Edit Related Posts

Name

Also known as (comma separated)

Brief definition Suggested further articles.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "heading", "type": "text", "label": "Heading", "default": "Related reading" }, { "id": "layout", "type": "select", "label": "Layout", "default": "grid", "options": [ "grid", "list" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#BFD9F2", "presets": [ "#BFD9F2", "#A8E6C1", "#F5C2E0", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "showExcerpt", "type": "toggle", "label": "Show excerpts", "default": true } ]

Templates (JSON object keyed by format) { "html": "<section class=\"related\">\n <h2 class=\"related__heading\">{{heading}}</h2>\n <div class=\"related__grid related__grid--{{layout}}\">\n <article class=\"related__item\">\n <div class=\"related__thumb\" style=\"background:{{accent}};\" role=\"img\" aria-label=\"Thumbnail\"></div>\n <h3>Why smaller teams ship faster</h3>\n {{#if showExcerpt}}<p>Constraints force clarity, not the other way around.</p>{{/if}}\n </article>\n <article class=\"related__item\">\n <div class=\"related__thumb\" style=\"background:{{accent}};\" role=\"img\" aria-label=\"Thumbnail\"></div>\n <h3>A field guide to onboarding emails</h3>\n {{#if showExcerpt}}<p>Six templates we actually use, annotated.</p>{{/if}}\n </article>\n </div>\n</section>\n<style>\n.related { font: 15px system-ui, sans-serif; color: #241430; padding: 24px; }\n.related__heading { margin: 0 0 16px; font-size: 20px; font-weight: 700; }\n.related__grid { display: grid; gap: 18px; }\n.related__grid--grid { grid-template-columns: repeat(2, 1fr); }\n.related__grid--list { grid-template-columns: 1fr; }\n.related__grid--list .related__item { display: flex; gap: 12px; align-items: center; }\n.related__thumb { border-radius: 8px; }\n.related__grid--grid .related__thumb { height: 100px; margin-bottom: 10px; }\n.related__grid--list .related__thumb { width: 72px; height: 56px; flex-shrink: 0; margin-bottom: 0; }\n.related__item h3 { margin: 0 0 4px; font-size: 15px; font-weight: 700; }\n.related__item p { margin: 0; font-size: 13px; color: #241430aa; }\n</style>", "tailwind": "<section class=\"font-sans text-[#241430] p-6\">\n <h2 class=\"m-0 mb-4 text-xl font-bold\">{{heading}}</h2>\n <div class=\"related-tw related-tw--{{layout}} grid gap-4.5\">\n <article class=\"related-tw__item\">\n <div class=\"related-tw__thumb rounded-lg\" style=\"background:{{accent}};\" role=\"img\" aria-label=\"Thumbnail\"></div>\n <h3 class=\"m-0 mb-1 text-[15px] font-bold\">Why smaller teams ship faster</h3>\n {{#if showExcerpt}}<p class=\"m-0 text-[13px] text-[#241430]/65\">Constraints force clarity, not the other way around.</p>{{/if}}\n </article>\n <article class=\"related-tw__item\">\n <div class=\"related-tw__thumb rounded-lg\" style=\"background:{{accent}};\" role=\"img\" aria-label=\"Thumbnail\"></div>\n <h3 class=\"m-0 mb-1 text-[15px] font-bold\">A field guide to onboarding emails</h3>\n {{#if showExcerpt}}<p class=\"m-0 text-[13px] text-[#241430]/65\">Six templates we actually use, annotated.</p>{{/if}}\n </article>\n </div>\n</section>\n<style>\n.related-tw--grid { grid-template-columns: repeat(2, 1fr); }\n.related-tw--list { grid-template-columns: 1fr; }\n.related-tw--grid .related-tw__thumb { height: 100px; margin-bottom: 10px; }\n.related-tw--list .related-tw__item { display: flex; gap: 12px; align-items: center; }\n.related-tw--list .related-tw__thumb { width: 72px; height: 56px; flex-shrink: 0; margin-bottom: 0; }\n</style>", "react": "export function RelatedPosts({\n heading = \"{{heading}}\",\n layout = \"{{layout}}\",\n accent = \"{{accent}}\",\n showExcerpt = {{showExcerpt}},\n}) {\n const list = layout === \"list\";\n const posts = [\n { title: \"Why smaller teams ship faster\", excerpt: \"Constraints force clarity, not the other way around.\" },\n { title: \"A field guide to onboarding emails\", excerpt: \"Six templates we actually use, annotated.\" },\n ];\n return (\n <section style={{ font: \"15px system-ui, sans-serif\", color: \"#241430\", padding: 24 }}>\n <h2 style={{ margin: \"0 0 16px\", fontSize: 20, fontWeight: 700 }}>{heading}</h2>\n <div style={{ display: \"grid\", gap: 18, gridTemplateColumns: list ? \"1fr\" : \"repeat(2, 1fr)\" }}>\n {posts.map((post) => (\n <article key={post.title} style={{ display: list ? \"flex\" : \"block\", gap: 12, alignItems: \"center\" }}>\n <div role=\"img\" aria-label=\"Thumbnail\" style={{ borderRadius: 8, background: accent,\n width: list ? 72 : \"auto\", height: list ? 56 : 100, flexShrink: 0, marginBottom: list ? 0 : 10 }} />\n <div>\n <h3 style={{ margin: \"0 0 4px\", fontSize: 15, fontWeight: 700 }}>{post.title}</h3>\n {showExcerpt && <p style={{ margin: 0, fontSize: 13, color: \"#241430aa\" }}>{post.excerpt}</p>}\n </div>\n </article>\n ))}\n </div>\n </section>\n );\n}" }