Coming card
Spec
Something on its way: suggested targets before a person's first full month (issue 134). A card with a dashed border that says when it comes and what it is, and shows an example of it. Not in Figma yet.
Look
- A dashed 1px border (border), radius xl, on the page's own color: it isn't here yet, so it isn't a raised card. Padding md / lg.
- When it comes first, in the label style and text-secondary ("Coming Dec 1"), then what it is in bold (button style, "Suggested targets"), then a sentence or two (body).
- The example sits in the accent card a suggestion lives in (surface-accent-subtle, a 1px border-accent border, radius lg), with its own heading in the label style and the Badge reading "Example" at the right.
- Notes under the example and under the card (the trial line) are row-secondary in text-secondary.
Rules
- Only for something that will come by itself, on a date the person can be told.
- The example is made up and always says so: the Badge, and amounts that aren't theirs.
- It goes away once the thing arrives (the first suggestions); nothing replaces it.
- Screen readers hear it as a region named after it ("Suggested targets, Coming Dec 1").
Built 1.0.0
The app's own component, version 1.0.0, live. Fake data; nothing is saved.
Changes
- 1.0.0, Oct 16 2026: First version: a card with a dashed border saying when something comes and what it is, holding an example marked "Example". Not in Figma yet. (#134)