PAD Showcase
All tags/Country

Visitors by country

The flag and the name from a two-letter code, with name - the flag is then decoration and the name is what a screen reader says.

1 The data country/visitors.php php
<?php

  // Last month's visits by country, as an analytics export gives them.

  $visitors = [
    [ 'code' => 'NL', 'visits' => 18230 ],
    [ 'code' => 'US', 'visits' => 12904 ],
    [ 'code' => 'DE', 'visits' => 8711  ],
    [ 'code' => 'GB', 'visits' => 6120  ],
    [ 'code' => 'BE', 'visits' => 4385  ],
    [ 'code' => 'JP', 'visits' => 2017  ],
    [ 'code' => 'BR', 'visits' => 1460  ],
    [ 'code' => 'CI', 'visits' => 312   ],
  ];

?>
2 The template country/visitors.pad pad
<ol style="margin:0;padding:0;list-style:none;min-width:20em">
  {visitors}
  <li style="display:flex;justify-content:space-between;gap:24px;padding:8px 0;border-bottom:1px solid rgba(128,128,128,.25);font-size:15px">
    {country $code, name}
    <span style="font-variant-numeric:tabular-nums;opacity:.8">{$visits | number_format}</span>
  </li>
  {/visitors}
</ol>
3 The result rendered on the server
  1. Netherlands 18,230
  2. United States 12,904
  3. Germany 8,711
  4. United Kingdom 6,120
  5. Belgium 4,385
  6. Japan 2,017
  7. Brazil 1,460
  8. Cรดte dโ€™Ivoire 312