System
Menu

Componenten / Uitgebreid / Secties

Hero

Opening van een pagina: beeld groot in beeld, kop met payoff, één of twee acties. Loopt vloeiend over in de volgende sectie.

UitgebreidSecties5 instellingenhero

Voorbeeld

Instellingen

Laden…

<section class="gx-hero gx-hero--image gx-hero--large">
  <div class="gx-hero__media">
    <img src="/img/events.webp" srcset="/img/events-700.webp 700w, /img/events.webp 1400w" sizes="100vw" alt="" width="1400" height="1050" fetchpriority="high">
  </div>
  <div class="gx-hero__copy">
    <p class="gx-payoff">Enjoying Moments with Style.</p>
    <h1 class="gx-h gx-h--hero">Events met 
      <span class="gx-metal">karakter</span>
    </h1>
    <p class="gx-lead">Eén zin die zegt wat je hier vindt en voor wie het is.</p>
    <div class="gx-row">
      <a class="gx-btn gx-btn--primary" href="#">Plan een gesprek</a>
      <a class="gx-btn gx-btn--secondary" href="#">Bekijk werk</a>
    </div>
  </div>
</section>

Instellingen

Alles wat je kunt variëren. Ook als query in de URL en als options in de MCP-tool get_component.

SleutelInstellingWaardenStandaard
layoutOpbouwimage centered splitimage
heightHoogtelarge screen compactlarge
eyebrowPayoffaan / uittrue
actionsActies2 1 02
brandMerkworld ai studios events productions beats signatures partnerships design canicheevents

Richtlijnen

Toegankelijkheid

  • Eén h1.
  • Tekst over beeld: verduistering zodat contrast minimaal 4.5:1 is.

Wel

  • Hero-beeld met fetchpriority=high, niet lazy (LCP).
  • Onderkant verloopt naar de volgende sectie.

Niet

  • Grote schreeuwende koppen van templates.

Verwant

KenmerkenRaster met diensten of voordelen: icoon of nummer, titel en één zin.
StappenGenummerd proces in blokken, zoals op GXJ Beats. Geordende lijst.
Call to actionAfsluitende oproep met één actie. Met amber gloed, beeld of rustig vlak.