System
Menu

Componenten / Uitgebreid / Secties

Kenmerken

Raster met diensten of voordelen: icoon of nummer, titel en één zin.

UitgebreidSecties3 instellingenfeature-grid

Voorbeeld

Instellingen

Laden…

<ul class="gx-features" style="--cols:3">
  <li>
    <span class="gx-features__icon">
      <svg class="gx-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
        <path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18ZM3 12h18M12 3c2.5 2.6 3.7 5.6 3.7 9s-1.2 6.4-3.7 9c-2.5-2.6-3.7-5.6-3.7-9S9.5 5.6 12 3Z"/>
      </svg>
    </span>
    <h3 class="gx-card__title">Website</h3>
    <p class="gx-card__text">Snel, toegankelijk en vindbaar.</p>
  </li>
  <li>
    <span class="gx-features__icon">
      <svg class="gx-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
        <path d="M12 4l2.4 5 5.6.7-4.1 3.8 1.1 5.5L12 16.3 7 19l1.1-5.5L4 9.7 9.6 9z"/>
      </svg>
    </span>
    <h3 class="gx-card__title">Brandbook</h3>
    <p class="gx-card__text">Eén bron voor kleur, type en toon.</p>
  </li>
  <li>
    <span class="gx-features__icon">
      <svg class="gx-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
        <path d="M8 5.5v13l10.5-6.5z"/>
      </svg>
    </span>
    <h3 class="gx-card__title">Brand movie</h3>
    <p class="gx-card__text">Beeld dat je merk laat bewegen.</p>
  </li>
</ul>

Instellingen

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

SleutelInstellingWaardenStandaard
columnsKolommen3 2 43
markerMarkeringicon number noneicon
boxedIn vlakkenaan / uitfalse

Richtlijnen

Toegankelijkheid

  • Lijst (ul) zodat het aantal wordt voorgelezen.

Wel

  • 3 of 4 items.

Niet

  • Lange teksten per item.

Verwant

HeroOpening van een pagina: beeld groot in beeld, kop met payoff, één of twee acties. Loopt vloeiend over in de volgende sectie.
StappenGenummerd proces in blokken, zoals op GXJ Beats. Geordende lijst.
Call to actionAfsluitende oproep met één actie. Met amber gloed, beeld of rustig vlak.