Mise en avant

Bloc éditorial : couleur de bordure (default sans modificateur, ou bj-callout--green, --yellow, --red), icône Remix optionnelle (<i class="bj-callout__icon …">), titre (<p class="bj-callout__title">), texte et emplacement bj-callout__btn pour le slot action (boutons).

Couleur par défaut

Sans modificateur, la bordure gauche utilise la couleur d’action (vert institutionnel).

Titre (défaut)

Texte avec bordure verte action par défaut.

<div class="bj-callout" role="region" aria-labelledby="co-def">
  <p class="bj-callout__title" id="co-def">Titre</p>
  <p class="bj-callout__text">Texte avec bordure verte action par défaut.</p>
</div>

Exemple complet

Démarches en ligne

Plus de 200 services sont accessibles 24h/24 depuis le portail national.

Découvrir les services

<div class="bj-callout" role="region" aria-labelledby="co-title">
  <i class="bj-callout__icon ri-lightbulb-flash-line" aria-hidden="true"></i>
  <p class="bj-callout__title" id="co-title">Démarches en ligne</p>
  <p class="bj-callout__text">Plus de 200 services accessibles 24h/24.</p>
  <div class="bj-callout__btn">
    <a href="#" class="bj-btn bj-btn--secondary">Découvrir les services</a>
  </div>
</div>

Slot action (<code>bj-callout__btn</code>)

Placez un ou plusieurs boutons ou liens dans bj-callout__btn ; la zone n’apparaît que si le contenu est présent (équivalent du slot action en Vue).

Message court.

<div class="bj-callout bj-callout--green" role="region">
  <p class="bj-callout__text">Message court.</p>
  <div class="bj-callout__btn">
    <button type="button" class="bj-btn">Continuer</button>
  </div>
</div>

Sans titre

Omettez bj-callout__title : seuls icône, texte et action restent.

Bloc sans titre : utilisez aria-label sur le conteneur si besoin.

<div class="bj-callout" role="region" aria-label="Information">
  <i class="bj-callout__icon ri-information-line" aria-hidden="true"></i>
  <p class="bj-callout__text">Bloc sans titre : utilisez <code>aria-label</code> sur le conteneur si besoin.</p>
</div>

Icône + texte

Icône et titre

Combinaison icône Remix, titre et texte.

<div class="bj-callout bj-callout--green" role="region" aria-labelledby="co-it">
  <i class="bj-callout__icon ri-checkbox-circle-line" aria-hidden="true"></i>
  <p class="bj-callout__title" id="co-it">Titre</p>
  <p class="bj-callout__text">Texte sous icône et titre.</p>
</div>

Couleurs

Modificateurs de bordure : bj-callout--green, bj-callout--yellow, bj-callout--red.

Variante verte

Pour les messages positifs ou liés à l’identité verte du Bénin.

Variante jaune

Pour attirer l’attention sans niveau d’alerte critique.

Variante rouge

Pour les messages forts ou les appels à l’action urgents.

<div class="bj-callout bj-callout--green" role="region">…</div>
<div class="bj-callout bj-callout--yellow" role="region">…</div>
<div class="bj-callout bj-callout--red" role="region">…</div>

Couleur × action

Chaque couleur peut inclure un bloc bj-callout__btn pour un appel à l’action.

Attention

Délai de traitement prolongé pendant les travaux.

<div class="bj-callout bj-callout--yellow" role="region" aria-labelledby="co-y">
  <p class="bj-callout__title" id="co-y">Attention</p>
  <p class="bj-callout__text">Délai de traitement prolongé.</p>
  <div class="bj-callout__btn"><a href="#" class="bj-btn bj-btn--secondary">En savoir plus</a></div>
</div>

Couleur × icône × titre × action

Les trois modificateurs de bordure avec la même structure : bj-callout__icon, bj-callout__title, bj-callout__text, bj-callout__btn.

Écologie

Mesure prioritaire : vérifier les critères avant dépôt.

Consulter

Délais

Dépassement possible : anticipez les pièces manquantes.

Urgence

Action requise avant la fin de la période légale.

Corriger le dossier

<!-- Vert -->
<div class="bj-callout bj-callout--green" role="region" aria-labelledby="g1">
  <i class="bj-callout__icon ri-leaf-line" aria-hidden="true"></i>
  <p class="bj-callout__title" id="g1">Titre vert</p>
  <p class="bj-callout__text">…</p>
  <div class="bj-callout__btn"><a href="#" class="bj-btn">Action</a></div>
</div>
<!-- Jaune / rouge : même schéma avec bj-callout--yellow / bj-callout--red -->

Classes CSS

Classe	Description
`bj-callout`	Bloc avec fond alternatif et bordure gauche (vert action par défaut).
`bj-callout__icon`	Icône Remix (<code><i></code>) au-dessus du titre.
`bj-callout__title`	Titre de section (<code><p></code>).
`bj-callout__text`	Paragraphe descriptif.
`bj-callout__btn`	Conteneur pour le slot action Vue (<code>action</code>) ; en HTML statique utilisez <code>bj-callout__btn</code> (pas de classe <code>bj-callout__action</code>).
`bj-callout--green`	Bordure gauche vert Bénin.
`bj-callout--yellow`	Bordure jaune Bénin.
`bj-callout--red`	Bordure rouge Bénin.