.spotlight-card plus a tone class — .perf-green, .perf-blue — gives a full-bleed feature card. .spotlight-img anchors the cut-out portrait.

Best Teacher

Sarah Mitchell

Physics Department

Teacher of the Year 2024

4.9

Rating

98%

Pass Rate

Swap the tone class to re-skin the same structure — .perf-blue alongside .perf-green.

Star Student

Janet Daniel

Grade XII · Science

School Topper 2026

98.4%

Average

1st

Rank

.avatar-group-overlapped tightens a group into a stack. A nested status dot takes .is-away or .is-busy; .bg-gray-500 is the neutral overflow chip.

+9

Proportional bubbles for share-of-total. Size comes from the --bubble-size custom property; colour from any gradient utility.

.map-panel is the placeholder surface for a live map; .map-panel-pin centres a marker on it.

.stat-caption sets a small eyebrow above a card title — use it instead of a second heading level.