BjTile

Tuile React avec forwardRef : lien par défaut (as a) ou conteneur div ; horizontal optionnel.

Utilisation

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

export function Example() {
  return (
    <BjTile href="#">
      <i className="ri-file-list-3-line bj-tile__icon" aria-hidden />
      <span className="bj-tile__title">Démarches en ligne</span>
      <span className="bj-tile__desc">Accédez aux formulaires et suivis administratifs.</span>
    </BjTile>
  )
}

Aperçu

Démarches en ligneAccédez aux formulaires et suivis administratifs.

horizontal

Démarches en ligneAccédez aux formulaires et suivis administratifs.

<BjTile href="#" horizontal>
  <i className="ri-file-list-3-line bj-tile__icon" aria-hidden />
  <span className="bj-tile__title">Horizontal</span>
  <span className="bj-tile__desc">Icône et texte alignés.</span>
</BjTile>

Prop as (a ou div)

as aLien

as divStatique

{/* Lien (défaut as="a") */}
<BjTile href="/demarches">…</BjTile>

{/* Statique */}
<BjTile as="div" role="group" aria-label="Tuiles">…</BjTile>

Combinaisons

horizontal + aCombinaison

horizontal + divStatique

<BjTile href="#" horizontal>
  <i className="ri-government-line bj-tile__icon" aria-hidden />
  <span className="bj-tile__title">horizontal + a</span>
  <span className="bj-tile__desc">Combinaison</span>
</BjTile>

<BjTile as="div" horizontal>
  <i className="ri-settings-3-line bj-tile__icon" aria-hidden />
  <span className="bj-tile__title">horizontal + div</span>
  <span className="bj-tile__desc">Statique</span>
</BjTile>

Children

Structure avec bj-tile__icon, bj-tile__title, bj-tile__desc.

<BjTile href="#">
  <i className="ri-star-line bj-tile__icon" aria-hidden />
  <span className="bj-tile__title">Favoris</span>
  <span className="bj-tile__desc">Accès rapide</span>
  <span className="bj-badge bj-badge--sm">3</span>
</BjTile>

Props

Prop	Description
`horizontal`	Alignement horizontal icône / texte.
`as`	a (défaut) ou div — ancre ou bloc statique.
`children`	Structure avec bj-tile__icon, bj-tile__title, bj-tile__desc.