Beeld

Beeld met vaste verhouding (geen layout shift), afronding volgens het thema en optioneel bijschrift.

BasisMedia4 instellingenmedia

Voorbeeld

Instellingen

Laden…

<figure class="gx-media" style="--ratio:16/10">
  <div class="gx-media__frame gx-r-card">
    <img src="/img/events-700.webp" srcset="/img/events-700.webp 700w, /img/events.webp 1400w" sizes="(max-width:768px) 100vw, 640px" alt="Gedekte tafel bij een GXJ Event" width="700" height="525" loading="lazy" decoding="async">
  </div>
  <figcaption class="gx-caption">GXJ Events, Amsterdam.</figcaption>
</figure>

Instellingen

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

Sleutel	Instelling	Waarden	Standaard
`ratio`	Verhouding	`16/10` `4/3` `1/1` `4/5` `21/9`	`16/10`
`radius`	Hoeken	`card` `lg` `none`	`card`
`caption`	Bijschrift	aan / uit	`true`
`shade`	Verduistering voor tekst	aan / uit	`false`

Richtlijnen

Toegankelijkheid

Alt beschrijft de inhoud; decoratief beeld krijgt alt="".

Wel

width/height of aspect-ratio altijd zetten (CLS).
WebP/AVIF, srcset en lazy onder de vouw.

Niet

Hero-beeld lazy laden: gebruik fetchpriority=high.

Verwant

AvatarPersoon of merk als rond of afgerond vlak, met foto of initialen.

IconenLijniconen van 24px met lijndikte 1.5 in currentColor. Altijd SVG, nooit emoji.