# Bar list

Compares a few values as a list of names, figures and bars, with the native meter element.

### Known issues
None known.

### Copy the markup
A stylesheet of `@luz-ds/catalog`: link `components/bar-list.css` after `luz.css`.

Bar list markup
```html
<figure class="luz-bar-list">
  <ul class="luz-bar-list__rows">
    <li class="luz-bar-list__row">
      <span class="luz-bar-list__name">Sevilla to Madrid</span>
      <span class="luz-bar-list__figure">1,204</span>
      <meter class="luz-bar-list__meter" max="1500" value="1204" aria-hidden="true">1,204 of 1,500</meter>
    </li>
  </ul>
  <figcaption>Parcels per route, this week</figcaption>
</figure>
```

The cells variant, as the home page uses it for sizes:

Bar list in cells markup
```html
<figure class="luz-bar-list luz-bar-list--cells">
  <ul class="luz-bar-list__rows" aria-label="Pages by size">
    <li class="luz-bar-list__row">
      <span class="luz-bar-list__name">Home</span>
      <span class="luz-bar-list__figure"><strong>42 KB</strong></span>
      <meter class="luz-bar-list__meter" min="0" max="42" value="42" aria-hidden="true">42 KB</meter>
    </li>
  </ul>
  <figcaption class="u-text-muted"><strong>84 KB</strong> in all.</figcaption>
</figure>
```

### Variants and options
- `luz-bar-list--cells`: Small cells instead of a continuous bar, as in the second example: the one the home page uses for sizes
- `luz-bar-list__row--zero`: Figure in the brand colour, for a row at 0
- `--luz-bar-list-color`: Another chart colour for a list or a row, such as `var(--luz-chart-2)`
- `--luz-bar-list-row-h`: One row height, to line up lists side by side

### How it works
A list in a `figure`: each row is a name, a figure and a native `meter`, drawn in `--luz-chart-1` with the track in `--luz-chart-track`. Give every row the same `max`. A long name is cut to one line. Unlike `.luz-meter`, the meter has no minimum width, so it never widens a narrow card.

### Without JavaScript
It needs none. Without the stylesheet it reads as a list of names and figures.

### Keyboard and ARIA
Nothing takes focus. The name and the figure are text: hide the bar with `aria-hidden="true"`. A meter left visible needs a name.

### When to use
Use it to compare a few values on one scale: sizes, counts, shares. The cells suit a few short comparisons, such as the size of three files or the share of three sources.

### When not to use
Do not use it for one value (use a [meter](https://nandovejer.github.io/luz/docs/components/meter/)) or for a trend over time. Keep a [table](https://nandovejer.github.io/luz/docs/components/table/) when exact values matter most.