Competency Indicator

Displays competency level.

html

<div class="competency competency--advanced" style="--c:#BFD9F2;">
  <span class="competency__skill">Systems design</span>
  <span class="competency__dots" role="img" aria-label="Systems design: advanced level">
    <span class="competency__dot"></span><span class="competency__dot"></span><span class="competency__dot"></span><span class="competency__dot"></span>
  </span>
  <span class="competency__label"></span>
</div>
<style>
.competency { display: flex; align-items: center; gap: 8px; font: 14px/1.4 system-ui, sans-serif; color: #241430; }
.competency__dots { display: inline-flex; gap: 4px; }
.competency__dot { width: 10px; height: 10px; border-radius: 50%; background: #24143018; }
.competency--novice .competency__dot:nth-child(-n+1) { background: var(--c); }
.competency--intermediate .competency__dot:nth-child(-n+2) { background: var(--c); }
.competency--advanced .competency__dot:nth-child(-n+3) { background: var(--c); }
.competency--expert .competency__dot { background: var(--c); }
.competency__label { font-size: 12px; opacity: .75; }
.competency--novice .competency__label::before { content: "Novice"; }
.competency--intermediate .competency__label::before { content: "Intermediate"; }
.competency--advanced .competency__label::before { content: "Advanced"; }
.competency--expert .competency__label::before { content: "Expert"; }
</style>

tailwind

<div class="competency-tw competency-tw--advanced flex items-center gap-2 font-sans text-[#241430]" style="--c:#BFD9F2;">
  <span>Systems design</span>
  <span class="inline-flex gap-1" role="img" aria-label="Systems design: advanced level">
    <span class="competency-tw__dot w-2.5 h-2.5 rounded-full bg-[#24143018]"></span>
    <span class="competency-tw__dot w-2.5 h-2.5 rounded-full bg-[#24143018]"></span>
    <span class="competency-tw__dot w-2.5 h-2.5 rounded-full bg-[#24143018]"></span>
    <span class="competency-tw__dot w-2.5 h-2.5 rounded-full bg-[#24143018]"></span>
  </span>
  <span class="competency-tw__label text-xs opacity-75"></span>
</div>
<style>
.competency-tw--novice .competency-tw__dot:nth-child(-n+1) { background: var(--c); }
.competency-tw--intermediate .competency-tw__dot:nth-child(-n+2) { background: var(--c); }
.competency-tw--advanced .competency-tw__dot:nth-child(-n+3) { background: var(--c); }
.competency-tw--expert .competency-tw__dot { background: var(--c); }
.competency-tw--novice .competency-tw__label::before { content: "Novice"; }
.competency-tw--intermediate .competency-tw__label::before { content: "Intermediate"; }
.competency-tw--advanced .competency-tw__label::before { content: "Advanced"; }
.competency-tw--expert .competency-tw__label::before { content: "Expert"; }
</style>

react

export function CompetencyIndicator({
  skill = "Systems design",
  level = "advanced",
  color = "#BFD9F2",
  showLabel = true,
}) {
  const filled = { novice: 1, intermediate: 2, advanced: 3, expert: 4 }[level] ?? 1;
  const label = { novice: "Novice", intermediate: "Intermediate", advanced: "Advanced", expert: "Expert" }[level] ?? "Novice";
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8, font: "14px/1.4 system-ui, sans-serif", color: "#241430" }}>
      <span>{skill}</span>
      <span role="img" aria-label={`${skill}: ${level} level`} style={{ display: "inline-flex", gap: 4 }}>
        {[0, 1, 2, 3].map((i) => (
          <span key={i} style={{ width: 10, height: 10, borderRadius: "50%", background: i < filled ? color : "#24143018" }} />
        ))}
      </span>
      {showLabel && <span style={{ fontSize: 12, opacity: 0.75 }}>{label}</span>}
    </div>
  );
}