Put module rankings on your own page

Four metrics, each on a shared 0-100 scale with the market median marked on every bar. Colour carries the verdict, so a mixed module shows green, grey and amber in one card.

The same four metrics laid along a row, meters and median tick kept. It goes where a 320px card will not: under a spec table, inside a comparison row, across the top of a listing. Below about 880px it folds onto a second row, and only the module name gives way.

One line, four chips, no meters - the verdict travels in the colour of each dot. Enough to tell a strong module from a weak one in passing, short enough to sit in a table row without changing its height.

Four gauges, each filled to where the module sits in the distribution rather than to its raw value, with the market median notched at twelve o'clock. A product page hero rather than a spec footnote.

Set it up here, then copy what is under the preview. That snippet is the whole integration.

The script goes in the <head> once. The element goes wherever a card belongs, once per module. Both plates follow the playground above.

Size

8.5 KB gzipped, one language, all four layouts.

Delivery

Cloudflare edge nearest your visitor, cached an hour so our fixes reach them.

Loading

Carries async, so it never blocks parsing. Head or end of body, both work.

Isolation

Shadow root from all:initial. Your reset cannot reach in, nothing leaks out.

Fonts

None loaded. The card uses the system UI stack.

Timing

Upgrades tags rendered later too: React trees, modals, anything after load.

Requests

One fetch per module, so twenty badges of the same module are one request.

Missing data

Under two of four figures the element shows nothing and takes no space.

A shop's catalogue is not a random draw from the market, so the modules on a European product page start ahead of the database they are measured against.

The badge works without one. A key adds counting, and nothing else.