Leaderboard
A ranked list, top sellers, customers, contributors, with medals for the top three and a trend.
Top sellers, Q3
- Maren RichterBerlin€184,200+12%
- Jonas OlsenOslo€162,900+4%
- Ana PopescuCluj€151,300+22%
- Lea KimVienna€98,400+2%
<ol class="mn-leaderboard" style="max-width:26rem">
<li class="mn-leader"><span class="mn-avatar mn-avatar-sm" aria-hidden="true">MR</span><span class="mn-leader-name"><strong>Maren Richter</strong><small>Berlin</small></span><span class="mn-leader-value">€184,200<small>+12%</small></span></li>
<li class="mn-leader"><span class="mn-avatar mn-avatar-sm" aria-hidden="true">JO</span><span class="mn-leader-name"><strong>Jonas Olsen</strong><small>Oslo</small></span><span class="mn-leader-value">€162,900<small>+4%</small></span></li>
<li class="mn-leader"><span class="mn-avatar mn-avatar-sm" aria-hidden="true">AP</span><span class="mn-leader-name"><strong>Ana Popescu</strong><small>Cluj</small></span><span class="mn-leader-value">€151,300<small>+22%</small></span></li>
<li class="mn-leader"><span class="mn-avatar mn-avatar-sm" aria-hidden="true">LK</span><span class="mn-leader-name"><strong>Lea Kim</strong><small>Vienna</small></span><span class="mn-leader-value">€98,400<small>+2%</small></span></li>
</ol>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/leaderboard.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-leaderboard | The ranking (<ol>); numbers come from a CSS counter. |
| mn-leader | A row: avatar, mn-leader-name (name and detail), mn-leader-value (value and change). |
Accessibility
- An ordered list conveys rank; the medal colours are decoration.
- Write the change as text with its direction (“+12%”).