Network · line-badge
Line badge
The division code in its line color, like a metro line bullet. The code is always visible; screen readers hear the full division name.
The eight lines
Condensed Archivo (wdth 75), 12px caps, a small radius rather than a capsule, so a code doesn't look like a button.
Preview
BPHBadan Pengurus HarianDANUSDana UsahaDEPOLDepartemen OlahragaHUMASHubungan MasyarakatITInformasi TeknologiMEDKREFMedia KreatifPKAPerkembangan Karir dan AkademikSOSBUDSosial Budaya
Show codeHide code
<LineBadge code="humas" />Interchange
Two or more divisions on one event render as an interchange: badges side by side, joined by a short ink connector.
Preview
SOSBUDSosial BudayaMEDKREFMedia KreatifPKAPerkembangan Karir dan AkademikHUMASHubungan MasyarakatITInformasi Teknologi
Show codeHide code
<LineBadges codes={["sosbud", "medkref"]} />Codes
The long codes are canonical for display. The old codebase's oprec codes (DU, DO, HM, MK, SB) map through toLineCode().
| Badge | data-line | Division |
|---|---|---|
| BPHBadan Pengurus Harian | bph | Badan Pengurus Harian |
| DANUSDana Usaha | danus | Dana Usaha |
| DEPOLDepartemen Olahraga | depol | Departemen Olahraga |
| HUMASHubungan Masyarakat | humas | Hubungan Masyarakat |
| ITInformasi Teknologi | it | Informasi Teknologi |
| MEDKREFMedia Kreatif | medkref | Media Kreatif |
| PKAPerkembangan Karir dan Akademik | pka | Perkembangan Karir dan Akademik |
| SOSBUDSosial Budaya | sosbud | Sosial Budaya |
Rules
- It appears on event rows and station pages, committee section headers, member cards (as a station marker), article kickers and the oprec “Accepted” result.
- Its accessible name is the full Indonesian division name, marked
lang="id": a proper name, never translated (ADR 0007). The visible code is wrapped in<abbr title>for pointer users.
Don’t
A line badge used as a button, or a division color used for text.
Do
To filter by division, put the badge inside a filter chip.