👐 HAN-DS

# Wayfinding

# HUB navigatie

# Concept

Component met het doel om de onderliggende pagina’s in een overzicht te presenteren. De content zal automatisch gegenereerd worden op basis van de inhoud van de onderliggende pagina’s (Afbeelding, Titel, Introtekst).

# HUB Regular

design front-end roxen cms

De pagina’s die onder de pagina vallen worden in blokken gepresenteerd.

# HUB Fat

design front-end roxen cms

Opbouw van het component begint met een titel, introtekst en button. De titel en tekst komen van de pagina direct onder de landingpage. Daaronder staan in blokken de pagina’s die weer onder die pagina vallen. Je kunt met een HUB Fat dus een en twee niveau's dieper navigeren.

# Notes voor DEV

  • Component altijd 12 kolomsbreed

# Notes voor Content

  • Voor teksten: De teksten worden overgenomen van de onderliggende pagina’s
  • Voor koppen: De kop wordt overgenomen van de onderliggende pagina’s
  • Voor de fotografie: De fotografie wordt overgenomen van de onderliggende pagina’s

# Actiegrid

Grid bestaande uit 3 typen blokken:

  • Rood (ActieSteen SOLIDRED)
  • Zwart (ActieSteen SOLID)
  • Klikbare foto (Actiesteen IMAGE)
  • Foto met meerdere links (Actiesteen HUB)

# ActieSteen SOLIDRED

design front-end roxen cms

Bevat een titel, korte introtekst en een knop.

# ActieSteen SOLID

design front-end roxen cms

Bevat een titel, korte introtekst en een knop.

# ActieSteen IMAGE

design front-end roxen cms

Bevat een titel, introtekst, afbeelding en linkt door naar een pagina.

# ActieSteen HUB

design front-end roxen cms

Bevat een titel, introtekst, afbeelding en meerdere knoppen.

# Actionwall

design front-end roxen cms

Vrij rigide component, kan niet erg variëren in gebruik. Enkel voor gebruik direct onder de homepage hero. Er moeten altijd exact 3 fotoblokken zijn en altijd exact 3 kalender items, met teksten die exact passen. Het laatste fotoblok is direct gelinkt aan de kalender erboven, omdat de foto op mobiel verdwijnt en er een extra link verschijnt in plaats.

# Topic Grid

design front-end roxen cms

# Concept

Het Topic Grid bestaat uit een verzameling Topics (onderwerpen). Deze onderwerpen zijn voornamelijk ingangen naar een verzameling van pagina's die vallen binnen dat onderwerp, ook kunnen ze leiden naar een enkele contentpagina. De onderwerpen zorgen ervoor dat gebruikers snel en makkelijk kunnen kiezen waar zij denken dat informatie staat die zij zoeken.

# Notes voor Content

  • Schrijf maximaal drie woorden in de kop van een Topic.
  • Zorg ervoor dat de woorden in de kop van een Topic raakvlak met elkaar hebben.
  • Wanneer de kop van een Topic twee onderwerpen bevat, schrijf je een '&' teken tussen de woorden.
  • Wanneer de kop van een Topic drie onderwerpen bevat, schrijf je eerst een ',' en daarna een '&'.
  • Ieder woord dat binnen een Topic wordt afgebroken door een ',' of '&' schrijf je met een hoofdletter.
  • Vertel in de beschrijving welke contentpagina's er te vinden zijn onder dat onderwerp.

# Notes voor DEV

  • Het Topic Grid kent een minimum van 3 onderwerpen.
  • Het Topic Grid schaalt over de verticale as.
  • De ruimte onder een regel van het Topic Grid wordt bepaald door het langste Topic.
  • De kop van een Topic mag maximaal 3 woorden bevatten.
  • De beschrijving van een Topic is verplicht.
  • De beschrijving van een Topic mag maximaal 120 karakters bevatten (inclusief spaties).

# Taken grid

design front-end roxen cms

← News →