article

Self-contained piece of content.

html

<article class="art art--card" style="--accent:#BFD9F2;">
  <p class="art__kicker">Article</p>
  <h2 class="art__title">Why static sites still win</h2>
  <p class="art__excerpt">No server to babysit, no runtime to patch, and a deploy that finishes before your coffee does.</p>
  <footer class="art__byline">By Priya Nair · self-contained, syndicatable on its own</footer>
</article>
<style>
.art { width: 360px; box-sizing: border-box; font: 16px/1.55 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 22px 24px; border-radius: 12px; }
.art--card { border: 1.5px solid #24143022; box-shadow: 0 10px 24px rgba(36,20,48,.08); }
.art--flush { padding: 0; }
.art__kicker { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.art__title { margin: 0 0 10px; font-size: 22px; font-weight: 700; }
.art__excerpt { margin: 0 0 14px; color: #241430cc; }
.art__byline { margin: 0; font-size: 13px; color: #241430aa; border-top: 1px solid #24143018; padding-top: 12px; }
</style>

tailwind

<article class="art-tw art-tw--card w-[360px] box-border font-sans text-base leading-relaxed text-[#241430] bg-[#FAF7F2] p-6 rounded-xl">
  <p class="m-0 mb-1.5 text-[11px] font-bold tracking-widest uppercase" style="color:#BFD9F2;">Article</p>
  <h2 class="m-0 mb-2.5 text-[22px] font-bold">Why static sites still win</h2>
  <p class="m-0 mb-3.5 text-[#241430]/80">No server to babysit, no runtime to patch, and a deploy that finishes before your coffee does.</p>
  <footer class="m-0 text-sm text-[#241430]/65 border-t border-[#24143018] pt-3">By Priya Nair · self-contained, syndicatable on its own</footer>
</article>
<style>
.art-tw--card { border: 1.5px solid #24143022; box-shadow: 0 10px 24px rgba(36,20,48,.08); }
.art-tw--flush { padding: 0; }
</style>

react

export function ArticleElement({
  title = "Why static sites still win",
  excerpt = "No server to babysit, no runtime to patch, and a deploy that finishes before your coffee does.",
  author = "Priya Nair",
  variant = "card",
  accent = "#BFD9F2",
}) {
  const wrap = variant === "card"
    ? { border: "1.5px solid #24143022", boxShadow: "0 10px 24px rgba(36,20,48,.08)" }
    : { padding: 0 };
  return (
    <article style={{ width: 360, boxSizing: "border-box", font: "16px/1.55 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: "22px 24px", borderRadius: 12, ...wrap }}>
      <p style={{ margin: "0 0 6px", fontSize: 11, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase", color: accent }}>Article</p>
      <h2 style={{ margin: "0 0 10px", fontSize: 22, fontWeight: 700 }}>{title}</h2>
      <p style={{ margin: "0 0 14px", color: "#241430cc" }}>{excerpt}</p>
      <footer style={{ margin: 0, fontSize: 13, color: "#241430aa", borderTop: "1px solid #24143018", paddingTop: 12 }}>
        By {author} · self-contained, syndicatable on its own
      </footer>
    </article>
  );
}