Mise en exergue

Paragraphe ou extrait mis en valeur par une bordure gauche et une taille de texte plus grande : bj-highlight (taille md par défaut, sans classe supplémentaire), bj-highlight--sm, bj-highlight--lg.

Exemple (taille moyenne par défaut)

Les usagers peuvent suivre l’état de leur dossier depuis l’espace personnel sécurisé. 

<div class="bj-highlight">
  <p>…</p>
</div>

Tailles sm et lg

Variante compacte pour notes ou encarts dans une colonne latérale.

Variante large pour un extrait phare en tête d’article.

<div class="bj-highlight bj-highlight--sm"><p>…</p></div>
<div class="bj-highlight bj-highlight--lg"><p>…</p></div>

Tailles × exemples

Les trois niveaux côte à côte : compact pour encarts, médium par défaut, large pour accroche en tête d’article.

Sm — encart latéral ou métadonnée mise en avant.

Md — taille par défaut du composant Vue (size="md").

Lg — chapô ou citation institutionnelle très visible.

<!-- sm -->
<div class="bj-highlight bj-highlight--sm"><p>Compact</p></div>
<!-- md (défaut) -->
<div class="bj-highlight"><p>Par défaut</p></div>
<!-- lg -->
<div class="bj-highlight bj-highlight--lg"><p>Accroche</p></div>

Classes CSS

ClasseDescription
bj-highlightTaille médiane par défaut : bordure gauche grise foncée, corps de texte élargi (aucune classe <code>bj-highlight--md</code> — le médium est l’absence de <code>--sm</code> / <code>--lg</code>).
bj-highlight--smPadding et corps de texte réduits.
bj-highlight--lgCorps de texte très large (affichage).

Accessibilité

Préférez un paragraphe <p> à l’intérieur du bloc pour une structure lisible. Ne confondez pas mise en exergue et message d’état : n’utilisez pas role="alert" ici. Le contraste du texte sur le fond de page doit rester conforme WCAG.