Draft

Unpublished saved content.

html

<article class="draft" style="--accent:#F5C2E0;">
  <div class="draft__top">
    <span class="draft__badge">Draft</span>
    <span class="draft__visibility draft__visibility--private">private</span>
  </div>
  <h3 class="draft__title">Untitled: Q3 roadmap thoughts</h3>
  <p class="draft__excerpt">Some early notes on what we might prioritise next quarter, still rough.</p>
  <p class="draft__meta">Edited 3 hours ago</p>
</article>
<style>
.draft { font: 15px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; border: 1.5px dashed #24143040; border-radius: 12px; padding: 16px 18px; max-width: 340px; }
.draft__top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.draft__badge { font: 700 11px system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #241430; background: var(--accent); padding: 3px 8px; border-radius: 999px; }
.draft__visibility { font-size: 12px; color: #24143099; text-transform: capitalize; }
.draft__visibility--unlisted::before { content: "\1F517 "; }
.draft__visibility--private::before { content: "\1F512 "; }
.draft__title { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.draft__excerpt { margin: 0 0 10px; color: #241430cc; }
.draft__meta { margin: 0; font-size: 12px; color: #24143080; }
</style>

tailwind

<article style="--accent:#F5C2E0;" class="draft-tw font-sans text-[15px] text-[#241430] bg-[#FAF7F2] border-[1.5px] border-dashed border-[#24143040] rounded-xl px-[18px] py-4 max-w-[340px]">
  <div class="flex items-center gap-2 mb-2.5">
    <span class="font-bold text-[11px] uppercase tracking-wide text-[#241430] px-2 py-0.5 rounded-full" style="background:#F5C2E0">Draft</span>
    <span class="draft-tw__visibility draft-tw__visibility--private text-xs text-[#241430]/60 capitalize">private</span>
  </div>
  <h3 class="m-0 mb-1.5 text-[17px] font-bold">Untitled: Q3 roadmap thoughts</h3>
  <p class="m-0 mb-2.5 text-[#241430cc]">Some early notes on what we might prioritise next quarter, still rough.</p>
  <p class="m-0 text-xs text-[#24143080]">Edited 3 hours ago</p>
</article>
<style>
.draft-tw__visibility--unlisted::before { content: "\1F517 "; }
.draft-tw__visibility--private::before { content: "\1F512 "; }
</style>

react

export function Draft({
  title = "Untitled: Q3 roadmap thoughts",
  excerpt = "Some early notes on what we might prioritise next quarter, still rough.",
  lastEdited = "Edited 3 hours ago",
  visibility = "private",
  accent = "#F5C2E0",
}) {
  const icon = visibility === "unlisted" ? "\uD83D\uDD17" : "\uD83D\uDD12";
  return (
    <article style={{ fontFamily: "system-ui, sans-serif", fontSize: 15, lineHeight: 1.5, color: "#241430",
      background: "#FAF7F2", border: "1.5px dashed #24143040", borderRadius: 12, padding: "16px 18px", maxWidth: 340 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 10 }}>
        <span style={{ fontWeight: 700, fontSize: 11, letterSpacing: ".04em", textTransform: "uppercase",
          color: "#241430", background: accent, padding: "3px 8px", borderRadius: 999 }}>Draft</span>
        <span style={{ fontSize: 12, color: "#24143099", textTransform: "capitalize" }}>{icon} {visibility}</span>
      </div>
      <h3 style={{ margin: "0 0 6px", fontSize: 17, fontWeight: 700 }}>{title}</h3>
      <p style={{ margin: "0 0 10px", color: "#241430cc" }}>{excerpt}</p>
      <p style={{ margin: 0, fontSize: 12, color: "#24143080" }}>{lastEdited}</p>
    </article>
  );
}