Story

User-focused work requirement.

html

<article class="story-card" style="border-top: 4px solid #D9C8F0;">
  <div class="story-card__meta">
    <span class="story-card__points">5 pts</span>
    <span class="story-card__status" data-status="In progress">In progress</span>
  </div>
  <p class="story-card__text">
    <span class="story-card__kicker">As a</span> product manager,
    <span class="story-card__kicker">I want</span> compare velocity across teams,
    <span class="story-card__kicker">so that</span> I can rebalance workload before it becomes a bottleneck.
  </p>
</article>
<style>
.story-card { font-family: system-ui, sans-serif; max-width: 420px; padding: 18px 20px; background: #FAF7F2; color: #241430; border-radius: 10px; box-shadow: 0 6px 18px rgba(36,20,48,.12); }
.story-card__meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.story-card__points { font-weight: 700; font-size: 13px; background: #24143014; padding: 3px 9px; border-radius: 999px; }
.story-card__status { font-weight: 600; font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1.5px solid currentColor; }
.story-card__status[data-status="Backlog"] { color: #5b5266; border-color: #5b5266; background: #24143010; }
.story-card__status[data-status="In progress"] { color: #1a3a5c; border-color: #6ea3d6; background: #BFD9F250; }
.story-card__status[data-status="Done"] { color: #1c5c34; border-color: #5fae7f; background: #A8E6C150; }
.story-card__text { margin: 0; line-height: 1.6; font-size: 14px; }
.story-card__kicker { font-weight: 700; color: #241430; }
</style>

tailwind

<article class="max-w-[420px] px-5 py-[18px] bg-[#FAF7F2] text-[#241430] rounded-[10px] shadow-md font-sans" style="border-top: 4px solid #D9C8F0;">
  <div class="flex items-center justify-between mb-2.5">
    <span class="font-bold text-[13px] bg-[#24143014] px-2.5 py-1 rounded-full">5 pts</span>
    <span class="story-status-tw font-semibold text-xs px-2.5 py-1 rounded-full border-[1.5px]" data-status="In progress">In progress</span>
  </div>
  <p class="m-0 leading-relaxed text-sm">
    <span class="font-bold">As a</span> product manager,
    <span class="font-bold">I want</span> compare velocity across teams,
    <span class="font-bold">so that</span> I can rebalance workload before it becomes a bottleneck.
  </p>
</article>
<style>
.story-status-tw[data-status="Backlog"] { color: #5b5266; border-color: #5b5266; background: #24143010; }
.story-status-tw[data-status="In progress"] { color: #1a3a5c; border-color: #6ea3d6; background: #BFD9F250; }
.story-status-tw[data-status="Done"] { color: #1c5c34; border-color: #5fae7f; background: #A8E6C150; }
</style>

react

export function StoryCard({
  persona = "product manager",
  need = "compare velocity across teams",
  benefit = "I can rebalance workload before it becomes a bottleneck",
  points = 5,
  status = "In progress",
  accent = "#D9C8F0",
}) {
  const statusStyle = {
    "Backlog": { color: "#5b5266", borderColor: "#5b5266", background: "#24143010" },
    "In progress": { color: "#1a3a5c", borderColor: "#6ea3d6", background: "#BFD9F250" },
    "Done": { color: "#1c5c34", borderColor: "#5fae7f", background: "#A8E6C150" },
  }[status] ?? {};
  return (
    <article style={{ fontFamily: "system-ui, sans-serif", maxWidth: 420, padding: "18px 20px",
      background: "#FAF7F2", color: "#241430", borderRadius: 10, boxShadow: "0 6px 18px rgba(36,20,48,.12)",
      borderTop: "4px solid " + accent }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 10 }}>
        <span style={{ fontWeight: 700, fontSize: 13, background: "#24143014", padding: "3px 9px", borderRadius: 999 }}>{points} pts</span>
        <span style={{ fontWeight: 600, fontSize: 12, padding: "3px 10px", borderRadius: 999, border: "1.5px solid", ...statusStyle }}>{status}</span>
      </div>
      <p style={{ margin: 0, lineHeight: 1.6, fontSize: 14 }}>
        <strong>As a</strong> {persona}, <strong>I want</strong> {need}, <strong>so that</strong> {benefit}.
      </p>
    </article>
  );
}