InfoCard
La coque des cartes métier. Elle empile et rogne, le contenu vient de InfoCardBanner, InfoCardHeader, InfoCardAmount, InfoCardSection et InfoCardFooter, dans l'ordre qu'on choisit.
Utilisation
import { InfoCard, InfoCardBanner, InfoCardHeader, InfoCardAmount, InfoCardSection, InfoCardFooter } from "@monstera/ui"Carte de crédit
Attention au sens de progress sur InfoCardAmount : le montant affiché est le disponible, la jauge attend la part utilisée. Pour 3 411,73 € restants sur 5 000 €, c'est 0.32 et non 0.68.
Bloc d'actions
InfoCardSection accueille ce que le kit sait déjà rendre. attached supprime sa marge haute quand le bloc du dessus porte déjà la sienne, sinon les deux s'additionnent, et gap sm resserre une pile de boutons.
Compte bancaire
Les mêmes morceaux dans un autre ordre donnent une autre maquette : ici le solde tient lieu de titre d'entête. Le pied n'affiche son chevron que s'il est cliquable, par href ou par onClick.
Taille lg
size lg donne la version web des parties : logo de 40 px, montant en 24, sous-titres en 16, pied sur une seule ligne. La pile de boutons en gap sm se pose côte à côte, chaque bouton à sa largeur.
Accessibilité
Le titre de la carte est un vrai titre, de niveau 3 par défaut : ces cartes se posent sous un titre de section. headingLevel le règle (de 2 à 6).
API
InfoCard
Prop
Type
InfoCardBanner
Prop
Type
InfoCardHeader
Prop
Type
InfoCardAmount
Prop
Type
InfoCardSection
Prop
Type
InfoCardFooter
Prop
Type