PresentationList
Une rangée d'affichage : une tête, un titre, une description. Rien n'y est cliquable, c'est le pendant statique de ClickableList.
Utilisation
import { PresentationList } from "@monstera/ui"Réponse immédiate
Vous connaissez le résultat de votre demande en quelques secondes.
Complétez votre dossier
Il vous reste deux justificatifs à déposer.
Variantes
La variante icon pose une icône de 24 px en tête, la variante number pose un chiffre dans un carré plein de la même taille. Le titre est en SemiBold, la description en Regular, et les deux sont facultatifs.
Estimez votre mensualité
Choisissez le montant et la durée qui vous conviennent.
Remplissez votre demande
Une dizaine de minutes suffisent, tout se fait en ligne.
Recevez votre réponse
Elle vous parvient par courriel dès l’étude terminée.
Empilement
ListContainer empile les rangées avec un écart de 16 px. La tête reste calée en haut quand la description passe sur plusieurs lignes.
Accessibilité
Posées dans un ListContainer, les rangées forment une liste : un lecteur d'écran annonce le nombre d'éléments, puis la position de chacun. Chaque rangée est enveloppée dans un élément de liste sans boîte (display: contents), la mise en page ne bouge pas. Des rangées posées hors d'un ListContainer ne sont pas annoncées comme une liste.
API
Prop
Type
VisuallyHiddenNon officiel
Le texte lu par les technologies d'assistance et jamais peint : l'outil des messages de statut invisibles, et ce qui porte le sens des composants dont le visuel est fragmenté.
BalanceCard
Le comparatif de deux mensualités, l'actuelle et la nouvelle, séparées par une pastille chevron.