Blog Card

Summary block for an article.

html

<article class="blogcard">
  <div class="blogcard__thumb" style="background:linear-gradient(135deg, #BFD9F2, #FAF7F2);" role="img" aria-label="Article thumbnail"></div>
  <div class="blogcard__body">
    <span class="blogcard__badge blogcard__badge--Guide">Guide</span>
    <h3 class="blogcard__title">Rebuilding our design system from the ground up</h3>
    <p class="blogcard__excerpt">What we kept, what we threw away, and why the second one felt harder.</p>
    <span class="blogcard__meta">6 min read</span>
  </div>
</article>
<style>
.blogcard { font: 16px/1.5 system-ui, sans-serif; color: #241430; max-width: 320px; background: #FAF7F2; border-radius: 14px; overflow: hidden; border: 1px solid #24143018; }
.blogcard__thumb { height: 140px; }
.blogcard__body { padding: 16px; }
.blogcard__badge { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 8px; border-radius: 999px; margin-bottom: 10px; }
.blogcard__badge--Guide { background: #A8E6C133; color: #1b5c38; }
.blogcard__badge--News { background: #BFD9F233; color: #1b3f5c; }
.blogcard__badge--Opinion { background: #F5C2E033; color: #7a1b52; }
.blogcard__title { margin: 0 0 8px; font-size: 18px; font-weight: 700; }
.blogcard__excerpt { margin: 0 0 12px; font-size: 14px; color: #241430cc; }
.blogcard__meta { font-size: 12px; color: #24143088; }
</style>

tailwind

<article class="max-w-[320px] font-sans text-[#241430] bg-[#FAF7F2] rounded-2xl overflow-hidden border border-[#24143018]">
  <div class="h-[140px]" style="background:linear-gradient(135deg, #BFD9F2, #FAF7F2);" role="img" aria-label="Article thumbnail"></div>
  <div class="p-4">
    <span class="blogcard-tw__badge blogcard-tw__badge--Guide inline-block text-[11px] font-bold uppercase tracking-wide px-2 py-0.5 rounded-full mb-2.5">Guide</span>
    <h3 class="m-0 mb-2 text-lg font-bold">Rebuilding our design system from the ground up</h3>
    <p class="m-0 mb-3 text-sm text-[#241430]/80">What we kept, what we threw away, and why the second one felt harder.</p>
    <span class="text-xs text-[#241430]/55">6 min read</span>
  </div>
</article>
<style>
.blogcard-tw__badge--Guide { background: #A8E6C133; color: #1b5c38; }
.blogcard-tw__badge--News { background: #BFD9F233; color: #1b3f5c; }
.blogcard-tw__badge--Opinion { background: #F5C2E033; color: #7a1b52; }
</style>

react

export function BlogCard({
  title = "Rebuilding our design system from the ground up",
  excerpt = "What we kept, what we threw away, and why the second one felt harder.",
  category = "Guide",
  readTime = "6 min read",
  accent = "#BFD9F2",
}) {
  const badge = {
    Guide: { background: "#A8E6C133", color: "#1b5c38" },
    News: { background: "#BFD9F233", color: "#1b3f5c" },
    Opinion: { background: "#F5C2E033", color: "#7a1b52" },
  }[category] ?? {};
  return (
    <article style={{ maxWidth: 320, font: "16px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2",
      borderRadius: 14, overflow: "hidden", border: "1px solid #24143018" }}>
      <div role="img" aria-label="Article thumbnail" style={{ height: 140, background: `linear-gradient(135deg, ${accent}, #FAF7F2)` }} />
      <div style={{ padding: 16 }}>
        <span style={{ display: "inline-block", fontSize: 11, fontWeight: 700, textTransform: "uppercase",
          letterSpacing: "0.04em", padding: "3px 8px", borderRadius: 999, marginBottom: 10, ...badge }}>{category}</span>
        <h3 style={{ margin: "0 0 8px", fontSize: 18, fontWeight: 700 }}>{title}</h3>
        <p style={{ margin: "0 0 12px", fontSize: 14, color: "#241430cc" }}>{excerpt}</p>
        <span style={{ fontSize: 12, color: "#24143088" }}>{readTime}</span>
      </div>
    </article>
  );
}