# Leaderboard · MIAN

A ranked list, top sellers, customers, contributors, with medals for the top three and a trend.

- Id: `leaderboard` · Category: Data display · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/leaderboard
- Use for: ranking, top sellers, leaderboard, top customers.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `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%”).

## Examples

### Top sellers, Q3

```html
<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>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/leaderboard/source