Goal row

A list of goals, one in each status, so a reader finds the one at risk.

Ship the new sign-up flow
Due Nov 2 · 3 peopleOn track
Move the docs to the new site
Due Oct 18 · 2 peopleAt risk
Translate the help pages
Finished Oct 9 · 3 peopleDone

On track: the series color, and the status in green words.

Speed up the checkout

Due Nov 15 · 4 peopleOn track

At risk: the warning color, and the status in amber words.

Finish the accessibility audit

Due Oct 21 · 1 personAt risk

Done: the bar full in the success color, and the status in quiet words.

Send invoices by email

Finished Oct 3 · 2 peopleDone

Purpose

Shows where a goal stands in a list of goals: its title and how many of its parts are done, a bar of the same, and a line of details, such as when it is due and who works on it, with its status in words: on track, at risk or done.

When to use

In a list of goals, milestones or projects, where a reader checks which need attention.

When not to use

For a task that is running now. Use a progress bar.
For a single figure. Use a stat.

Usage rules

Do

Say the status in words a reader knows: on track, at risk, done.
Put the date and the people in the details line.

Don't

Show the status by the bar's color alone.
Use a status the bar's tone does not match.

Anatomy

The block, a list item, with the goal list around a set of them.
The top line: the title in the small body style's medium weight and the count in the extra small body style.
The bar, the Meter component, in the series color on track, the warning color at risk and the success color once done.
The bottom line: the details in the extra small body style and the status in the small label style, green on track, amber at risk and quiet once done.

Behavior

The status is the page's to choose: it sets the class on the row, the bar's tone and the words. Done fills the bar.

What it does for you

The bar is a meter named by the goal's title, its value the count in words, such as "18 of 24 tasks done".
The drawn count is hidden from assistive technology, so it is not read twice.
The status is written in words as well as shown by color.

What you must do

Give each goal's title an id of its own for its meter to point at, and write the meter's value in words.
Name the goal list for what it holds, such as "Goals this quarter", and keep role="list" on it, as the examples do: some screen readers stop reading a list as a list once its markers are hidden.

How to test

With a screen reader, each bar is read by its goal's title with its count in words, and the count is read once.
In a forced-color mode, each goal's status still reads in words.

The goal row's own layout, its classes under the site- prefix. The components inside it are drawn by the design system's stylesheet.

Stylesheet

goal-row.css

/* site-goal-row — Goal row, a block: a goal's title and count, a bar of how much is done, and a line of details
 * with its status in words. Copy it into your project and rename site- to your project's own prefix. The bar is
 * the Meter component, its tone following the status; the block draws only the lines around it. */

.site-goal-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-goal-row {
  display: flex;
  flex-direction: column;
  gap: var(--smbk-space-6);
  padding-block: var(--smbk-space-inset-sm);
}

.site-goal-row__top,
.site-goal-row__bottom {
  display: flex;
  align-items: center;
}

.site-goal-row__top {
  gap: var(--smbk-space-inline-md);
}

.site-goal-row__bottom {
  align-items: flex-start;
  gap: var(--smbk-space-inline-sm);
}

.site-goal-row__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  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);
}

.site-goal-row__count,
.site-goal-row__meta {
  color: var(--smbk-color-text-subtle);
  font-family: var(--smbk-typography-body-xs-font-family);
  font-size: var(--smbk-typography-body-xs-font-size);
  font-weight: var(--smbk-typography-body-xs-font-weight);
  line-height: var(--smbk-typography-body-xs-line-height);
  letter-spacing: var(--smbk-typography-body-xs-letter-spacing);
}

.site-goal-row__count {
  flex: none;
  font-variant-numeric: tabular-nums;
}

.site-goal-row__meta {
  flex: 1 1 auto;
  min-width: 0;
}

/* The status in words, so it never rests on the bar's color: green on track, amber at risk, quiet once done. */
.site-goal-row__status {
  flex: none;
  color: var(--smbk-color-text-subtle);
  font-family: var(--smbk-typography-label-sm-font-family);
  font-size: var(--smbk-typography-label-sm-font-size);
  font-weight: var(--smbk-typography-label-sm-font-weight);
  line-height: var(--smbk-typography-label-sm-line-height);
  letter-spacing: var(--smbk-typography-label-sm-letter-spacing);
}

.site-goal-row--status-on-track .site-goal-row__status {
  color: var(--smbk-color-feedback-success-text-on-subtle);
}

.site-goal-row--status-at-risk .site-goal-row__status {
  color: var(--smbk-color-feedback-warning-text-on-subtle);
}

Menu

Examples

Usage

On track

At risk

Done

Built from

Guidelines