Tuile

Tuile d’accès : racine <a class="bj-tile"> (défaut Vue) ou <div class="bj-tile"> pour un bloc non cliquable. Modificateur bj-tile--horizontal pour icône à gauche. Grille bj-tiles pour plusieurs tuiles.

Exemple (lien)

Mes démarchesSuivre l’état de vos dossiers en cours.
<a href="#" class="bj-tile">
  <span class="bj-tile__icon" aria-hidden="true">…</span>
  <span class="bj-tile__title">…</span>
  <span class="bj-tile__desc">…</span>
</a>

Tuile en <code>div</code> (non lien)

Utilisez div.bj-tile pour un regroupement visuel sans navigation ; le contenu interactif reste à l’intérieur (boutons, liens ciblés).

GuichetBloc informatif sans lien sur toute la surface.
<div class="bj-tile">
  <span class="bj-tile__icon" aria-hidden="true">…</span>
  <span class="bj-tile__title">Titre informatif</span>
  <span class="bj-tile__desc">Détail sans navigation sur toute la carte.</span>
</div>

Grille et horizontale

Aide
FAQ et contact du support.
Tuile avec imageLogo ou pictogramme personnalisé.Rendez-vousPrendre un créneau en ligne.
<a href="#" class="bj-tile bj-tile--horizontal">
  <span class="bj-tile__icon" aria-hidden="true">…</span>
  <div>
    <div class="bj-tile__title">…</div>
    <div class="bj-tile__desc">…</div>
  </div>
</a>
<img class="bj-tile__img" src="…" alt="">
<div class="bj-tiles">…</div>

Horizontal × balise (<code>a</code> / <code>div</code>)

Le modificateur horizontal s’applique indifféremment sur lien ou sur conteneur statique.

Lien horizontal
Balise <a>.
Bloc horizontal
Balise <div>.
<!-- Lien horizontal -->
<a href="#" class="bj-tile bj-tile--horizontal">…</a>
<!-- Bloc horizontal statique -->
<div class="bj-tile bj-tile--horizontal">
  <span class="bj-tile__icon" aria-hidden="true">…</span>
  <div>
    <div class="bj-tile__title">…</div>
    <div class="bj-tile__desc">…</div>
  </div>
</div>

Matrice : lien ou bloc × vertical ou horizontal

Quatre combinaisons utiles : <a class="bj-tile">, <a class="bj-tile bj-tile--horizontal">, <div class="bj-tile">, <div class="bj-tile bj-tile--horizontal">.

Lien vertical<a> sans horizontal.
Lien horizontal
<a> + --horizontal.
Bloc vertical<div> sans horizontal.
Bloc horizontal
<div> + --horizontal.
<a href="#" class="bj-tile">…</a>
<a href="#" class="bj-tile bj-tile--horizontal">…</a>
<div class="bj-tile">…</div>
<div class="bj-tile bj-tile--horizontal">…</div>

Classes CSS

ClasseDescription
bj-tileTuile verticale centrée, bordure et survol (sur lien).
bj-tile__iconGrande icône Remix au-dessus du titre.
bj-tile__imgImage 4rem × 4rem sous le même rôle que l’icône.
bj-tile__titleLibellé principal.
bj-tile__descDescription secondaire.
bj-tile--horizontalIcône à gauche, texte aligné à gauche.
bj-tilesGrille responsive de tuiles.

Accessibilité

Sur un <a>, le titre et la description composent le contexte du lien : le libellé doit rester compréhensible hors grille. Marquez les icônes décoratives en aria-hidden="true". Pour une image purement décorative dans la tuile, utilisez alt="". Sur une div, ne simulez pas un lien : exposez les actions avec de vrais contrôles focalisables.