« Modèle:Header » : différence entre les versions

Navigation interactive dans l’historique

← Modification précédente Modification suivante →

VisuelWikicode

Version du 1 novembre 2025 à 20:04

Cette infobox bandeau s'affiche en pleine largeur. Paramètres:

badge =
title =
subtitle =
text = (ou 1=)
link = Page cible du clic
class = classes additionnelles (ex: home-header--bleed)

@@ Ligne 1 : / Ligne 1 : @@
-<div class="home-header-wrapper">
+<includeonly>
-  <div class="home-header{{{modifier|}}}">
+<!-- Charge les styles -->
-     <div class="home-header__content">
+<templatestyles src="Header/styles.css" />
-      {{#if:{{{badge|}}}|<span class="home-header__badge">{{{badge}}}</span>}}
-      {{#if:{{{title|}}}|<strong class="home-header__title">{{{title}}}</strong>}}
+<!--
-      {{#if:{{{subtitle|}}}|<span class="home-header__subtitle">{{{subtitle}}}</span>}}
+  Classes options (paramètre "class"):
-      {{#if:{{{text|}}}|<span class="home-header__text">{{{text}}}</span>}}
+  - home-header--bleed : déborde jusqu'aux bords de la colonne (Vector 2022)
-      {{#if:{{{link|}}}|
+-->
-        <span class="home-header__link-wrapper">
+<div class="home-header{{#if:{{{link|}}}| home-header--has-link}}{{#if:{{{class|}}}| {{{class}}}}}">
-          <a href="{{{link}}}" class="home-header__link">{{{linkText|En savoir plus →}}}</a>
-        </span>
+  <!-- Ancre overlay 100% pour rendre tout le header cliquable
-      }}
+       (uniquement si un lien est fourni) -->
-    </div>
+  {{#if:{{{link|}}}|
+     [[{{{link}}}|<span class="home-header__overlay" aria-hidden="true"></span>]]
+  }}
+  <div class="home-header__content">
+    {{#if:{{{badge|}}}|<span class="home-header__badge">{{{badge}}}</span>}}
+    {{#if:{{{title|}}}|<span class="home-header__title">{{{title}}}</span>}}
+    {{#if:{{{subtitle|}}}|<span class="home-header__subtitle">{{{subtitle}}}</span>}}
+    {{#if:{{{text|{{{1|}}}}}}|<span class="home-header__text">{{{text|{{{1}}}}}}</span>}}
+    <!-- Lien visible (accessibilité/clavier), doublé de l’overlay -->
+    {{#if:{{{link|}}}|
+      <span class="home-header__link-wrapper">
+        [[{{{link}}}|<span class="home-header__link">En savoir plus →</span>]]
+      </span>
+    }}
    </div>
-</div><noinclude>{{Documentation}}</noinclude>
+</div>
+</includeonly><noinclude>
+Cette infobox bandeau s'affiche en pleine largeur.
+Paramètres:
+* badge =
+* title =
+* subtitle =
+* text = (ou 1=)
+* link = Page cible du clic
+* class = classes additionnelles (ex: home-header--bleed)
+</noinclude>