WEBSITEWorking
#124 Pricing page: settle the wording
Now: writing the plan comparison table
One agent's job at a glance: its state in words, how far along it is, and the one thing to do next.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
Working: the spinner and the info badge, the meter in the series color, and what the agent does now.
Waiting on you
Waiting on you: the warning edge, the question in a warning box, and one brand button to answer it.
WEBSITEAsks you
#124 Pricing page: settle the wording
Which wording should the pricing page use: “from $9” or “$9 and up”?
Queued
Queued: the gray badge, no meter yet, and its place in line.
WEBSITEQueued
#125 Pricing page: add the yearly plans
Starts when a place frees up · 2nd in line
Finished
Finished: the meter full in the success color, and what the agent left behind.
WEBSITEFinished
#121 Contact form: check every field
Pull Request #79 opened · 4 checks passed
Failed
Failed: why it stopped, in a danger box, and a button to try again.
WEBSITEFailed
#122 Footer: move the links into columns
Stopped: 3 checks failed
In a grid
Cards side by side, as many as the room allows; the one that needs you is the only one with an edge.
SHOPAsks you
#58 Checkout: name the delivery options
Should “Express” promise next-day delivery?
BLOGWorking
#31 Archive: add the year pages
Now: listing the posts of each year
BLOGQueued
#32 Archive: link each year from the footer
Starts when #31 is done
Built from
Guidelines
Purpose
Shows one agent's job on a board or an overview: which project it works in, the task, how long it has run and what it has cost, how far along it is, and the action that fits its state. Five states: working, waiting on you, queued, finished and failed.
When to use
- On a board or an overview of agents at work, where a reader scans for the one that needs them.
When not to use
- For a long list of jobs. Use a table, with the state in a column.
- For one agent's whole story. Use a page or a side panel, with the card's details at its top.
Usage rules
Do
- Ask the question in the note, in full, so the reader can answer without opening the job.
- Give each state one main action.
Don't
- Show that an agent waits on you by the edge alone.
- Put more than two buttons in the footer.
Anatomy
- The card, the Card component in its compact layout, its slot body holding the rest. Waiting on you adds the card's warning edge.
- The top line: the project in the small code style, then the state as a small badge; while working, a small spinner before it.
- The title, the task, in the small body style's medium weight.
- The details line: a clock icon and the time, the step and the cost, apart by quiet dots.
- The meter, the Meter component, while the agent works (the series color) and once it has finished (the success color).
- The note: what the agent does now, or why it waits. A question to you sits in a warning box, a failure in a danger box.
- The footer, under a quiet line: the kind of job, then its buttons.
Behavior
The page sets the state: the badge and its words, the edge, the meter's tone, the note's box and the buttons. The block takes no focus of its own; its buttons do. When the room runs out, the job's words in the footer wrap and the buttons keep their size.
Accessibility
What it does for you
- The card is an article named by its title.
- The state is said in words in the badge, never only by the edge or the meter's color.
- While working, the spinner is hidden from assistive technology, since the badge already says "Working".
- The meter is named by the title, its value in words, such as "60% done".
- Each button is described by the title, so "Stop" on a board of cards says which agent it stops.
What you must do
- Make the title a heading at the level the page needs, and give it an id of its own that the card, the meter and every button point at.
- Announce a change of state from the page: the card does not.
How to test
- With a screen reader, move through a board: each card is read as an article by its title, its state in words, and "Stop" says which agent it stops.
- In a forced-color mode, the state still reads in the badge's words.
- With text at 200% and the page 320 pixels wide, the job's words in the footer wrap and the buttons keep their size.
Keyboard
| Key | What it does |
|---|---|
| Tab | Moves focus to each of the card's buttons in turn. The card itself takes no focus. |
| EnterorSpace | Presses the focused button. |
Source
The agent card's own layout, its classes under the site- prefix. The components inside it are drawn by the design system's stylesheet.
Stylesheet
/* site-agent-card — Agent card, a block: one agent's job at a glance, its state in words, how far along it is
* and what to do next. Copy it into your project and rename site- to your project's own prefix. The frame is the
* Card component in its compact layout, the waiting state with its warning edge; the badge, spinner, meter and
* buttons are the system's own. The block draws only the lines inside the card's body and the footer's line. */
.site-agent-card__top,
.site-agent-card__meta,
.site-agent-card__footer {
display: flex;
align-items: center;
gap: var(--smbk-space-inline-sm);
}
.site-agent-card__eyebrow {
flex: 1 1 auto;
min-width: 0;
color: var(--smbk-color-text-subtle);
font-family: var(--smbk-typography-code-sm-font-family);
font-size: var(--smbk-typography-code-sm-font-size);
font-weight: var(--smbk-typography-code-sm-font-weight);
line-height: var(--smbk-typography-code-sm-line-height);
letter-spacing: var(--smbk-typography-code-sm-letter-spacing);
}
.site-agent-card__title {
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-agent-card__meta,
.site-agent-card__note,
.site-agent-card__job {
margin: 0;
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-agent-card__meta {
flex-wrap: wrap;
font-variant-numeric: tabular-nums;
}
.site-agent-card__icon {
flex: none;
color: var(--smbk-color-icon-subtle);
}
.site-agent-card__dot {
color: var(--smbk-color-text-subtlest);
}
/* The question or the failure, said in a box of its tone's subtle color. */
.site-agent-card__note--tone-warning,
.site-agent-card__note--tone-danger {
padding: var(--smbk-space-inset-sm);
border-radius: var(--smbk-radius-control-md);
}
.site-agent-card__note--tone-warning {
background: var(--smbk-color-feedback-warning-surface-subtle);
color: var(--smbk-color-feedback-warning-text-on-subtle);
}
.site-agent-card__note--tone-danger {
background: var(--smbk-color-feedback-danger-surface-subtle);
color: var(--smbk-color-feedback-danger-text-on-subtle);
}
/* The footer: a quiet line above it, the same room above and below the line, then the job and its actions. When
the room runs out the job's words wrap; the buttons keep their size. */
.site-agent-card__footer {
padding-block-start: var(--smbk-space-inset-lg);
border-block-start: var(--smbk-border-width-hairline) solid var(--smbk-color-border-subtle);
}
.site-agent-card__job {
flex: 1 1 auto;
min-width: 0;
}
.site-agent-card__footer > :not(.site-agent-card__job) {
flex: none;
}