Citation
اقتباسQuote
Stable
src/dsm/components/quote.tsxLa citation met en valeur un témoignage ou une déclaration attribuée — retour d'un usager, propos d'un responsable public — avec un filet de début et un guillemet typographique en vert.
Import
import { Quote } from "@/dsm/components/quote";Exemples
Par défaut
Témoignage d'un usager, taille `md`.
LTR
J'ai renouvelé ma carte grise en 20 minutes depuis mon téléphone, sans faire la queue au bureau. Le SMS de confirmation est arrivé le jour même.
Naïma B.
Usagère, Casablanca
Tailles
Comparaison des tailles `md` et `lg`.
LTR
La télédéclaration m'a évité un aller-retour de deux heures jusqu'au centre des impôts.
Youssef K.
Usager, Tanger
En dix ans d'attente pour un acte de naissance par courrier, jamais je n'aurais imaginé l'obtenir en PDF signé le jour même.
Fatima-Zahra E.
Usagère, Agadir
Avec portrait
Citation d'une responsable publique, avec image et fonction.
LTR
Idarati.ma a permis de réduire de moitié le temps moyen de traitement des démarches les plus demandées en un peu plus d'un an.
Karim A.
Responsable innovation, Agence de Développement du Digital
Usage
Quand l'utiliser
- Utilisez la citation pour un témoignage d'usager, un extrait d'entretien ou une déclaration officielle attribuée.
- Renseignez toujours `author` : une citation sans attribution perd sa valeur de preuve sociale.
- Ajoutez `image` lorsque le portrait de la personne renforce la crédibilité du propos.
Quand ne pas l'utiliser
- N'utilisez pas la citation pour reformuler un contenu factuel non attribué : préférez `Highlight`.
- Évitez les citations de plus de trois phrases : raccourcissez ou renvoyez vers la source complète.
Accessibilité & langues
Accessibilité
- Le contenu utilise les balises sémantiques `<figure>`, `<blockquote>` et `<figcaption>`, reconnues par les lecteurs d'écran comme une citation attribuée.
- Le portrait est décoratif (`alt=""`) : l'identité de l'auteur est portée par le texte de `figcaption`, jamais par l'image seule.
RTL & multilingue
- Le filet de début (`border-s`) et le guillemet s'alignent naturellement à droite en arabe, sans classe spécifique.
Propriétés
Quote
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| children* | ReactNode | — | Texte de la citation. |
| author* | ReactNode | — | Nom de la personne citée. |
| role | ReactNode | — | Fonction ou source, affichée sous le nom. |
| image | string | — | URL d'un portrait rond affiché avant le nom. |
| size | "md" | "lg" | md | Taille du texte de citation. |