A ranked list of names and figures, each over a bar that shows its share.A block is copied, not installed: take an example's code and the stylesheet at the foot of the page, and rename the site- prefix to your project's own.
Examples
Usage
Four rows, largest first, every bar measured against the same round maximum.
Six rows
Six rows; the figures carry their own unit, here a count of visits.
Built from
Guidelines
Purpose
Ranks a few things by one figure, such as spending by team or visits by page, so a reader sees at once which are largest. Each row is a name and its figure over a bar.
When to use
- For four to eight rows of one figure, largest first.
- In a card or a panel beside a chart.
When not to use
- For figures that change over time. Use a line or bar chart.
- For a share of one whole. Use a donut chart or a meter.
- For many rows or several figures per row. Use a table.
Usage rules
Do
- Sort the rows, largest first.
- Write each figure with its unit.
Don't
- Give the bars different maximums.
- Leave out the figures and show the bars alone.
Anatomy
- The block, an ordered list, its rows a medium stack apart.
- Each row: the name in the small body style and the figure in its medium weight, on one line, over a bar.
- The bar is the Meter component in the series color, carrying the block's bar class beside its own. Its length is the figure's share of the largest value the list allows.
Behavior
The rows come in the order the page gives, largest first. Every bar uses the same maximum, so their lengths compare; give the list a round maximum just above the largest figure, or the largest figure itself, which fills the first bar.
Accessibility
What it does for you
- The list is an ordered list, so a screen reader says how many rows there are, and each row reads as its name and figure, such as "Design, $1,357".
- The bars repeat the figures and are hidden from assistive technology, so nothing is read twice.
- The figure is always written out, so the bar's color and length are never the only sign.
What you must do
- Name the list for what it ranks, such as "Spending by team, this month".
- Keep
role="list"on the list, as the examples do: some screen readers stop reading a list as a list once its numbers are hidden.
How to test
- With a screen reader, the list says how many rows it holds, and each row reads its name and figure once.
- In a forced-color mode, every row still says its figure in words.
Source
The bar list's own layout, its classes under the site- prefix. The components inside it are drawn by the design system's stylesheet.
Stylesheet
/* site-bar-list — Bar list, a block: a ranked list of rows, each a name and its figure over a bar that shows its
* share. Copy it into your project and rename site- to your project's own prefix. The bar is the Meter component
* in the series color, given this block's bar class beside its own; the block draws only the rows. */
.site-bar-list {
display: flex;
flex-direction: column;
gap: var(--smbk-space-stack-md);
margin: 0;
padding: 0;
list-style: none;
}
.site-bar-list__row {
display: flex;
flex-direction: column;
gap: var(--smbk-space-6);
}
.site-bar-list__top {
display: flex;
align-items: baseline;
gap: var(--smbk-space-inline-md);
}
.site-bar-list__label {
flex: 1 1 auto;
min-width: 0;
color: var(--smbk-color-text-default);
font-family: var(--smbk-typography-body-sm-font-family);
font-size: var(--smbk-typography-body-sm-font-size);
font-weight: var(--smbk-typography-body-sm-font-weight);
line-height: var(--smbk-typography-body-sm-line-height);
letter-spacing: var(--smbk-typography-body-sm-letter-spacing);
}
.site-bar-list__figure {
flex: none;
color: var(--smbk-color-text-default);
font-family: var(--smbk-typography-body-sm-medium-font-family);
font-size: var(--smbk-typography-body-sm-medium-font-size);
font-weight: var(--smbk-typography-body-sm-medium-font-weight);
line-height: var(--smbk-typography-body-sm-medium-line-height);
letter-spacing: var(--smbk-typography-body-sm-medium-letter-spacing);
font-variant-numeric: tabular-nums;
}