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.
Utilisation
import { CreditCard } from "@monstera/ui"Produits et états
Origin en turquoise, Pure en navy, chacune avec la fin de son numéro. Verrouillée, la carte s'estompe à 40 %, comme dans Figma, sous le cadenas.
Une image, pas un texte
La carte est rendue en role="img" avec label pour nom accessible : c'est une image composée, pas un bloc à parcourir. La face est un visuel Figma aplati par produit, servi depuis /monstera/credit-cards/ ; le kit ne redessine pas le logo.
Un numéro qui s'écarte de Figma
quatreDerniers pose sur la face la fin du numéro, ses trois premiers groupes masqués : « •••• •••• •••• 7890 ». La bibliothèque Figma ne le dessine pas sur Origin et Pure, seulement sur la carte IKEA (« •• 3365 », 12180:6208). C'est une proposition du kit, à valider par l'équipe Monstera.
La squad Carte demande les 4 derniers chiffres sur le visuel, dans tous les états : c'est par eux qu'un client distingue ses cartes, et la nouvelle de celle qu'elle remplace. Le numéro masqué dit ce que sont ces chiffres sans étiquette, là où quatre chiffres seuls passeraient pour un code. Il reprend la grammaire de la carte IKEA (points de 4 px, Figtree Medium aux chiffres tabulaires) à la taille de son numéro centré, prend l'encre des marques de la carte, et s'estompe avec elle. Son milieu se pose 32 px sous celui de la carte : il ne touche jamais le cadenas ni le glyphe de l'opposition.
Verrouillée ou en opposition, pas les deux
verrouillee et enOpposition produisent le même estompage, sous un glyphe différent : cadenas pour l'une, signe d'opposition pour l'autre. Ils s'excluent, une carte en opposition n'ayant plus d'état à basculer. Le dos ne s'affiche que si verso est fourni, et retournee le montre par une transition réversible en plein vol.
Accessibilité
La face de la carte est une image nommée par label, complété de la fin de son numéro puis de son état : « Carte Origin se terminant par 7890, verrouillée ». Le numéro dessiné sur la face n'est pas lu une seconde fois. Le dos se parcourt : retournée, la carte expose le contenu passé dans verso (numéro, date, CVV, boutons « Copier ») sous le nom « Carte Origin, verso », et sa face est cachée aux lecteurs d'écran. De face, le dos est inerte : ses boutons, invisibles, ne prennent pas le focus.
API
Prop
Type