DiscoverCard
La carte d'accroche éditoriale : un visuel plein cadre assombri, un titre en Syncopate, et une action posée sous l'image.
Utilisation
import { DiscoverCard } from "@monstera/ui"
Réserve
Crédit renouvelable Sofinco
Accroche
Le visuel garde le rapport 328 × 171 de la maquette plutôt qu'une hauteur fixe, et il est recadré pour remplir le cadre. Le voile sombre et le texte blanc ne basculent pas en thème sombre : ils se lisent sur l'image, pas sur le fond de page.
Voyages
Financez votre prochain départ
Zone libre et action
above pose du contenu au-dessus du visuel, c'est le slot de Figma renommé pour ne pas masquer l'attribut HTML natif. action est rendu tel quel sous l'image, et sans lui rien ne s'y affiche.
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
Prop
Type
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.
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.