Catalog · Charts
Bar list
Compares a few values as a list of names, figures and bars, with the native meter element.
Fits best: app — a report or an overview that compares a few sizes, counts or shares
Example
Parcels per route this week.
In cells
The same list with the meter cut into small cells, a bold figure and a caption that carries a bold total and a note: the pattern of the Light card on the home page, which compares the size of three packages. The names, sizes and note here are made up; the figures, the words and the unit are yours to write.
Known issues
None known.
Code
Copy the markup
import "@luz-ds/catalog/components/bar-list.css";<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/bar-list.min.css" integrity="sha384-Xl3NzktxixQWSXVFEmjRxNMgf0ez9vdz5p03hix/CwaM9sMmZZWIxrG1tYeDXVuy" crossorigin="anonymous">A stylesheet of @luz-ds/catalog: link components/bar-list.css after luz.css.
<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:
<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
| Option | Effect |
|---|---|
luz-bar-list | Small cells instead of a continuous bar, as in the second example: the one the home page uses for sizes |
luz-bar-list | 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.
Contrast and focus are in the Design tab.
Design
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) or for a trend over time. Keep a table when exact values matter most.
Do and don't
max and its figure in text: the length compares, the number says how much.Writing the content
Name the unit and the period in the caption (“Parcels per route, this week”), keep each name short, and write the figure with its unit.
Contrast and focus
The fill is a chart colour; the track is quieter on purpose, because the figure carries the value.
| Part | Colour on background | Light | Dark | High contrast | Needs |
|---|---|---|---|---|---|
Bar against its track | --luz-chart-1 on --luz-chart-track | 3.4:1 | 3.8:1 | 6.8:1 | 2:1 |
Bar on the page | --luz-chart-1 on --luz-surface-page | 5.6:1 | 7.7:1 | 14.1:1 | 3:1 |
Bar on a card | --luz-chart-1 on --luz-surface | 5.9:1 | 7.2:1 | 14.1:1 | 3:1 |
Name | --luz-text-secondary on --luz-surface-page | 6.2:1 | 7.5:1 | 19.3:1 | 4.5:1 |
Figure of a row at 0 | --luz-brand-primary on --luz-surface-page | 5.6:1 | 7.7:1 | 14.1:1 | 4.5:1 |
Measured from the token values of each mode, rounded down. Needs is the WCAG 2.2 AA minimum: 4.5:1 for text, 3:1 for focus rings, borders and icons.
- Focus: nothing takes it.
- Not colour alone: every bar has its figure in text.
Tokens it uses
The 12 tokens that components/bar-list.css reads, by family. Each family links to its page, with the values in every mode. In Figma they are variables with the same names: see Tokens in Figma.
- Typography
--luz-font-mono,--luz-font-sans,--luz-text-sm,--luz-text-xs- Radius
--luz-radius-sm- Spacing and sizing
--luz-space-3xs,--luz-space-sm,--luz-space-xs
Keyboard and ARIA are in the Code tab.