Une seule chip de sujet dans l'en-tête, une forme décorative au coin, et des tuiles toutes au même gabarit avec un `gap` de 12 px. La tuile « tout voir » est une tuile comme les autres, pas une action de pied de carte.
Variante M3EMême composant, mêmes rôles, autre matière
PlazaWii U / 3DS
Services
nginx · en marche depuis 3 j
Écran du haut : lire
3 jours de série
Panneau bulle avec volume doux. Dessous, le motif 3DS : un écran du haut pour lire, un écran du bas, plus étroit, pour toucher.
ChromeY2K
Services
nginx · running 3 d
Panneau verre dépoli avec barre de titre chromée, comme une fenêtre de lecteur multimédia 2001.
infoReference specimen. Example copy comes from the Pelote specs and is in French.
An sc container with a 28px radius and 20/22px padding, with no shadow or border, grouping one subject.
Rules
The card stands out by tint alone. No shadow, no border, no coloured side bar.
No card inside a card for hierarchy: use .row lines separated by sch instead. The one exception is the subject card, whose content tiles all sit at the same level and share one size, never a container inside a container.
One header action maximum (tonal or text). No useless blank space: group metadata on one line, put status and action in the header.
Height follows content; cards with the same role share the same structure.
Pin the top and the bottom: the first block sits against the top padding and the last against the bottom (a flex column with space-between, or margin-block-start:auto on the last block). Never centre the column, which floats the content, opens a gap above the title and makes the top and bottom margins uneven.
Never clip an edge: a control (segmented, chip, button, field) never overflows a card's content box. It shrinks, shares the width (flex:1) or wraps; the card radius never trims an element.
Subject card: one chip in card-head names the subject, never a section heading in the body. At most one decorative shape, in the opposite corner and at low opacity.
Chips inside a card live in the header (subject, status, item count). The counter (+4) belongs to the show-all tile, not to a chip floating in the body, and no chip sits alone on its line.
Keep spacing uniform: one step per card. The same gap separates blocks of the same level (gap:12px), the 20/22 padding stays identical on all four sides, and a short block is never rebalanced with a larger margin-top. Two cards with the same role must share the same rhythm, or they stop lining up in a grid.