Case Study Card

Summary block linking to a detailed customer story.

html

<article class="case">
  <p class="case__company">Northwind Logistics</p>
  <p class="case__result" style="color:#E8A020;">40% faster onboarding</p>
  <p class="case__summary">How a 200-person ops team replaced six spreadsheets with one workflow.</p>
  <a href="#" class="case__link" style="color:#E8A020;">Read case study &rarr;</a>
</article>
<style>
.case { font: 16px/1.5 system-ui, sans-serif; color: #241430; max-width: 300px; padding: 20px; border: 1px solid #24143022; border-radius: 14px; background: #FAF7F2; }
.case__company { margin: 0 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #24143088; }
.case__result { margin: 0 0 10px; font-size: 26px; font-weight: 800; }
.case__summary { margin: 0 0 14px; font-size: 14px; color: #241430cc; }
.case__link { text-decoration: none; font-weight: 600; font-size: 14px; }
.case__link:hover, .case__link:focus-visible { text-decoration: underline; }
</style>

tailwind

<article class="font-sans text-[#241430] max-w-[300px] p-5 border border-[#24143022] rounded-2xl bg-[#FAF7F2]">
  <p class="m-0 mb-2 text-xs font-bold uppercase tracking-wide text-[#241430]/55">Northwind Logistics</p>
  <p class="m-0 mb-2.5 text-[26px] font-extrabold" style="color:#E8A020;">40% faster onboarding</p>
  <p class="m-0 mb-3.5 text-sm text-[#241430]/80">How a 200-person ops team replaced six spreadsheets with one workflow.</p>
  <a href="#" class="no-underline font-semibold text-sm hover:underline focus-visible:underline" style="color:#E8A020;">Read case study &rarr;</a>
</article>

react

export function CaseStudyCard({
  company = "Northwind Logistics",
  result = "40% faster onboarding",
  summary = "How a 200-person ops team replaced six spreadsheets with one workflow.",
  accent = "#E8A020",
  showLink = true,
}) {
  return (
    <article style={{ font: "16px/1.5 system-ui, sans-serif", color: "#241430", maxWidth: 300, padding: 20,
      border: "1px solid #24143022", borderRadius: 14, background: "#FAF7F2" }}>
      <p style={{ margin: "0 0 8px", fontSize: 12, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.05em", color: "#24143088" }}>{company}</p>
      <p style={{ margin: "0 0 10px", fontSize: 26, fontWeight: 800, color: accent }}>{result}</p>
      <p style={{ margin: "0 0 14px", fontSize: 14, color: "#241430cc" }}>{summary}</p>
      {showLink && <a href="#" style={{ color: accent, textDecoration: "none", fontWeight: 600, fontSize: 14 }}>Read case study &rarr;</a>}
    </article>
  );
}