Contenu

Encadré

إطار تنبيهيCallout

Stablesrc/dsm/components/callout.tsx
L'encadré met en avant une information éditoriale importante à l'intérieur d'un contenu — une précision utile, une invitation à agir, un rappel réglementaire. Contrairement à l'alerte, il n'exprime pas un état du système mais une mise en avant volontaire de l'auteur.

Import

import { Callout } from "@/dsm/components/callout";

Exemples

Tons

Les cinq tons disponibles : neutre et les quatre teintes de marque.

LTR

Bon à savoir

Les horaires d'été des guichets s'appliquent du 1er juillet au 30 septembre : 8h30 à 15h00, du lundi au vendredi.

Démarche 100 % en ligne

Cette procédure ne nécessite aucun déplacement : dépôt, paiement et retrait du document se font depuis votre espace watiqa.ma.

Date limite

Les déclarations fiscales des revenus professionnels doivent être télétransmises avant le 31 mars 2026, sous peine de majoration.

Nouveau service

L'attestation de résidence est désormais délivrable en ligne pour les 12 communes de la préfecture de Rabat.

Vérifiez l'authenticité

Chaque document délivré porte un QR code de vérification. Ne transmettez jamais vos identifiants à un intermédiaire.

Avec action

Un encadré prolongé par un bouton vers une démarche liée.

LTR

Prenez rendez-vous pour éviter la file d'attente

Les centres CNIE de Casablanca, Rabat et Marrakech proposent désormais la prise de rendez-vous en ligne pour tout dépôt de dossier.

Compact

Version resserrée pour une insertion dans une barre latérale.

LTR

Usage

Quand l'utiliser

  • Utilisez un encadré pour signaler une information « bon à savoir » au fil d'un article ou d'une fiche pratique.
  • Utilisez la prop `action` pour prolonger l'encadré par un bouton, par exemple vers une démarche liée.
  • Choisissez un ton de marque (`vert`, `rouge`, `bleu`, `safran`) pour hiérarchiser visuellement plusieurs encadrés d'une même page.

Quand ne pas l'utiliser

  • N'utilisez pas l'encadré pour un message d'état du système (succès, erreur) : c'est le rôle du composant `Alert`.
  • N'abusez pas des encadrés : plus de deux par page diluent leur pouvoir d'attention.

Accessibilité & langues

Accessibilité

  • L'encadré est un simple conteneur `<div>` : s'il porte une information critique nécessitant une annonce, complétez-le d'un `role="status"` au niveau applicatif.
  • La couleur du ton ne porte jamais seule le sens : accompagnez-la d'un titre explicite ou d'une icône.

RTL & multilingue

  • Le filet de 4 px utilise `border-s`, donc toujours du côté du début de lecture — à droite en arabe, sans classe additionnelle.

Propriétés

Callout
PropriétéTypeDéfautDescription
tone"neutral" | "vert" | "rouge" | "bleu" | "safran"neutralCouleur du filet de 4 px et du fond.
size"default" | "compact"defaultDensité du padding et de la typographie.
titleReactNode—Titre de l'encadré, affiché en gras.
iconReactNode—Icône optionnelle affichée avant le contenu.
actionReactNode—Emplacement pour un bouton ou un lien d'action.
childrenReactNode—Corps de l'encadré.

Composants liés