Card
Le cadre qui regroupe un bloc de contenu : un fond, une entête optionnelle, et ce qu'on lui passe en enfants.
Utilisation
import { Card } from "@monstera/ui"Main
Accent
Neutral
Fonds
Trois fonds. Main est le seul à porter une bordure, accent et neutral se tiennent par leur teinte.
Avec entête
Entête
L'icône et le titre sont deux morceaux indépendants, tous deux facultatifs. Sans aucun des deux, la carte se réduit à son contenu.
Avec padding
Retrait interne
padding pose les 24 px de retrait. Le couper laisse le contenu filer jusqu'aux bords, ce qu'on fait pour les composants qui portent déjà leur propre marge.
La règle des 24 px
Une carte doit toujours donner 24 px de retrait perçu entre son bord et ce qu'elle contient. C'est la seule mesure à tenir, et elle se juge à l'œil, pas dans le code.
padding à true, le cas courant, applique ces 24 px directement. C'est ce qu'on prend pour du texte, des montants, des blocs qui n'ont pas de marge à eux.
padding à false sert aux composants interactifs qui doivent aller jusqu'aux bords : une liste dont chaque rangée se survole sur toute la largeur, un menu. Le retrait ne disparaît pas pour autant, il change de porteur. C'est alors à l'enfant de reposer ses 24 px, et c'est la somme du retrait résiduel de la carte et du retrait interne de l'enfant qui doit retomber sur 24 px.
Le piège est d'oublier cette seconde moitié de la règle et de laisser une liste coller au bord. Le repère simple : quel que soit le réglage, les libellés de deux cartes voisines doivent s'aligner verticalement.
Accessibilité
Le titre d'une carte est un vrai titre, de niveau 2 par défaut : un lecteur d'écran saute ainsi de bloc en bloc. headingLevel le règle (de 2 à 6) selon la place de la carte dans la page : une carte posée sous un titre de section passe en 3. headingLevel={null} déclare un titre qui n'introduit pas une section, une mention légale par exemple : il reste du texte.
Une carte qui empile des rangées (ClickableList, OperationList) prend list : son contenu est annoncé comme une liste, avec le nombre d'éléments et la position de chacun. La mise en page ne bouge pas.
API
Prop
Type
Timeline
La suite des étapes d'un parcours, verticale ou horizontale : ce qui est fait, l'étape en cours, ce qui reste.
ClickableList
Une rangée cliquable qui mène ailleurs : une tête facultative, un libellé, un chevron. C'est un bouton, pas un lien, et il s'étire sur toute la largeur qu'on lui laisse.