👐 HAN-DS

# Sliders

# Slider Skinny

design front-end roxen cms

# Concept

Klikbare etalage om foto’s te presenteren. Deze versie van de slider heeft mogelijkheden voor het plaatsen van een foto en caption. Het component is ontworpen voor content-pagina’s.

# Notes voor content:

  • Minimaal 3 afbeeldingen plaatsen in dit component
  • Caption maximaal 80 karakters lang.

# Slider Regular

design front-end roxen cms

# Concept:

Klikbare etalage om projecten, faciliteiten, etc. visueel te presenteren. Deze versie van de slider heeft mogelijkheden voor het plaasten van een onderschrift, link, video en foto. Het component kan op elke pagina geplaatst worden.

# Content:

  • Titel lengte: minimaal 70, maximaal 150 karakters
  • Link lengte: minimaal 15, maximaal 40 karakters
  • Minimaal aantal slides van 3, maximaal 8

slider-regular

# Slider Whale

design front-end roxen cms

Carousel met altijd exact 3 billboards-slides erin. Sectie moet altijd een titel bevatten.

# Concept:

Dit component is bedoeld om belangrijke content de aandacht te geven bv praktijkcases/projecten of ervaringen van studenten.

# Content:

Maak de content zo aantrekkelijk mogelijk. Houd de tekst zo kort en activerend mogelijk. Gebruik alleen hoge kwaliteit foto's die rekening houden met het witte kader aan de rechter zijde.

  • Eyebrow max 1 a 2 woorden.
  • Het focus punt van de afbeelding dient aan de linkerkant te zitten.
  • Houdt de titel zo kort en direct mogelijk
  • Max. body tekst: 300 karakters.
  • Kan een primary, secondary CTA button en/of strong bevatten.
  • Buttons kunnen naar external pages refereren. Arrows worden dan external icons.

Minimaal 2 cases, maximaal 3. Als er maar 1 is, gebruik dan het billboards component

# Notes voor dev:

  • Achtergrond kan een afbeelding of een video(popup) zijn
  • Achtergrond is 100% viewport height
  • Ruimte en verhouding is belangrijk:
    • Spacing in het contentblok moet ruim voelen

Met en zonder buttons beschikbaar. Max 3 cases.

2 Cases = 50% pagination 3 Cases = 33% pagination

Pagination = klikbaar.

Animatie

Content is swipeable. Slide de achtergrond en fade de content. Content slide fade down.

← Search →