Deployment
Production is healthy. The latest release completed six minutes ago.
A bounded surface for one coherent subject, with three compositions chosen by behavior: simple content, explicit actions, or one navigational destination. Card owns the panel treatment and named regions; Stack and Inline still own the rhythm inside it.
Header and body are one thought, so every type keeps them on ds-stack--sm. The action footer owns space.4 above itself so the controls read as a distinct action area, while the interactive card stays as spare as the simple one.
Production is healthy. The latest release completed six minutes ago.
The minimum useful Card: a semantic header and one body region, paired on space.2; no empty footer and no interaction implied by the surface.
Fourteen of twenty seats are assigned. The plan renews on August 1.
The text pair stays on space.2; the footer itself adds space.4 above its ordinary end-aligned Buttons, so no outer Stack can double the gap.
One native anchor owns the whole surface and its focus/hover states. Header + body are enough — no trailing “Open” row repeats an affordance the surface already carries.
Panel is the default. Raised changes only the surface and low-elevation slot when the card needs real separation from a competing panel; it is independent of layout and interaction.
| Example | Surface | Modifier | Roles | Usage |
|---|---|---|---|---|
Panel card The default grouped surface. | Panel | — | surface.panelborder.subtle | In-flow grouping on canvas or page surfaces |
Raised card Separation when panel would disappear. | Raised | --raised | surface.raisedshadow.low | Physical separation, never importance or hover |
A card groups; behavior decides which composition it takes.
| Verdict | Rule |
|---|---|
| Do | Choose by behavior: simple is header + body, action adds a right-aligned footer, interactive is one anchor root leading to one destination. |
| Do | Keep the text rhythm invariant: header + body use ds-stack--sm; an optional footer owns space.4 above itself. |
| Do | Keep static-card actions explicit in ds-card__footer, aligned right, using ordinary Link or Button components; at most one is primary. |
| Do | Make a whole-card destination an a.ds-card.ds-card--interactive so focus and Enter behavior remain native. |
| Don’t | Add an “Open”, “View”, or arrow footer to an interactive card — it repeats the destination affordance and makes the whole-card link look like a card with a nested action. |
| Don’t | Put nested links, buttons, or form controls inside an interactive card — keep the root static and use explicit actions instead. |
| Don’t | Put a click handler or pointer styling on a div, article, or section to imitate a link. |
| Don’t | Nest cards or use --raised as importance or hover — use structure for hierarchy and elevation only for physical separation. |