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.
infoSpécimen de référence. Le contenu des exemples est celui des fiches Pelote, en français.
Conteneur sc de rayon 28, padding 20/22, sans ombre ni bordure, qui regroupe un sujet.
Ce que fournit le consommateur
Un en-tête card-head (titre 20px + action optionnelle), le contenu.
Règles
La carte se détache par la teinte seule. Pas d'ombre, pas de bordure, pas de barre colorée sur le côté.
Pas de carte dans une carte pour la hiérarchie : à l'intérieur, utiliser des lignes .row séparées par sch. Seule exception, la carte de sujet : ses tuiles de contenu sont toutes au même niveau et au même gabarit, jamais un conteneur dans un conteneur.
Une action d'en-tête maximum (tonal ou texte).
Pas de vide inutile : un élément court (chip, statut, action, valeur) ne prend jamais une ligne à lui seul s'il tient à côté du titre ou d'un autre élément. Regrouper les métadonnées sur une ligne (« Port 443 · 3 j »), mettre le statut et l'action dans l'en-tête.
Hauteur au contenu ; dans une grille, des cartes de même rôle ont la même structure, sans case vide étirée.
Carte de sujet : le sujet est nommé par une seule chip dans card-head, jamais par un titre de section dans le corps. Une forme décorative au plus, dans le coin opposé et à faible opacité, pour donner le ton sans concurrencer le contenu.
Chips dans une carte : elles vivent dans l'en-tête (sujet, statut, nombre d'éléments). Le compteur (+4) appartient à la tuile « tout voir », pas à une chip isolée dans le corps, et aucune chip ne flotte seule sur sa ligne.
Calage vertical au start et au end : le premier bloc touche le haut du padding, le dernier touche le bas (display:flex, flex-direction:column et justify-content:space-between, ou margin-block-start:auto sur le dernier bloc). Jamais de centrage vertical : le contenu flotte, laisse un vide au-dessus du titre et les marges du haut et du bas ne sont plus symétriques.
Aucun bord coupé : un contrôle (segmented, chip, bouton, champ) ne dépasse jamais la boîte de contenu d'une carte. Il se réduit, partage la largeur (flex:1) ou passe à la ligne ; le rayon de la carte ne doit jamais servir à rogner un élément.
Espacements homogènes : un seul pas par carte. Le même écart sépare tous les blocs de même niveau (gap:12px), le padding 20/22 reste identique sur les quatre côtés, et on ne « rééquilibre » jamais à l'œil avec un margin-top plus grand sur un bloc court. Deux cartes de même rôle doivent avoir le même rythme, sinon elles ne s'alignent plus dans une grille.