Mise en page

Bandeau officiel

شريط الموقع الرسميOfficial banner

Stablesrc/dsm/components/official-banner.tsx
Une fine bande d'identité au-dessus de l'en-tête, qui rappelle qu'il s'agit d'un site officiel et explique, à la demande, comment le reconnaître (domaine gov.ma, connexion sécurisée).

Import

import { OfficialBanner } from "@/dsm/components/official-banner";

Exemples

Bandeau officiel

Dépliez « Comment le savoir ? » pour voir l'explication en deux colonnes.

LTR
Un site officiel du Royaume du Maroc

Usage

Quand l'utiliser

  • Placez-le tout en haut de chaque page du site public, avant l'en-tête.

Quand ne pas l'utiliser

  • Ne le dupliquez pas ailleurs sur la page : une seule occurrence par page suffit, en position la plus haute.

Accessibilité & langues

Accessibilité

  • Le déclencheur « Comment le savoir ? » est un vrai bouton (`Collapsible.Trigger`) qui annonce son état ouvert/fermé aux technologies d'assistance.

RTL & multilingue

  • Le déclencheur est poussé en fin de ligne par `ms-auto`, qui s'inverse naturellement en arabe.
  • Le chevron ne se retourne pas — seule sa rotation à l'ouverture change.

Propriétés

OfficialBanner
PropriétéTypeDéfautDescription
classNamestring—Classes Tailwind supplémentaires.

Composants liés