Results list

Declared results and pending seats. Party identity is carried by the abbreviation, not by the colour.

A declared seat

Kano Central

Declared

APC Candidate One 248,109

PDP Candidate Two 171,442

LP Candidate Three 41,330

Declared by INEC, reported by three trusted outlets.

HTML

<div>
  <div style="display:flex;align-items:baseline;gap:var(--p234-space-4);margin-bottom:var(--p234-space-4)">
    <h3 style="font-family:var(--p234-type-headline-xs-family);font-size:var(--p234-type-headline-xs-size);margin:0">Kano Central</h3>
    <span class="p234-results__status p234-results__status--declared">Declared</span>
  </div>
  <div class="p234-results">
    <div class="p234-results__row">
      <span class="p234-results__party">APC</span>
      <span class="p234-results__name">Candidate One</span>
      <span class="p234-results__votes">248,109</span>
      <span class="p234-results__bar"><span class="p234-results__fill p234-results__fill--lead" style="width:54%"></span></span>
    </div>
    <div class="p234-results__row">
      <span class="p234-results__party">PDP</span>
      <span class="p234-results__name">Candidate Two</span>
      <span class="p234-results__votes">171,442</span>
      <span class="p234-results__bar"><span class="p234-results__fill" style="width:37%"></span></span>
    </div>
    <div class="p234-results__row">
      <span class="p234-results__party">LP</span>
      <span class="p234-results__name">Candidate Three</span>
      <span class="p234-results__votes">41,330</span>
      <span class="p234-results__bar"><span class="p234-results__fill" style="width:9%"></span></span>
    </div>
  </div>
  <p class="p234-chart__source" style="margin-top:var(--p234-space-4)">Declared by INEC, reported by three trusted outlets.</p>
</div>

Still counting

Yobe North

Not declared

— No declaration reported yet

HTML

<div>
  <div style="display:flex;align-items:baseline;gap:var(--p234-space-4);margin-bottom:var(--p234-space-4)">
    <h3 style="font-family:var(--p234-type-headline-xs-family);font-size:var(--p234-type-headline-xs-size);margin:0">Yobe North</h3>
    <span class="p234-results__status p234-results__status--pending">Not declared</span>
  </div>
  <div class="p234-results">
    <div class="p234-results__row">
      <span class="p234-results__party">&mdash;</span>
      <span class="p234-results__name">No declaration reported yet</span>
      <span class="p234-results__votes"></span>
    </div>
  </div>
</div>

Party colour is data, not a token

The party abbreviation carries identity and it is always present. Colour supports it: the leading candidate's bar takes the brand colour, everyone else is muted. Nothing requires the reader to know what a colour means, which matters because several party colours are close together and the system cannot guarantee separation for values it does not own.

Declared means declared

"Declared" and "Not declared" are the only two states, and which one a row shows follows a written rule about who counts as a trusted outlet and how many have to agree. That rule is data, held with the results, not a judgement made in the template. The badge shows a status; it never implies a winner.

Rules

Sort by votes, highest first.
Keep the numbers tabular so columns line up across seats.
Say who declared it and who reported it, under the list.
Show a pending seat as pending, with no bars at all.

Do not show a percentage without the vote count.
Do not call a lead a win.
Do not hide candidates below a threshold. A short tail is part of the result.

Tokens this component reads

--p234-color-ink--p234-color-ink-muted--p234-color-brand--p234-color-rule--p234-color-rule-strong--p234-color-success--p234-color-paper-sunk--p234-type-ui-*--p234-type-data-*--p234-radius-pill--p234-border-hairline--p234-border-thick