One Web Component <olympic-medal-ranking>

displays the whole Olympic Medal Ranking

Documentation and code available on GitHub

Also see: Medal calculations per capita

<olympic-medal-ranking></olympic-medal-ranking>


<olympic-medal-ranking sort="total">Total</olympic-medal-ranking>

<olympic-medal-ranking sort="gold">Gold</olympic-medal-ranking>

<olympic-medal-ranking sort="silver">Silver</olympic-medal-ranking>

<olympic-medal-ranking sort="bronze">Bronze</olympic-medal-ranking>

Total Gold Silver Bronze

<olympic-medal-ranking total="5" lang="FRA"></olympic-medal-ranking>

IOC language codes

Classement des Médailles Olympiques de Paris 2024

<olympic-medal-ranking flag="EU" filter="EU"></olympic-medal-ranking>

European Union
Medal Ranking

<olympic-medal-ranking total="all"></olympic-medal-ranking>


FlagMeister cheated a bit

It is impossible to display all detailed flags with a 30KB Web Component.

<olympic-medal-ranking total="all" filter="DMA,DOM,ECU,EGY,FIJ,GUA,KAZ,KAZ,MDA,MEX,MGL,UGA"></olympic-medal-ranking>

But Flagmeister can be instructed to load those details
Causing additional SVG downloads ofcourse.

<olympic-medal-ranking detailflags total="all" filter="DMA,DOM,ECU,EGY,FIJ,GUA,KAZ,KAZ,MDA,MEX,MGL,UGA"></olympic-medal-ranking>



<olympic-medal-ranking> minified GZIP Filesize is small

And could be placed as inline code inside the <head> of your HTML page