Mise en exergue
نص مُبرزHighlight
src/dsm/components/highlight.tsxImport
import { Highlight } from "@/dsm/components/highlight";Exemples
Par défaut
Taille `md`, utilisée dans un paragraphe isolé.
Depuis 2025, 68 % des démarches administratives les plus demandées peuvent être réalisées entièrement en ligne, sans aucun déplacement en guichet.
Tailles
Comparaison des tailles `sm`, `md` et `lg`.
La demande de passeport biométrique nécessite un rendez-vous préalable dans 6 régions sur 12.
Le numéro d'identification national (CIN) reste inchangé à vie, y compris en cas de renouvellement ou de duplicata de la carte.
La dématérialisation des marchés publics a permis de réduire de 30 % le délai moyen de traitement des appels d'offres depuis 2024.
Dans un article
Insérée au sein d'un contenu `dsm-prose`.
La dématérialisation de l'état civil
Depuis le lancement du registre national de l'état civil, les officiers d'état civil des 1 538 communes du Royaume saisissent directement les actes dans une base unique, interconnectée avec les ministères de la Justice et de l'Intérieur.
Un acte de naissance demandé en ligne est aujourd'hui délivré en moyenne en 48 heures, contre 8 jours ouvrés en 2022.
Cette accélération bénéficie en priorité aux Marocains résidant à l'étranger, qui représentaient près d'un tiers des demandes déposées sur watiqa.ma au premier semestre 2026.
Usage
Quand l'utiliser
- Utilisez la mise en exergue pour un paragraphe clé au sein d'un article ou d'une fiche pratique en `dsm-prose`.
- Réservez-la à un seul paragraphe par section : sa force vient de sa rareté.
Quand ne pas l'utiliser
- N'utilisez pas la mise en exergue pour un message d'état (succès, erreur, avertissement) : préférez `Alert`.
- N'utilisez pas la mise en exergue pour un simple témoignage attribué : préférez `Quote`.
Accessibilité & langues
Accessibilité
- Le composant est un simple `<p>` : il ne modifie pas l'ordre de lecture ni la structure des titres.
- Le sens ne repose pas uniquement sur la couleur du filet : le paragraphe reste lisible en niveaux de gris.
RTL & multilingue
- Le filet utilise `border-s`, donc toujours du côté du début de lecture — à droite en arabe, sans classe additionnelle.
Propriétés
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| size | "sm" | "md" | "lg" | md | Taille du texte et du padding de départ. |
| children* | ReactNode | — | Texte du paragraphe mis en exergue. |