# Images

# Image Small

design front-end roxen cms

# Concept

Image die voorkomt in content blokken. Breekt niet uit content grid. Eyebrow, title, intro mogelijk. Caption mogelijk, deze komt onder de afbeelding te staan.

# Content

  • Caption mogelijk. Zorg voor korte omschrijving van max 150 karakters.

# Image Wide

design front-end roxen cms

Image die voorkomt in content blokken. Breekt uit content grid. Eyebrow, title, intro mogelijk. Caption mogelijk, deze komt onder de afbeelding te staan.

# Image row Portrait

design front-end roxen cms

# Concept

De imagerow is bedoeld om een sfeer impressie te geven van een opleiding, evenement, campus of studie tijd. Ofwel, een lijst in een visueel aantrekkelijk afbeeldingen om de bezoeker te inspireren en activeren om meer te weten te komen over het specifieke onderwerp. (elke afbeelding is klikbaar).

# Content

Maximaal 60 karakters tekst.
Media element kan alleen een afbeelding bevatten. imagerow-triple-portrait_ux

# Logo grid

design front-end roxen cms

# Concept

Het Logo grid is bedoeld om logo's van partners, merken, bedrijven of instanties te tonen.

# Notes voor Content

  • Gebruik logo's die minimaal 160 pixels bij 160 pixels zijn en maximaal 320 pixels bij 320 pixels
  • Voorzie een logo van een URL wanneer je wilt dat een logo naar een andere webpagina gaat
  • Gebruik altijd logo's die een transparante of witte achtergrond hebben
  • Zorg ervoor dat de afbeelding die je van het logo gebruikt geen ruimte aan de zijkanten heeft
  • Gebruik logo's die .svg, .png, of .jpg zijn

# Notes voor DEV

  • Het toevoegen van een link bij een logo is optioneel
  • Er mogen maximaal 20 logo's getoond worden in het grid
  • Staande logo's krijgen een padding van 32 pixels aan de boven- en onderkant op desktop
  • Liggende logo's krijgen een padding van 24 pixels aan de zijkanten op desktop
  • Staande logo's krijgen een padding van 24 pixels op mobile aan de boven- en onderkant
  • Liggende logo's krijgen een padding van 16 pixels op mobile aan de zijkanten
  • Wanneer je over een logo hovert komt er over het logo een 3% transparantie #000000 (dus erg licht zwart) laag over het logo heen
  • Logo's die .svg, .png of .jpg zijn worden ondersteund