Related Posts

Suggested further articles.

html

<section class="related">
  <h2 class="related__heading">Related reading</h2>
  <div class="related__grid related__grid--grid">
    <article class="related__item">
      <div class="related__thumb" style="background:#BFD9F2;" role="img" aria-label="Thumbnail"></div>
      <h3>Why smaller teams ship faster</h3>
      <p>Constraints force clarity, not the other way around.</p>
    </article>
    <article class="related__item">
      <div class="related__thumb" style="background:#BFD9F2;" role="img" aria-label="Thumbnail"></div>
      <h3>A field guide to onboarding emails</h3>
      <p>Six templates we actually use, annotated.</p>
    </article>
  </div>
</section>
<style>
.related { font: 15px system-ui, sans-serif; color: #241430; padding: 24px; }
.related__heading { margin: 0 0 16px; font-size: 20px; font-weight: 700; }
.related__grid { display: grid; gap: 18px; }
.related__grid--grid { grid-template-columns: repeat(2, 1fr); }
.related__grid--list { grid-template-columns: 1fr; }
.related__grid--list .related__item { display: flex; gap: 12px; align-items: center; }
.related__thumb { border-radius: 8px; }
.related__grid--grid .related__thumb { height: 100px; margin-bottom: 10px; }
.related__grid--list .related__thumb { width: 72px; height: 56px; flex-shrink: 0; margin-bottom: 0; }
.related__item h3 { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.related__item p { margin: 0; font-size: 13px; color: #241430aa; }
</style>

tailwind

<section class="font-sans text-[#241430] p-6">
  <h2 class="m-0 mb-4 text-xl font-bold">Related reading</h2>
  <div class="related-tw related-tw--grid grid gap-4.5">
    <article class="related-tw__item">
      <div class="related-tw__thumb rounded-lg" style="background:#BFD9F2;" role="img" aria-label="Thumbnail"></div>
      <h3 class="m-0 mb-1 text-[15px] font-bold">Why smaller teams ship faster</h3>
      <p class="m-0 text-[13px] text-[#241430]/65">Constraints force clarity, not the other way around.</p>
    </article>
    <article class="related-tw__item">
      <div class="related-tw__thumb rounded-lg" style="background:#BFD9F2;" role="img" aria-label="Thumbnail"></div>
      <h3 class="m-0 mb-1 text-[15px] font-bold">A field guide to onboarding emails</h3>
      <p class="m-0 text-[13px] text-[#241430]/65">Six templates we actually use, annotated.</p>
    </article>
  </div>
</section>
<style>
.related-tw--grid { grid-template-columns: repeat(2, 1fr); }
.related-tw--list { grid-template-columns: 1fr; }
.related-tw--grid .related-tw__thumb { height: 100px; margin-bottom: 10px; }
.related-tw--list .related-tw__item { display: flex; gap: 12px; align-items: center; }
.related-tw--list .related-tw__thumb { width: 72px; height: 56px; flex-shrink: 0; margin-bottom: 0; }
</style>

react

export function RelatedPosts({
  heading = "Related reading",
  layout = "grid",
  accent = "#BFD9F2",
  showExcerpt = true,
}) {
  const list = layout === "list";
  const posts = [
    { title: "Why smaller teams ship faster", excerpt: "Constraints force clarity, not the other way around." },
    { title: "A field guide to onboarding emails", excerpt: "Six templates we actually use, annotated." },
  ];
  return (
    <section style={{ font: "15px system-ui, sans-serif", color: "#241430", padding: 24 }}>
      <h2 style={{ margin: "0 0 16px", fontSize: 20, fontWeight: 700 }}>{heading}</h2>
      <div style={{ display: "grid", gap: 18, gridTemplateColumns: list ? "1fr" : "repeat(2, 1fr)" }}>
        {posts.map((post) => (
          <article key={post.title} style={{ display: list ? "flex" : "block", gap: 12, alignItems: "center" }}>
            <div role="img" aria-label="Thumbnail" style={{ borderRadius: 8, background: accent,
              width: list ? 72 : "auto", height: list ? 56 : 100, flexShrink: 0, marginBottom: list ? 0 : 10 }} />
            <div>
              <h3 style={{ margin: "0 0 4px", fontSize: 15, fontWeight: 700 }}>{post.title}</h3>
              {showExcerpt && <p style={{ margin: 0, fontSize: 13, color: "#241430aa" }}>{post.excerpt}</p>}
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}