Certification Badge

Displays a certification.

html

<div class="certbadge certbadge--professional" style="--c:#E8A020;">
  <svg class="certbadge__seal" viewBox="0 0 32 32" aria-hidden="true">
    <path d="M16 2l3.5 3.6 5-1 .6 5 4.9 1.7-2.7 4.3 2.7 4.3-4.9 1.7-.6 5-5-1L16 30l-3.5-3.6-5 1-.6-5-4.9-1.7 2.7-4.3-2.7-4.3 4.9-1.7.6-5 5 1z" fill="var(--c)"/>
    <text x="16" y="20" text-anchor="middle" font-size="10" font-weight="700" fill="#241430">✓</text>
  </svg>
  <div class="certbadge__text">
    <strong class="certbadge__name">Cloud Architect</strong>
    <span class="certbadge__meta">Clydeford Academy · <span class="certbadge__level"></span></span>
  </div>
</div>
<style>
.certbadge { display: flex; align-items: center; gap: 10px; font: 14px/1.4 system-ui, sans-serif; color: #241430; max-width: 300px; }
.certbadge__seal { width: 40px; height: 40px; flex: none; }
.certbadge__meta { display: block; font-size: 12px; opacity: .75; }
.certbadge--foundation .certbadge__level::before { content: "Foundation"; }
.certbadge--professional .certbadge__level::before { content: "Professional"; }
.certbadge--expert .certbadge__level::before { content: "Expert"; }
.certbadge--expert .certbadge__seal { filter: drop-shadow(0 0 3px var(--c)); }
</style>

tailwind

<div class="certbadge-tw certbadge-tw--professional flex items-center gap-2.5 font-sans text-[#241430] max-w-xs" style="--c:#E8A020;">
  <svg class="w-10 h-10 flex-none" viewBox="0 0 32 32" aria-hidden="true">
    <path d="M16 2l3.5 3.6 5-1 .6 5 4.9 1.7-2.7 4.3 2.7 4.3-4.9 1.7-.6 5-5-1L16 30l-3.5-3.6-5 1-.6-5-4.9-1.7 2.7-4.3-2.7-4.3 4.9-1.7.6-5 5 1z" fill="var(--c)"/>
    <text x="16" y="20" text-anchor="middle" font-size="10" font-weight="700" fill="#241430">✓</text>
  </svg>
  <div>
    <strong class="block">Cloud Architect</strong>
    <span class="block text-xs opacity-75">Clydeford Academy · <span class="certbadge-tw__level"></span></span>
  </div>
</div>
<style>
.certbadge-tw--foundation .certbadge-tw__level::before { content: "Foundation"; }
.certbadge-tw--professional .certbadge-tw__level::before { content: "Professional"; }
.certbadge-tw--expert .certbadge-tw__level::before { content: "Expert"; }
</style>

react

export function CertificationBadge({
  name = "Cloud Architect",
  issuer = "Clydeford Academy",
  level = "professional",
  color = "#E8A020",
  verified = true,
}) {
  const levelText = { foundation: "Foundation", professional: "Professional", expert: "Expert" }[level] ?? "Foundation";
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10, font: "14px/1.4 system-ui, sans-serif", color: "#241430", maxWidth: 300 }}>
      <svg style={{ width: 40, height: 40, flex: "none", filter: level === "expert" ? `drop-shadow(0 0 3px ${color})` : "none" }} viewBox="0 0 32 32" aria-hidden="true">
        <path d="M16 2l3.5 3.6 5-1 .6 5 4.9 1.7-2.7 4.3 2.7 4.3-4.9 1.7-.6 5-5-1L16 30l-3.5-3.6-5 1-.6-5-4.9-1.7 2.7-4.3-2.7-4.3 4.9-1.7.6-5 5 1z" fill={color} />
        <text x="16" y="20" textAnchor="middle" fontSize="10" fontWeight="700" fill="#241430">{verified ? "✓" : ""}</text>
      </svg>
      <div>
        <strong style={{ display: "block" }}>{name}</strong>
        <span style={{ display: "block", fontSize: 12, opacity: 0.75 }}>{issuer} · {levelText}</span>
      </div>
    </div>
  );
}