Bannière

Section hero pleine largeur avec image de fond, titre, description et appel à l’action. Les modificateurs de taille (<code>bj-banner--sm</code>, <code>bj-banner--lg</code>), d’alignement (<code>bj-banner--center</code>, <code>bj-banner--right</code>), d’overlay (<code>bj-banner--light</code>, <code>bj-banner--dark</code>) et de thème (<code>bj-banner--plain</code>, <code>bj-banner--green</code>, etc.) se cumulent sur <code>bj-banner</code>, comme le composant Vue <code>BjBanner</code>.

Exemple de base

Bienvenue sur le portail du Bénin

Accédez aux services publics numériques de la République du Bénin.

Découvrir
<div class="bj-banner">
  <img class="bj-banner__img" src="https://picsum.photos/1200/500" alt="">
  <div class="bj-banner__overlay"></div>
  <div class="bj-banner__body">
    <h1 class="bj-banner__title">Bienvenue sur le portail du Bénin</h1>
    <p class="bj-banner__text">Accédez aux services publics numériques de la République du Bénin.</p>
    <div class="bj-banner__actions">
      <a href="#" class="bj-btn bj-btn--inverse">Découvrir</a>
    </div>
  </div>
</div>

Tailles

Les modificateurs bj-banner--sm et bj-banner--lg ajustent la hauteur minimale.

Bannière compacte

Variante réduite pour les sous-pages.

Bannière grande

Variante haute pour les pages d’accueil.

Action principaleEn savoir plus
<div class="bj-banner bj-banner--sm">
  <img class="bj-banner__img" src="https://picsum.photos/1200/300" alt="">
  <div class="bj-banner__overlay"></div>
  <div class="bj-banner__body">
    <h2 class="bj-banner__title">Bannière compacte</h2>
    <p class="bj-banner__text">Variante réduite pour les sous-pages.</p>
  </div>
</div>

<div class="bj-banner bj-banner--lg">
  <img class="bj-banner__img" src="https://picsum.photos/1200/700" alt="">
  <div class="bj-banner__overlay"></div>
  <div class="bj-banner__body">
    <h2 class="bj-banner__title">Bannière grande</h2>
    <p class="bj-banner__text">Variante haute pour les pages d’accueil.</p>
    <div class="bj-banner__actions">
      <a href="#" class="bj-btn bj-btn--inverse">Action principale</a>
      <a href="#" class="bj-btn bj-btn--tertiary-inverse">En savoir plus</a>
    </div>
  </div>
</div>

Alignement centré

Contenu centré

Texte et actions alignés au centre.

Commencer
<div class="bj-banner bj-banner--center">
  <img class="bj-banner__img" src="https://picsum.photos/1200/500?random=2" alt="">
  <div class="bj-banner__overlay"></div>
  <div class="bj-banner__body">
    <h2 class="bj-banner__title">Contenu centré</h2>
    <p class="bj-banner__text">Texte et actions alignés au centre.</p>
    <div class="bj-banner__actions">
      <a href="#" class="bj-btn bj-btn--inverse">Commencer</a>
    </div>
  </div>
</div>

Alignement à droite

bj-banner--right pousse le bloc bj-banner__body à droite et inverse le dégradé de l’overlay.

Alignée à droite

Texte et CTA sur le côté droit.

Continuer

Overlay clair

bj-banner--light éclaircit l’overlay et passe le texte du corps en couleur par défaut (images de fond sombres).

Overlay clair

Pour photographies très sombres.

Combinaisons (taille × alignement × overlay)

Exemples de cumul : compacte + centrée + overlay clair ; grande + alignée à droite + overlay sombre par défaut.

Compact + centré + clair

Trois modificateurs cumulés.

Grande + droite

Hauteur large, contenu à droite.

Sans image

La variante bj-banner--plain utilise un fond uni et masque l’overlay. Combinable avec les couleurs nationales.

Sans image

Bannière avec couleur de fond unie et bordure nationale.

Accéder au service
<div class="bj-banner bj-banner--plain bj-banner--green">
  <div class="bj-banner__body">
    <h2 class="bj-banner__title">Sans image</h2>
    <p class="bj-banner__text">Bannière avec couleur de fond unie et bordure nationale.</p>
    <div class="bj-banner__actions">
      <a href="#" class="bj-btn bj-btn--inverse">Accéder au service</a>
    </div>
  </div>
</div>

Classes CSS

ClasseDescription
bj-bannerConteneur principal pleine largeur.
bj-banner__imgImage de fond (balise <img>, object-fit cover).
bj-banner__overlayCouche semi-transparente pour la lisibilité du texte.
bj-banner__bodyZone de contenu textuel (titre, texte, actions).
bj-banner__titleTitre principal de la bannière.
bj-banner__textSous-titre ou description.
bj-banner__actionsZone de boutons CTA.
bj-banner--smHauteur réduite (14 rem).
bj-banner--lgHauteur augmentée (28 rem).
bj-banner--centerContenu centré horizontalement.
bj-banner--rightContenu aligné à droite.
bj-banner--lightOverlay clair pour images sombres.
bj-banner--darkOverlay sombre uniforme.
bj-banner--plainFond uni sans image (couleur action-high).
bj-banner--greenAccent bordure basse vert Bénin.
bj-banner--yellowAccent bordure basse jaune Bénin.
bj-banner--redAccent bordure basse rouge Bénin.

Accessibilité

L’image décorative de fond doit porter un attribut alt="" vide. Si l’image véhicule un sens, décrivez-la dans alt . Utilisez une balise sémantique <section> ou role="banner" avec un aria-label descriptif pour nommer la zone. Les boutons CTA doivent être des liens ou boutons natifs avec un texte explicite. Vérifiez le contraste entre le texte et l’overlay sur les images claires.