BjBanner

Bannière hero avec taille, alignement, thème, image de fond optionnelle, titre, texte et zone d’actions. Les modificateurs de classe suivent les props.

Utilisation

import { BjBanner } from '@flrxnt/dsbj/react'
import { BjButton } from '@flrxnt/dsbj/react'

export default function App() {
  return (
    <BjBanner
      size="lg"
      theme="dark"
      align="center"
      image="https://picsum.photos/1200/500"
      title="Bienvenue sur le portail"
      text="Accédez aux services publics numériques."
      actions={
        <>
          <BjButton>Démarrer</BjButton>
          <BjButton variant="secondary">En savoir plus</BjButton>
        </>
      }
    />
  )
}

Aperçu

Bienvenue sur le portail

Accédez aux services publics numériques.

size (sm, md, lg)

md est la valeur par défaut (pas de modificateur de taille). sm et lg ajoutent bj-banner--sm et bj-banner--lg.

import { BjBanner } from '@flrxnt/dsbj/react'

export function Sizes() {
  return (
    <>
      <BjBanner size="sm" title="Petite bannière" text="size=&quot;sm&quot;" />
      <BjBanner size="md" title="Moyenne (défaut)" text="size omis ou md" />
      <BjBanner size="lg" title="Grande bannière" text="size=&quot;lg&quot;" />
    </>
  )
}

align (left, center, right)

left est la valeur par défaut ; center et right ajoutent bj-banner--center et bj-banner--right.

import { BjBanner } from '@flrxnt/dsbj/react'

export function Alignments() {
  return (
    <>
      <BjBanner align="left" title="Gauche" text="align par défaut" />
      <BjBanner align="center" title="Centre" text="align=&quot;center&quot;" />
      <BjBanner align="right" title="Droite" text="align=&quot;right&quot;" />
    </>
  )
}

theme (light, dark, green, yellow, red, plain)

dark par défaut. light, green, yellow, red et plain ajoutent bj-banner--. plain masque l’overlay image.

import { BjBanner } from '@flrxnt/dsbj/react'

export function Themes() {
  return (
    <>
      <BjBanner theme="light" title="Light" />
      <BjBanner theme="dark" title="Dark (défaut)" />
      <BjBanner theme="green" title="Green" />
      <BjBanner theme="yellow" title="Yellow" />
      <BjBanner theme="red" title="Red" />
      <BjBanner theme="plain" title="Plain" text="Sans overlay sur image" />
    </>
  )
}

Grille theme × size

Parcourir chaque thème avec une taille autre que md pour vérifier le rendu.

import { BjBanner } from '@flrxnt/dsbj/react'

const themes = ['light', 'dark', 'green', 'yellow', 'red', 'plain'] as const
const sizes = ['sm', 'lg'] as const

export function ThemeSizeGrid() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      {themes.map((theme) => (
        <div key={theme} style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {sizes.map((size) => (
            <BjBanner key={`${theme}-${size}`} theme={theme} size={size} title={`${theme} / ${size}`} />
          ))}
        </div>
      ))}
    </div>
  )
}

image (fond)

Si image est défini, un bloc .bj-banner__img reçoit background-image. Sans image, seuls overlay et corps restent.

import { BjBanner } from '@flrxnt/dsbj/react'

export function WithBackground() {
  return (
    <BjBanner
      image="https://picsum.photos/1400/600"
      theme="dark"
      title="Titre sur photo"
      text="L’image remplit .bj-banner__img en fond."
    />
  )
}

title, text sans image

title et text sont optionnels ; vous pouvez n’afficher que des actions ou des children.

import { BjBanner } from '@flrxnt/dsbj/react'

export function TextOnly() {
  return (
    <BjBanner
      theme="light"
      title="Sans image"
      text="Overlay et corps uniquement."
    />
  )
}

actions

actions est rendu dans .bj-banner__actions (boutons, liens).

import { BjBanner } from '@flrxnt/dsbj/react'
import { BjButton } from '@flrxnt/dsbj/react'

export function ActionsOnly() {
  return (
    <BjBanner
      theme="plain"
      actions={
        <>
          <BjButton variant="accent">Principal</BjButton>
          <a className="bj-link" href="/doc">Documentation</a>
        </>
      }
    />
  )
}

children

children suit title, text et actions dans .bj-banner__body.

import { BjBanner } from '@flrxnt/dsbj/react'

export function WithChildren() {
  return (
    <BjBanner title="Titre" text="Sous-titre">
      <p className="bj-text-sm">Bloc additionnel sous les actions (badges, métadonnées).</p>
    </BjBanner>
  )
}

Combinaison complète

Exemple large : lg, center, light, image, titre, texte, boutons et contenu additionnel.

import { BjBanner } from '@flrxnt/dsbj/react'
import { BjButton } from '@flrxnt/dsbj/react'

export function FullBanner() {
  return (
    <BjBanner
      size="lg"
      align="center"
      theme="light"
      image="https://picsum.photos/1200/480"
      title="Portail citoyen"
      text="Une entrée unique pour vos démarches."
      actions={
        <>
          <BjButton>Créer un compte</BjButton>
          <BjButton variant="secondary">Se connecter</BjButton>
        </>
      }
    >
      <ul className="bj-text-sm" style={{ marginTop: '1rem' }}>
        <li>Service 24h/24</li>
        <li>Données hébergées au Bénin</li>
      </ul>
    </BjBanner>
  )
}

Attributs natifs du conteneur

className, id, role, data-* sur la div racine .bj-banner.

import { BjBanner } from '@flrxnt/dsbj/react'

export function WithNativeAttrs() {
  return (
    <BjBanner
      id="hero"
      role="region"
      aria-label="Mise en avant"
      data-analytics="home-hero"
      title="Accueil"
    />
  )
}

Props

PropDescription
sizeHauteur visuelle : sm, md par défaut ou lg.
alignAlignement du contenu : left par défaut, center ou right.
themeThème couleur : light, dark par défaut, green, yellow, red ou plain.
imageURL d’image : rendue en arrière-plan sur bj-banner__img.
titleTitre principal (h1).
textParagraphe sous le titre.
actionsNœuds React pour les boutons ou liens dans bj-banner__actions.
childrenContenu additionnel dans bj-banner__body après actions.
…restAttributs natifs du div et className fusionnés sur l’élément racine.