Stap 7 — Hero (compact & herbruikbaar)

We bouwen een hero-sectie als <header>. Je gebruikt hierbij je eigen design tokens en kunt optioneel een achtergrondafbeelding met overlay toevoegen.

7.1 Mark-up (semantisch & compact)

De hero vormt het visuele en inhoudelijke hoofdingangspunt van je pagina, en vervult dus de rol van de <header>. Plaats de inhoud (titel, tekst, knoppen) binnen een .container zodat de tekst gecentreerd en leesbaar blijft, ook op brede schermen.

<header class="hero" role="banner">
  <div class="container text-center py-5">
    <h1 class="fw-bold mb-2">Welkom op onze site</h1>
    <p class="lead mb-3">Korte, duidelijke baseline in één zin.</p>
    <a class="btn btn-primary me-2" href="#main-content">Start hier</a>
    <a class="btn btn-outline-primary" href="/over.html">Meer info</a>
  </div>
</header>

<main id="main-content" class="container">
  <h2 class="pt-4">Sectie 1</h2>
  <p>Inhoud …</p>
</main>

7.2 CSS-basis (tokens & responsieve hoogte)

Plaats dit na je design-tokens in assets/css/custom.css.

/* ---- Hero basis ---- */
.hero{
  /* Responsieve minimumhoogte: 40–60vh, groeit mee met content */
  min-height: clamp(40vh, 55vh, 60vh);

  /* Centreringsmethode (Grid) – 1 regel voor beide assen */
  display: grid;
  place-items: center;

  /* Overlay en pseudo-elementen stapelen netjes binnen de hero */
  position: relative;
  isolation: isolate;

  /* Achtergrondafbeelding met fallback:
     - Eerst probeert de browser de variabele --hero-img (bijv. url('...')).
     - Als die niet bestaat, toont hij de gradient hieronder als backup. */
  background-image: var(--hero-img, linear-gradient(180deg, rgba(0,0,0,.04), transparent));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Overlay: extra contrast bij foto’s */
.hero::before{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.30));
  z-index: -1;
}

/* Tekst in de hero volgt je themakleuren */
.hero :where(h1, .lead){ color: var(--brand-text); }

/* Donkere foto? activeer lichte UI */
.hero[data-theme="dark"] :where(h1, .lead){ color: #fff; }
.hero[data-theme="dark"] .btn.btn-outline-primary{
  color: #fff; border-color: #fff;
}
.hero[data-theme="dark"] .btn.btn-outline-primary:hover{
  background: rgba(255,255,255,.12);
}

/* Soepele scroll + juiste offset onder sticky nav */
:root{ scroll-behavior: smooth; }
#main-content{ scroll-margin-top: 80px; } /* pas aan aan je navbar-hoogte */

7.3 Achtergrondafbeelding via CSS-variabele

Je hebt geen extra klasse nodig. Gebruik gewoon een inline variabele voor de hero-foto.

<header class="hero" role="banner"
        style="--hero-img: url('../img/hero.jpg');"
        data-theme="dark">
  <div class="container text-center py-5">
    <h1 class="fw-bold mb-2">Alles voor jouw project</h1>
    <p class="lead mb-3">Sterke baseline. Kort en krachtig.</p>
    <a class="btn btn-primary me-2" href="#main-content">Aan de slag</a>
    <a class="btn btn-outline-primary" href="/over.html">Ontdek meer</a>
  </div>
</header>

7.4 Contrast & tokens (richtlijnen)

• Licht beeld → standaard kleuren via --brand-text en .btn-primary.
• Donker beeld → gebruik data-theme="dark" voor witte tekst/outline-knoppen.
• Controleer altijd het contrast (min. 4.5 : 1). Pas overlay of beeldhelderheid aan indien nodig.

7.5 Test-punten

• De hero staat als <header class="hero"> boven <main>.
• De knop “Start hier” scrolt soepel naar #main-content.
• Tekst blijft leesbaar bij foto-achtergrond (overlay goed?).

7.6 Checklist

• Responsieve hoogte via clamp().
• Foto optioneel via --hero-img (fallback = gradient).
• Donker beeld → data-theme="dark" toegepast.
• Slechts één role="banner" per pagina.

7.7 Hero-afbeeldingen exporteren (Photoshop)

Een hero-foto moet scherp, licht en snel laden. Gebruik deze richtlijnen:

WebP is 25–35 % kleiner bij gelijke kwaliteit. JPEG blijft een prima fallback.

Photoshop-workflow

1. Bestand → Exporteren → Exporteren als…
2. Kies JPEG (80–85 %) of WebP (kwaliteit 70–80)
3. Pas beeldgrootte aan (bijv. 1600 × 800 px)
4. Kleurprofiel sRGB insluiten
5. Controleer bestandsgrootte (KB) en pas kwaliteit aan tot onder de richtwaarde

Kadrering & focus

• Belangrijk onderwerp in het midden of bovenmidden (background-position: center; werkt dan het best).
• Vermijd drukke patronen achter tekst; de overlay helpt, maar overdrijf niet met contrast.

Optioneel: andere beelden per breakpoint

/* mobiel eerst */
.hero{ --hero-img: url("../img/hero-1000x1400.jpg"); }

/* tablet */
@media (min-width: 768px){
  .hero{ --hero-img: url("../img/hero-1200x600.jpg"); }
}

/* desktop */
@media (min-width: 1200px){
  .hero{ --hero-img: url("../img/hero-1600x800.jpg"); }
}

Extra leesbaarheid? Verhoog overlay-opacity bij drukke beelden:
.hero::before{ background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35)); }