The action foot
The row of actions, and under it the line that answers the question a person asks with their finger already on the button: what happens if I do this, and what happens if I do not. It is where this product does most of its work on anxiety, and it is one line of text.
Anatomy
Two parts, and the second is the point. A row of buttons with nothing under it is just an action row; this pattern exists where the product answers before it is asked. Drawn by design/system/patterns/act-foot.css and the components it arranges, through the same ../system/index.css a product screen loads.
Pays for itself with the first subscription you drop. Cancel any time, from this screen.
.act-footon the container that holds both, which on 16 of the 17 pages is the screen itself. No wrapper is added: the class marks a container that already exists.actionsone filled action, and a plain one beside it where there is a second way. The row keeps its own margins everywhere else in the product; inside the foot its bottom margin is zero and the gap belongs to the pattern.muteda consequence: "Nothing about your plan or your data changed". Thirteen pages.quieta real exit rather than a consequence: "Do this later", "I will connect a bank later". Four pages, and it is a link rather than a sentencemargin-top16px, and it is the one value this pattern owns. Read the technical half below: it was two numbers at two viewports before this pattern existed
Variants
One shape, two kinds of line, and the difference is not visual. Both render at the same 16px under the row. What differs is what the sentence does, and the two are never interchangeable: a consequence explains, an exit offers. The system has two atoms for this and the pattern reads whichever the screen puts there.
| The line Set by what the screen has to say, not by how it should look |
Selector | Where it stands |
|---|---|---|
| A consequence, and it is a sentence | .act-foot > .actions + .muted | Thirteen pages. "You can come back to this from any Pro feature. Nothing about your subscriptions or your data changed" |
Nothing about your plan or your data changed. If it keeps happening, tell us and we will look at it. | ||
| An exit, and it is a link | .act-foot > .actions + .quiet | Four pages. "Do this later" under the one action a person is not obliged to take. The voice rule behind it is "a real exit is always present", and the quiet line is how the product keeps it without weakening the main action |
| A third line, or a line above the row | - | Not in the product and not invented here. Two sentences under a button is a screen explaining itself twice; a line above the row is the announcement's job, and that composition is the interruption |
When to use it
Wherever the action has a consequence a person is entitled to know before they take it. In ia/docs/flows.md that is every commitment point of every flow: the bank connection in Flow A, the paywall in Flow C and D, the sign-in link in Flow E. The line is not decoration and it is not fine print. On the paywall it says the price pays for itself and that cancelling is on the same screen; on an error it says what did not change.
It is what keeps a filled button from feeling like a trap. The product's audience is people who avoid finance apps, and the reason they avoid them is that a button might do something they cannot see. One sentence under the row costs nothing and removes exactly that.
It stacks with the interruption and is not part of it. Ten of its pages are also interruptions and six are not: Connect bank, Sign in, History and trends, Upgrade and Connections all carry a foot on a screen that is working normally. Two classes on one container is the honest way to write that, because they are two compositions and either can appear without the other.
The rule, and the anti-rule
Read-only. Tendd cannot move your money, and you can disconnect at any time.
The sentence answers the button above it and nothing else. A person reading it is deciding, and this is the fact they are deciding on.
Tendd is a calm way to see everything you pay for every month, without becoming a finance person.
True, and in the wrong place. That belongs to the intro at the top of the screen, where a text block holds it. Under the row it reads as small print that says nothing, and the next person writing a screen copies the shape and puts marketing there.
We will stop counting it in your monthly total from the next charge date.
The second way out is a plain button. The foot then reads as one decision with a way past it, which is what it is.
We will stop counting it in your monthly total from the next charge date.
Two filled buttons 55px apart, and the line under them can no longer be about either. This is rule U1 and it is the one the product has actually broken: stage 07 measured exactly this pair on a form screen and carried it, and cancel-guide carries two in one column today, in the grey. Fixing it is the rollout's job and it is a line in docs/backlog.md, not a widening of the rule.
Limits
U1, composition. One filled action per zone, and the foot is one zone. U7, context. No action foot on a wait: a screen with no control has nothing for the line to be about. Full table with sources: Usage rules.
Where it stands
Seventeen pages across eight screens in the grey product. Six are in colour and carry the class today. Ten of the seventeen also carry the interruption; the other seven are ordinary working screens, which is why this is a pattern of its own rather than the tail of that one.
| Screen | Pages | The line | In colour |
|---|---|---|---|
| History and trends | history-trends, history-trends-empty, history-trends-error | consequence | yes |
| Upgrade | upgrade, upgrade-payment-failed | consequence | yes |
| Guided reveal | guided-reveal-empty | exit | yes |
| Connect bank | connect-bank, connect-bank-cancelled, connect-bank-error | exit, and a consequence on the base page | grey, stage 12 |
| Sign in | sign-in, sign-in-expired, sign-in-sent | exit | grey, stage 12 |
| Cancel guide | cancel-guide, cancel-guide-blocked, cancel-guide-no-guide | consequence | grey, stage 12 |
| Share snapshot | share-snapshot-error | consequence | grey, stage 12 |
| Connections | connections | consequence | grey, stage 12 |
The technical half
| Declares | Value | Where it came from |
|---|---|---|
| the gap under the row | var(--space-16) | a named decision at stage 09, taken because the extraction found the gap was not one number. See below |
| colour, type, radius, elevation | none | a pattern arranges components and reads tokens |
The value this pattern owns is the one it found broken. Before it existed, the gap under the row was two margins meeting: 16px below .actions from action-row.css, and, for a muted line standing directly on a screen, 16px above it from muted-line.css. Under 900 the screen is normal flow, adjacent margins collapse, and the pair reads 16. At 900 and past it the screen becomes a flex column, nothing collapses, and the same pair reads 32. One composition at two distances, decided by a layout mode rather than by anyone, and invisible unless both ends are measured. The quiet variant read 16 at both widths because it carries no top margin, so the two lines of one foot disagreed with each other as well.
It is 16 now at every width, declared once here, with the row's bottom margin zeroed inside the foot so there is one number and one home. Four pages lose 16px at 1280 and nothing else in the product moves, at either width: history-trends, history-trends-empty, history-trends-error and upgrade-payment-failed. On history-trends the 16px does not leave the page, because that screen is already taller than its pane and the chart is the shrinkable item in the column: the plot takes the space back and the blocks under it sit 16px lower. The whole account, with the element counts, is on the proof.
<main class="screen act-foot">
...
<div class="actions">
<a class="btn primary" href="upgrade.html">Start Tendd Pro</a>
<a class="btn" href="home.html">Maybe later</a>
</div>
<p class="muted">Pays for itself with the first subscription you drop.</p>
</main>