Template:UI/kpi card

From Miniscope
Revision as of 13:08, 2 May 2026 by DAharoni (talk | contribs) (SchemaSync: sync from repo @ cef7b4698b6a7bf05768b7fe97b5c01c55c4b039)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Renders one KPI card for a dashboard summary strip — a big number on top, a small uppercased label underneath, in a subtly-bordered card.

Pass link to make the entire card a clickable link to a wiki page; without link the card is a static display element.

All styling lives in MediaWiki:Common.css under .wiki-kpi-card (and the .wiki-kpi-card-link modifier when linkable, plus its .wiki-kpi-card-value / .wiki-kpi-card-label children) — change there to update every KPI card across the wiki. This template is just structure.

Designed to live inside a flexbox container so multiple cards lay out side-by-side and wrap on narrow screens. Wrap your row of cards in:

...
...
   

Parameters:

  • label — short descriptor below the number, rendered uppercase via CSS
  • value — the number/value displayed prominently. Typically a <ul><li>The part "..." of the query was not understood.Results might not be as expected.</li> <!--br--><li>Some subquery has no valid condition.</li></ul> or 0.
  • link — wiki page name. When set, the entire card becomes a clickable wikilink to that page; when omitted the card is a non-interactive <div>. Implemented as <div class="wiki-kpi-card wiki-kpi-card-link">…</div> so MediaWiki produces the anchor (raw <a> isn't on the default HTML allowlist and would render as escaped text).