CreditDetails
Le montant disponible et son plafond, en un bloc nu à poser dans une Card. Le montant est le nombre proéminent, le plafond une annotation.
Utilisation
import { CreditDetails } from "@monstera/ui"Montant et plafond
Montant en SemiBold 28 px et texte primaire, plafond en SemiBold 14 px et texte tertiaire, précédé d'une barre oblique. Le libellé se lit sous les deux.
Un bloc nu
Le composant n'a ni fond, ni filet, ni padding : sur Figma ce contenu vit dans une Card, aux côtés d'une ligne cliquable. C'est donc la carte qui porte la surface, et CreditDetails qui porte les chiffres.
Une seule phrase pour les lecteurs d'écran
Le conteneur porte un aria-label qui dit tout d'un tenant, « Montant disponible : 3 411,73 € sur 5 000 € », et le contenu visuel est masqué. Les trois props sont des chaînes déjà formatées : le composant n'arrondit pas et ne choisit pas la devise.
Accessibilité
Le bloc se lit en une seule phrase : « Montant disponible : 3 411,73 € sur 5 000,00 € ». Un texte masqué la porte, le visuel (montant, plafond, libellé) est caché aux lecteurs d'écran pour ne pas être lu deux fois, en morceaux.
API
Prop
Type
CreditCard
Le visuel d'une carte bancaire. produit porte l'identité, Origin ou Pure, et les états se superposent au même visuel : dématérialisée, verrouillée, en opposition.
DiscoverCard
La carte d'accroche éditoriale : un visuel plein cadre assombri, un titre en Syncopate, et une action posée sous l'image.