System
Menu

Componenten / Uitgebreid / Inhoud

Kaart

Inhoud met beeld, titel en één zin. Verticaal, horizontaal of tekst over beeld. Hele kaart klikbaar via de titel-link.

UitgebreidInhoud4 instellingencard

Voorbeeld

Instellingen

Laden…

<article class="gx-card gx-card--vertical gx-card--link">
  <div class="gx-card__media">
    <img src="/img/signatures-700.webp" alt="" width="700" height="394" loading="lazy" decoding="async">
  </div>
  <div class="gx-card__body">
    <p class="gx-mono">Case · 2026</p>
    <h3 class="gx-card__title">
      <a href="#">Signatures bar service</a>
    </h3>
    <p class="gx-card__text">Cocktails op locatie, met eigen bartenders en kristal.</p>
  </div>
</article>

Instellingen

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

SleutelInstellingWaardenStandaard
layoutOpbouwvertical horizontal overlayvertical
mediaBeeldaan / uittrue
metaLabel erbovenaan / uittrue
interactiveKlikbaaraan / uittrue

Richtlijnen

Toegankelijkheid

  • Klikbare kaart: één echte link (de titel) met ::after over de kaart, geen geneste links.
  • Kaart is een article met een kop.

Wel

  • Eén zin per kaart.

Niet

  • Meerdere knoppen in een klikbare kaart.

Verwant

AccordeonUitklapbare vragen met native details/summary. Optioneel exclusief (één tegelijk open) via het name-attribuut.
TabsWisselen tussen gelijkwaardige panelen. ARIA tabs met pijltoetsen via de runtime; zonder JS staan alle panelen onder elkaar.
TabelGegevens in rijen en kolommen met caption en kolomkoppen. Scrolt horizontaal binnen zijn vak op mobiel.
CitaatTestimonial of uitspraak. Alleen aangeleverde tekst gebruiken, nooit zelf quotes verzinnen.