Composants

Logo d’enseigneNouveau

Le petit logo propre d’une enseigne ou d’un service : taille fixe, coins arrondis, fond blanc (un logo sombre reste lisible en thème sombre). Pas encore d’image ? Une pastille avec l’initiale sur la couleur de l’enseigne. Et une rangée de logos à choisir (« Pas le bon magasin ? »). CSS seulement. Premier usage : Wallet.

Essayer

HTML

<!-- Logo connu : l'image (PNG carré, ici 96 × 96 rangé par le serveur) -->
<span class="aub-logo" style="--aub-logo-couleur:#0066b3"><img src="https://wallet.aubota.xyz/logo/leclerc.png" alt="" width="96" height="96" loading="lazy"></span>

<!-- Pas (encore) de logo : la pastille, initiale + couleur de l'enseigne -->
<span class="aub-logo aub-logo--pastille" style="--aub-logo-couleur:#0050aa" aria-hidden="true">L</span>

<!-- Choisir parmi des logos -->
<div class="aub-logos" role="group" aria-label="Pas le bon magasin ?">
  <button type="button" class="aub-logos__choix" aria-pressed="false">
    <span class="aub-logo aub-logo--pastille" style="--aub-logo-couleur:#0050aa" aria-hidden="true">L</span><span>Lidl</span>
  </button>
</div>

Classe / variable	Rôle
`.aub-logo`	Le carré arrondi (2,5 rem), fond blanc, l’image « contain » dedans.
`--sm` · `--lg` · `--xl`	1,75 rem · 3,5 rem · 5 rem.
`--aub-logo-couleur`	La couleur de l’enseigne (pastille).
`.aub-logo--pastille`	Sans image : l’initiale en blanc sur la couleur.
`.aub-logos` · `.aub-logos__choix`	Une rangée de boutons « logo + nom » ; `aria-pressed="true"` = celui qui est choisi.

D’où viennent les logos

Pour Wallet, du site officiel de l’enseigne, lu par notre serveur dans une tâche de fond (apple-touch-icon, icône déclarée, favicon, image de partage carrée), réduit en 96 × 96 et rangé hors web ; jamais d’un service de logos d’une autre entreprise. Voir src.aubota.xyz/php/wallet/WalletLogos.php.