BjLogo

Bloc logo institutionnel React : taille, lien, image, devise, tagline et contenu enfant.

Utilisation

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

export function Example() {
  return (
    <BjLogo
      size="md"
      href="/"
      src="/sigle.svg"
      alt="République du Bénin"
      tagline="Portail des démarches"
    />
  )
}

Aperçu

Fraternité — Justice — Travail

Portail des démarches

size (md, lg, xl)

md est la valeur par défaut ; lg et xl ajoutent bj-logo--lg et bj-logo--xl.

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

export function Sizes() {
  return (
    <>
      <BjLogo size="md" src="/sigle.svg" alt="" />
      <BjLogo size="lg" src="/sigle.svg" alt="" />
      <BjLogo size="xl" src="/sigle.svg" alt="" />
    </>
  )
}

href (lien)

Avec href, le sigle est enveloppé dans a.bj-logo__link ; sans href, image ou children seuls.

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

export function WithAndWithoutLink() {
  return (
    <>
      <BjLogo href="/" src="/sigle.svg" alt="Accueil" />
      <BjLogo src="/sigle.svg" alt="Logo statique" />
    </>
  )
}

src et alt

Si src est défini, un img.bj-logo__img est rendu ; alt vaut « Logo » par défaut.

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

export function ImageAlt() {
  return (
    <BjLogo
      src="https://example.com/armoiries.png"
      alt="Armoiries — République du Bénin"
    />
  )
}

children à la place de l’image

Sans src, children devient le contenu du bloc visuel (texte, SVG, etc.).

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

export function TextMark() {
  return (
    <BjLogo href="/" motto="République du Bénin">
      <p>
        RB
        <br />
        <span className="bj-text-sm">Institution</span>
      </p>
    </BjLogo>
  )
}

motto et tagline

motto utilise .bj-logo__motto, tagline utilise .bj-logo__tagline sous le sigle.

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

export function MottoTagline() {
  return (
    <BjLogo
      src="/sigle.svg"
      alt="Bénin"
      motto="Fraternité — Justice — Travail"
      tagline="Plateforme nationale"
    />
  )
}

Combinaison complète

Lien + image + devise + baseline institutionnelle.

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

export function FullLogo() {
  return (
    <BjLogo
      size="lg"
      href="/"
      src="/sigle.svg"
      alt="République du Bénin"
      motto="Devise nationale"
      tagline="Services en ligne"
      className="site-header__logo"
    />
  )
}

Attributs natifs du conteneur

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

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

export function WithNativeAttrs() {
  return (
    <BjLogo
      id="institution-logo"
      data-testid="logo"
      src="/sigle.svg"
      alt="Logo"
    />
  )
}

Props

Prop	Description
`size`	md (défaut), lg ou xl.
`href`	Si défini, enveloppe le sigle dans un lien.
`motto`	Courte devise sous le bloc.
`tagline`	Sous-ligne descriptive.
`src`	URL de l'image du sigle.
`alt`	Texte alternatif de l'image (défaut : « Logo »).
`children`	Contenu à la place de l'image si src est absent.
`…rest`	Attributs natifs du div et className fusionnés sur l’élément racine.