Webcomponenten, versie 2

Gebruik deze klasses op <a>, <button>, <input type="submit">, <input type="button"> elementen.

Volg de vooropgestelde HTML-structuur nauw, anders werkt deze component niet. De achterliggende native checkbox is visueel verborgen voor de gebruiker. Dit wordt opgevangen door custom styling op de span-tag die vlak na de native checkbox staat.

De datepicker wordt versterkt door Javascript, maar kan ook werken zonder Javascript.

Het attribuut data-datepicker initialiseert de datepicker. Het attribuut verwacht geen extra parameters.

Het attribuut data-datepicker-min laat toe een minimum datum in te stellen voor de datepicker. Het attribuut verwacht als parameter het formaat "DD.MM.YYYY".

Het attribuut data-datepicker-max laat toe een maximum datum in te stellen voor de datepicker. Het attribuut verwacht als parameter het formaat "DD.MM.YYYY".

Het attribuut data-datepicker-default laat toe een eigen datum in te stellen waarop de datepicker opent. Het attribuut verwacht als parameter het formaat "DD.MM.YYYY".

Om de datepicker te initialiseren via Javascript moet de functie vl.datepicker.dress(field); gebruikt worden. De field variabele is het input veld.

Om de huidige waarde van de datepicker op te halen via Javascript kan de functie vl.datepicker.getDate(field); gebruikt worden. De field variabele is het input veld.

De dubbele input wordt automatisch geïnitialiseerd wanneer de JS ingeladen is op basis van de klasse "js-double-input".

Om het dubbele input veld manueel te initialiseren via Javascript moet de functie vl.dressDoubleInput(field);gebruikt worden. De variabele "field" is het element met klasse "double-input".

Bij het gebruik van de 'esc'-toets wordt de originele data terug geplaatst.

Bij het gebruik van de 'enter'-toets wordt de ingevulde data als nieuw label toegevoegd. We raden aan om bij een enter-event de data op te slaan in de database.

Om het dynamic label automatisch te initialiseren moeten de js-* klassen (js-dynamic-label, js-dynamic-label__value, js-dynamic-label__toggle) voorzien zijn.

Het attribuut data-validate-form moet altijd aanwezig zijn op het <form> element. Plaats ook het novalidate attribuut op het <form> element om de standaard HTML5-validatie tegen te gaan.

Via het attribuut data-required="true" kunt u nakijken of een verplicht veld data bevat.

Alle andere validaties worden geïnitialiseerd door het attribuut data-validation-type, met de soort validatie als waarde.
Mogelijke validaties zijn:

• email
• iban
• date (xx.xx.xxxx)
• phone (Belgische telefoonnummers)
• rrn (rijksregisternummer)

Het is steeds mogelijk om eigen (front-end) validatie uit te voeren op het moment dat het formulier verstuurd wordt (submit).

Wanneer een veld ongeldig is wordt het data-attribuut data-has-error="true" toegekend aan het veld. Dit attribuut wordt toegekend bij een onblur en submit event.

Het is mogelijk een herkennings- en validatiepatroon toe te kennen aan een input veld. Het input veld krijgt via het data-attribuut "data-pattern" een voorgedefinieerde waarde mee.

IBAN: [data-pattern="iban"]
Rijksregisternummer: [data-pattern="rrn"]
Datum: [data-pattern="date"] (formaat = dd.mm.yyyy)
Ondernemingsnummer: [data-pattern="onr"]

De validator is gebouwd op basis van http://firstopinion.github.io/formatter.js/index.html. In de documentatie staat beschreven hoe er eigen validaties toegevoegd kunnen worden.

Pill closable variant heeft standaard geen functionaliteit. Die moet u zelf toevoegen.

Geef de stap waar de gebruiker zich bevindt een statische tooltip, zodat die zichtbaar blijft. De andere stappen kunnen een dynamische tooltip krijgen, zodat die zichtbaar wordt als de gebruiker met de cursor over het bolletje in de progress bar beweegt. 

Als de gebruiker los van het het proces makkelijk naar de verschillende stappen moet kunnen navigeren, moet elke stap een link bevatten.

Volg de vooropgestelde HTML-structuur nauw, anders werkt deze component niet. De achterliggende native radiobutton is verborgen voor de gebruiker. Dit wordt opgevangen door custom styling op de span-tag die vlak na de native radiobutton staat. 

Gebruik Javascript om de velden aan te vullen met een (grafische) schuifbalk.

Koppel .js-range__from aan het eerste input veld (from) om de input van het veld door te geven aan de Javascript-functie.

Koppel .js-range__from aan het tweede input veld (to) om de input van het veld door te geven aan de Javascript-functie.

Voorzie een lege div met .js-range__slider als enige klasse. Hier wordt de (grafische) schuifbalk weergegeven.

• [data-select] (required)
  • Initialiseer de component via het attribuut data-select. Zorg ook dat de correcte mark-up voor een select voorzien is. Bekijk het code-voorbeeld voor de correcte implementatie.
• [data-id]
  • Voorzie een data-id op het <select> element om de standaard en gegenereerde select op een toegankelijke manier aan elkaar te linken. Als geen data-id voorzien wordt, wordt een ID gegenereerd.
• <optgroup>
  • Optgroup support is aanwezig. Gebruik deze in de standaard select bij implementatie.
• [data-placeholder]
  • Voeg een leeg <option> element toe met het attribuut data-placeholder. Dit element wordt gebruikt als placeholder als er geen optie werd geselecteerd.
  • <option value="" data-placeholder>-- selecteer landen --</option>

Events

Bij het selecteren van een andere optie wordt er een custom change event 'vl.select.hasChanged' getriggered op die select. Een voorbeeld om het event op te vangen en de waarden te bekijken:

window.addEventListener('vl.select.hasChanged', function(e){
  console.log(e.target.value);
  console.log(e.target.innerHTML);
  console.log(e.target.options[e.target.selectedIndex].innerHTML);
});

Dynamisch ingeladen opties

Als de select meer dan 1000 records bevat is het goed om bij een zoekactie de data dynamisch in te laden via een achterliggende service. De select is hierop voorzien. Een callback wordt getriggerd wanneer een zoekactie plaats vindt. De functie verwacht een return van nieuwe zoekresultaten in JSON formaat.

Initialisatie

Door de verplichte callbackfunctie kan de dynamische select niet automatisch geïnitialiseerd worden. Voer volgende initialisatie in aan het einde van het document.

<script>

var select = document.getElementById('dynamic-select');

  vl.select.dress(select, {

     callbackFn: customFunction,

  });

function customFunction(select, params){

  var searchStr = params.searchStr;

  var jsonData = [

  {

  "type": "option",

  "label": "Dynamisch geladen record 1",

  "value": "1",

  },

  {

  "type": "option",

  "label": "Dynamisch geladen record 2",

  "value": "2",

  }

  ];

  // No records found

  params.callbackFn(false);

  // Records in JSON format

  params.callbackFn(jsonData);

}

</script>

Configuratie

Opties te definiëren in de parameters van de autocomplete

• calbackFn*: Callbackfunctie die wordt aangeroepen als er getypt wordt in het zoekveld. Elke keyup roept de eigen geschreven functie aan en verwacht een JSON object als returnwaarde. Een JSON record bevat steeds "type", "label" en  "value". Wanneer geen resultaten gevonden zijn geef je "false" terug als parameter in de callbackfunctie.
  • Type: altijd "option"
  • Label: Getoond als label in de record en bij selectie in het select veld
  • Value: Achterliggende waarde van het <option> element. Deze waarde wordt bij het versturen van een formulier verstuurd.
• noResultsFound: object()
  • title: (standaard: "Geen resultaten") Wanneer de returnwaarde false is wordt deze zin getoond

• De klasse "steps--has-line" voegt een lijn toe tussen de verschillende stappen. Dit helpt het lineaire karakter te benadrukken.
• Een stap kan benadrukt worden door de klasse "step--highlighted" toe te voegen.
• Een stap kan volledig aanklikbaar zijn door de klasse "step--clickable" toe te voegen en een "step__link" te voorzien.
• Een stap kan uitgeschakeld weergegeven worden door de klasse "step--disabled" toe te voegen.
• Een accordion kan toegevoegd worden aan een stap om meer inhoud te tonen. De steps gebruikt hiervoor de js-accordion functionaliteit.

De bestanden worden toegevoegd aan het vl.upload object van zodra de gebruiker ze toevoegt aan het uploadveld.

Het id-attribuut van de input, het for-attribuut van het label en de value van de input moeten overeenkomen. De waarde van die attributen wordt telkens in array formaat geschreven: naam[nummer].

Attributen

• data-vl-upload-allow-drop: drag en drop-functionaliteit. 
• data-vl-upload-full-body-drop: de volledige pagina wordt een uploadveld als er maar 1 uploadveld op de pagina staat.
• data-vl-upload-error-message-filesize: foutboodschap als het bestand te groot is.
• data-vl-upload-max-size: maximum bestandsgrootte.
• accept: lijst met bestandsextensies die aanvaard worden.

Browsersupport

• Internet Explorer 9: default uploadveld
• meeste bekende browsers: volledig ondersteund zolang de browser pointer events ondersteunt

Initialisatie

• vl.wizard.dress(wizard, params)
  • De wizard wordt niet automatisch geïnitialiseerd. Gebruik deze functie om de component te initialiseren. Zorg dat de correcte markup beschikbaar is.
  • params.callbackFn: eigen callbackfunctie die aangesproken wordt telkens de gebruiker navigeert naar een ander onderdeel van de wizard. Zie code voorbeeld voor de parameters binnen de callbackFn.

Toegankelijkheid & gebruikerservaring

Beperk het aantal stappen in een wizard tot maximum vier, en bij voorkeur drie. Door het aantal stappen te beperken blijft de gebruiker gemotiveerd om het formulier volledig in te vullen.

De accordion component wordt gebruikt om een DOM-element te tonen of verbergen. 

• Om de accordion te kunnen openen of sluiten kent de klasse .js-accordion__toggle een extra klasse toe (.js-accordion--open) aan zijn parent (.js-accordion) 
• Wilt u de accordion standaard open laten staan, dan gebruikt u de klasse .js-accordion-open. 

De div .accordion__content bevat de inhoud die getoond / verborgen zal worden.

De algemene animaties worden steeds via CSS uitgevoerd. Javascript wordt voornamelijk gebruikt om de klasse toe te kennen, te toggelen of te verwijderen.

Initialisatie

• vl.accordion.dressAll()
  • Wordt aangeroepen on-load en initialiseert alle Javascript om de accordion te initialiseren. Zorg dat de correcte markup beschikbaar is (.js-accordion, .js-accordion__toggle en .js-accordion__content)
• vl.accordion.dress(accordion)
  • Initialiseert één accordion met Javascript. Deze functie verwacht als attribuut het DOM-element waar standaard de .js-accordion klasse op geplaatst wordt (zie code-voorbeeld)

De data van de autocomplete wordt ingeladen via een database of een externe service. Het filteren van de records wordt zo aan de back-end afgehandeld, wat performanter en veiliger is. Tijdens het laden van de data krijgt de gebruiker een preloader te zien. Zo weet de gebruiker dat er iets aan het laden is. 

Het minimum aantal karakters dat de gebruiker moet ingeven kan worden vastgelegd via een data-attribuut.

Data-attributen

• [data-autocomplete] (verplicht)
  • Voeg het attribuut data-autocomplete toe aan het .js-autocomplete DOM element. Dit zorgt voor de initialisatie van de autocomplete.
• [data-min-chars="3"] 
  • Voeg het attribuut data-min-chars toe aan het .js-autocomplete DOM element. Geef het minimum aantal karakters in dat de gebruiker moet invullen in de autocomplete voordat de call naar de achterliggende service getriggered wordt. Standaard is dit 3 karakters.

Initialisatie

Voeg de Javascript initialisatie toe aan het eind van het document:

<script>

var autocomplete = document.getElementById('autocomplete');

  vl.autocomplete.dress(autocomplete, {

  callbackFn: callback

  });

function callback(autocomplete, params){

var jsonData = [

{

"title": "<mark>Dit</mark> is zonder subtitel",

"value": "Dit is een programmeertaal 1",

},

{

"title": "<mark>Dit</mark> is een programmeertaal 2",

"subtitle": "Dit is een subtitel van de programmeertaal",

"value": "Dit is een programmeertaal 2",

}

];

params.callbackFn(jsonData);

}

</script>

Configuratie

Opties te definiëren in de parameters van de autocomplete

• calbackFn*: Callbackfunctie die wordt aangeroepen wanneer er getypt wordt in het invulveld. Elke keyup roept de eigen geschreven functie aan en verwacht een JSON object als returnwaarde. Een JSON object bevat steeds "title", "value" en optioneel "subtitle". Return "false" als waarde in de callbackfunctie wanneer de autocomplete leeg is.
• hasGeolocation: (standaard: false) Voegt een geolocationveld toe aan de autocomplete.
• geolocation: array()
  • return*: argument of functie die de returnwaarde van de geolocatiebepaling bepaalt. Volgende opties zijn beschikbaar: "postal_code", "city", "formatted_address", "eigen functie"
  • placeholder: (standaard: "Mijn locatie") Geolocatie placeholder tekst gebruikt in de autocomplete
• noResultsFound: array()
  • title: (standaard: "Geen resultaten") Wanneer de returnwaarde false is wordt deze tekst getoond
  • subtitle: (standaard: "") Wanneer de returnwaarde false is wordt deze tekst getoond onder de "title". De subtitel bevat een kleiner lettertype dan de titel.

Events

Events worden tijdens het gebruik van de component bij verschillende acties uitgestuurd. U kunt van deze events gebruikmaken om een actie uit te voeren of de data die meegestuurd wordt te verwerken.

• vl.autocomplete.hasChanged
  • Wordt afgevuurd bij de het selecteren van een record in de autocomplete. De record inhoud kunt u via de variabele e.target.value capteren.
  • autocomplete.addEventListener('vl.autocomplete.hasChanged', function(e){
       console.log(e.target.value);
    });

Er is standaard geen sorteerfunctionaliteit aanwezig. De visuele mark-up wordt wel standaard voorzien. Voeg de modifier --sortable toe aan het header-title element. Wanneer de sorteerfunctie actief weergegeven wordt kan de modifier --sortable-active toegevoegd worden.

Zorg ervoor dat elke rij binnen de tabel de klasse .data-table__grouped-row bezit bij gebruik van een rowspan.

Plaats de tabel binnen een container met de klasse .u-table-overflow. Hierdoor wordt de tabel gebruiksvriendelijk op tablet/mobiel.

Om kolommen een vaste of procentuele breedte te geven kan een stijltag toegevoegd worden op de <tr> elementen. Gebruik dit enkel bij kolommen met een vaste inhoud (bijvoorbeeld een eerste rij met checkboxes).

Datatable actions

Boven (en bij grote tabellen ook onderaan) kan een een Actionsblock toegevoegd worden. Hier kunnen actieknoppen gekoppeld worden aan de tabel. 

• Linkerzijde:
  • Voeg aan de .data-table__action listitem het data-attribuut [data-table-action] en de correcte aria tags toe (zie code voorbeeld) om de button enkel zichtbaar te maken wanneer één of meerdere rijen in de tabel geselecteerd zijn. Hier worden standaard acties zoals "aanpassen" of "verwijderen" aan toegekend. Een exporteerfunctie (Exporteer als PDF) kan hier plaats vinden.
• Rechterzijde
  • Hier kan (optioneel) een knop toegevoegd worden die de tabel omzet in lijstformat (bijvoorbeeld in een Drilldown component).
• Bovenaan/onderaan
  • Voeg .data-table__actions–top of .data-table__actions--bottom toe aan het .data-table__actions DOM element zodat de juiste margins toegekend worden aan de bovenste en onderste actions.

Dev

• Data-attributes
  • [data-table]
    • Zorg dat het data-table attribuut als wrapper beschikbaar is rond de tabel, tabel acties en paginering zodat alle opties 
  • [data-row-selectable]
    • Voeg het data-row-selectable attribuut toe aan de tabelrijen <tr> om het selecteergedrag van de checkbox in de rij te evenaren door te klikken op het volledige element.
  • [data-table-checkbox]
    • Voeg het attribuut data-table-checkbox toe aan de checkboxes binnen de <tr> rij zodat het correcte selecteergedrag gebruikt wordt.
    • [data-table-checkbox-all]
      • Voeg het attribuut data-table-checkbox-all toe aan de checkbox in de <thead> om de "selecteer alle checkboxes" functionaliteit toe te voegen. Dit zorgt ervoor dat een snelle selectie van data mogelijk is en er performant kan gewerkt worden.
• Initialisatie
  • vl.datatable.dressAll()
    • Is de functie dat aangeroepen wordt on-load en alle JS initialiseert om de component te versterken en gebruiksvriendelijk te maken. Zorg dat de correcte markup beschikbaar is en het attribuut data-table op de datatable aanwezig is
  • vl.datatable.dress(datatable)
    • Is de functie dat één datatable inlaadt. Verwacht als attribuut het DOM element waar standaard het data-table attribuut op geplaatst wordt (zie code-voorbeeld)

Accessibility

Doorheen het code voorbeeld worden vaak <span> elementen met de klasse .u-visually-hidden gebruikt waar de werking van het element wordt uitgelegd. Deze is niet zichtbaar voor gewone gebruikers, maar wordt wel voorgelezen door screenreaders zodat ook blinden en slechtzienden de component makkelijk kunnen gebruiken.

Gebruik de functie vl.drawer.dressAll(); om alle drawers op de pagina te initialiseren. De functie wordt standaard on load aangeroepen.

Gebruik de functie vl.drawer.dress(field); om een drawer te initialiseren. field is het DOM element van de drawer ([data-drawer]).

De default drawer neemt de volledige breedte in, en moet dus buiten de layout-wrapper staan. De small variant moet binnen de layout-wrapper staan.

• [data-multiselect]*
  • Initialiseer de component via het attribuut data-multiselect. Zorg ook dat de correcte markup voor een multiselect voorzien is. Bekijk het code-voorbeeld voor de correcte implementatie.
• [data-search-empty="Geen resultaten gevonden"]
  • Het data-search-empty attribuut laat toe de standaard "geen resultaten gevonden" aan te passen als geen resultaten getoond worden in de multiselect na een zoekactie
• [data-id]
  • Voorzie een data-id op het <select> element om de standaard en gegenereerde select op een toegankelijke manier aan elkaar te linken. Als geen data-id voorzien wordt, wordt een ID gegenereerd
• <optgroup>
  • Optgroup support is aanwezig. Gebruik deze in de standaard multiselect bij implementatie.
• Placeholder
  • Voeg een leeg <option> element toe met het attribuut data-placeholder. Dit element wordt gebruikt als placeholder in de gegenereerde dropdown toggle wanneer geen elementen zijn geselecteerd.
  • <option value="" data-placeholder>-- selecteer landen --</option>

Initialisatie

On-load wordt op basis van het data-attribuut ([data-multiselect]) alle multiselect instanties geïnitialiseerd. 

Om één instantie te initialiseren kan gebruik gemaakt worden van vl.multiselect.dress(field); field is het DOM element met data-attribuut [data-multiselect]

De klasse .js-popup__toggle kent een extra klasse toe (.js-popup--open) aan zijn parent (.js-popup) om de pop-up te kunnen openen of sluiten.

De algemene animaties worden steeds via CSS uitgevoerd. Javascript wordt enkel gebruikt om de klasse toe te kennen, te toggelen of te verwijderen.

Standaard wordt de popover rechts gealigneerd met het element met de popover-klasse. Door de modifiers popover--left en popover--center toe te voegen kan de alignering gewijzigd worden.

Webtoegankelijkheid

Gebruik in de knop steeds visueel onzichtbare tekst, zo kunnen gebruikers met een visuele beperking de knop steeds correct interpreteren.

De loader zal een inline-block element vormen. We raden aan om dit element in een grote context te centreren met behulp van onze utility classe "u-align-center"

Webtoegankelijkheid

Voeg, zoals in de Codepen hierboven, een boodschap toe aan de loader. De klasse "u-visually-hidden" zal er voor zorgen dat deze boodschap niet zichtbaar is op het scherm.

• De verschillende JavaScript-klassen worden gebruikt om de juiste interactie tussen de options en de slots te voorzien. Neem dit dus exact over.
• Wanneer JavaScript geactiveerd is, worden ook de nodige aria-tags toegevoegd.  
• Wanneer een option geselecteerd wordt, wordt de informatie uit de option automatisch overgezet naar het bijhorende slot. 
• Een option kan ook uitgeschakeld zijn, bijvoorbeeld wanneer de sessie volzet is. Geef hiervoor in standaard HTML syntax mee dat de radiobutton uitgeschakeld (disabled) is. Gebruik een pill om aan te geven waarom de option uitgeschakeld is.
• Om een gebruiker meerdere options te geven in een slot (bv. inschrijven voor 2 sessies in 1 tijdsslot), moet u werken met checkboxes in plaats van radiobuttons. 
• Een slot--disabled dient voor de weergave van niet-interactieve info en is dus ook niet aanklikbaar. Voorzie hier dan ook geen JavaScript-classes.
• Gebruik de typography hulpklasses om typografische elementen toe te voegen aan de options. 
• Gebruik scheduler--slot-select om het slot te selecteren in plaats van de inhoud.
• Gebruik scheduler--double-select om het slot en de inhoud variabel te maken en te laten selecteren door de gebruiker.

Toegankelijkheid

De Enter-toets kan gebruikt worden om een zoekopdracht te starten. Er moet wel altijd een zichtbare knop zijn om de zoekopdracht uit te voeren. 

Het veld moet voorzien zijn van een duidelijk label of een beschrijvende tooltip (het title-attribuut). 

Gebruik bij voorkeur het input 'type=search' veld. 

De inline variant toont enkel een vergrootglas. Dit wordt bijna universeel herkend als aanduiding van een zoekveld, en moet dan ook niet vergezeld worden van het woord 'zoek'. De knop bevat wel deze tekst voor screenreaders, maar de tekst wordt via CSS verborgen. 

De "show on checked"-component wordt gebruikt om een DOM-element te tonen of verbergen wanneer een checkbox of radiobutton binnen een formulier de waarde "checked" heeft. De klasse .js-show-checked wordt toegekend aan het DOM-element dat getoond of verborgen moet worden.

De algemene animaties worden steeds via CSS uitgevoerd. Javascript wordt voornamelijk gebruikt om de klasse toe te kennen, te toggelen of te verwijderen

data-show-checked="true" wordt gebruikt om de status te veranderen wanneer de checkbox of radiobutton getoggled wordt: true = checked state, false = unchecked state.

data-show-checked-trigger="target" heeft dezelfde waarde als het data-attribuut data-show-checked-trigger dat zich bevindt op het te tonen DOM element.

data-show-checked-target="target" heeft dezelfde waarde als het data-attribuut data-show-checked-target dat zich bevindt op de te toggelen radiobutton of checkbox.

Technisch:

• div[data-show-on-select-wrapper]*
  • Div die toegevoegd wordt rond het select element en de getoggelde inhoud.
  • [data-id]
    • Optioneel toe te voegen aan de wrapper, bij afwezigheid wordt een unieke ID gegenereerd
• [data-show-on-select]*
  • data-attribuut die toegevoegd wordt op het select element
• [data-show-on-select-option]*
  • data-attribuut die toegevoegd wordt op het option element. Wanneer deze option geselecteerd is wordt de gelinkte inhoud getoond
  • [data-target]*
    • Uniek target-id dat toegevoegd wordt op het option element om de option te linken met de inhoud
• div[data-show-on-select-content]*
  • Div die toegevoegd wordt met data-attribuut, hier wordt de extra inhoud in geplaatst
  • [data-hook]*
    • data-attribuut die gelijk moet zijn met [data-target] van het option element

Voorzie de standaard slider steeds binnen een grid element. De vorige- en volgende call-to-actions worden toegekend voor en achter de slider.

Als er geen Javascript aanwezig is wordt een horizontale scroll voorzien op de slider-container.

De slider kan verschillende types content bevatten, van doormat tot afbeelding. In het voorbeeld wordt een slider met publicaties gebruikt. Om de inhoud van de slider op een grid te tonen moeten de nodige grid-classes toegevoegd worden op de slider__slides container. Ook equal height kan hier toegepast worden.

Toegankelijkheid

Gebruik een titel om aan te geven dat er een slider volgt. Deze titel kan eventueel verborgen worden. 

Het sticky element verdwijnt uit beeld zodra de omvattende layout of region volledig uit beeld scrollt.

Het attribuut "data-sticky-offset-top" kan gebruikt worden om de offset ten opzichte van de bovenkant van het scherm in te stellen.

Voeg de klasse 'subscribe__toggle--active' toe om de toggle aan te zetten (checked).

Plaats altijd de klasse js-tag-input op een input veld. Dit zorgt ervoor dat het input veld vervangen wordt door een tag input. De tags worden dan als verborgen velden toegekend aan het initiële input veld (met de hulp van een array). De data kan dus via het standaard input veld opgehaald worden.

• vl.input.taginput.dressAll(): 
  • initialiseert alle taginput componenten. Deze functie wordt ook on-load uitgevoerd.
  • Gebruik deze functie enkel wanneer nieuwe pagina’s asynchroon ingeladen worden en de standaard on-load functionaliteit niet getriggerd wordt (bijvoorbeeld in een angular of react omgeving).
• vl.input.taginput.dress(field) initialiseert één taginput component. De field variabele is het input veld

Gebruik de toggle altijd samen met de accordion. Voeg de toggle-klasse (vb. toggle--plus-minus) toe aan hetzelfde object als de klasse js-accordion__toggle.

De tekst die de toggle weergeeft kan aangepast worden naargelang de status van de toggle (open / gesloten). Voeg een span aan de toggle toe met klasse ".js-accordion__toggle__text" en 2 data attributen: data-accordion-open-text en data-accordion-close-text. Data-accordion-open-text wordt getoond als de toggle geopend wordt, data-accordion-close-text als de toggle gesloten wordt. De tekst wordt enkel aangepast na het klikken op de toggle. Voeg dus ook nog een tekst toe die wordt getoond bij het laden van de component.

Toegankelijkheid

Gebruik een button om te navigeren. Een toggle wordt enkel gebruikt om acties te triggeren, niet om te navigeren. (Zie code voorbeeld)

De tooltip wordt standaard geïnitialiseerd door middel van data attributen maar kan ook, indien nodig, via Javascript getoond worden. De tooltip wordt telkens bij een hoverstate getoond.

• [data-toggle="tooltip"] initialiseert de tooltip op het element.
• [data-content=""] De content van de tooltip verwacht een string waar HTML en CSS van gestript zijn. Als de inhoud langer is dan een bepaald aantal karakters wordt de opmaak van de tooltip aangepast zodat de tekst optimaal weergegeven wordt.
• [data-placement=""] De tooltip kan zowel boven (top), links (left), rechts (right) en onder (bottom) het element waarover het meer informatie geeft, getoond worden.

Webtoegankelijkheid

Voeg de tekst die in de tooltip verschijnt, zonder opmaak, toe aan het title-attribuut. Zo is de tekst ook duidelijk voor gebruikers met een visuele beperking, én voor bezoekers die alleen hun toetsenbord gebruiken.

Logo

Om te bepalen welk logo u gebruikt in de content header volgt u de principes van de huisstijl. Technisch moet u met de volgende zaken rekening houden:

• Een logo of combinatie van logo's kan best gewrapped worden met een div met de klasse "content-header__logo-wrapper"
• Wanneer u in de content-header een leeuwenlogo met schuine streep gebruikt, moet u de klasse "content-header--has-logo" toevoegen. Dit zorgt voor betere leesbaarheid en kleurgebruik.
• De verschillende varianten van het entiteitenlogo kunt u verkrijgen door volgende klassen toe te passen op <h1 class="content-header__entity-logo">:
  • "content-header__entity-logo--right"
  • "content-header__entity-logo--black"
  • "content-header__entity-logo–serif"
  • "content-header__entity-log--lowercase"

Vormgeving

• De inhoud van content-header__bg is opgebouwd volgens het principe van responsive image. Duidelijke richtlijnen kunt u hier terugvinden: http://scottjehl.github.io/picturefill/. 
• De JS bevat de picturefill library zodat er een fallback is voor oudere browsers. Onze implementatie is slechts een gebruiksvoorbeeld. U kunt hierin nog veel verder gaan, of u kunt enkel gebruik maken van een img-tag.
• Om de halve achtergrond te gebruiken moet u de klasse "content-header--half-image" toevoegen aan de content-header.

Algemeen:

• De content header wordt standaard verborgen op mobiel. Indien u deze toch wil tonen op mobiele schermen (wanneer deze bijvoorbeeld de paginatitel bevat) voegt u de klasse "content-header--show-mobile" toe.
• Plaats de klasse "content-header--alt" op de content header om alternatief kleurgebruik toe te passen (wisselen van achtergrondkleur van entiteitenlogo en navigatie)

Titels worden opgemaakt volgens de verkregen klasse. Gebruik deze klasses om semantisch correcte HTML een andere opmaak te geven (bv. een H4 met de opmaak van een H1).

Het agenda item heeft een minimum-hoogte zodat er altijd genoeg plaats is om de datum te tonen.

Voeg de klasse .agenda-item--no-link toe aan het element voor de titel klikbaar-variant. 

Accessibility

Beperk de description tot 2 lijnen met een data-clamp-"2".

Voeg een div alert__actions toe na de tekst (alert__message) binnen de container (alert__content) om een button toe te voegen onder het bericht. Deze div zorgt voor de correcte spatiëring tussen tekst en button.

Een icoon is niet verplicht. Voor de CTA variant raden we aan om het icoon weg te laten. Door aan het icoon aria-hidden="true" toe te voegen, zullen screenreaders de iconen overslaan om vreemd gedrag te voorkomen.

De badge bestaat uit vier groottes. --s, --m (standaard), --l en --xl. De afbeelding, icoon of tekst schaalt mee met de grootte van de badge.

De badge kan als alleenstaande component gebruikt worden, of in combinatie met andere componenten. De infotext-component is hiervan een voorbeeld.

Pas de klasse .bullet-list (+ gepaste modifier) toe op een UL en de klasse .bullet-list__item  op een onderliggende LI.

Gebruik geen lijst als er slechts 1 item in de lijst zou staan. In dit geval kunnen de tags omgezet worden naar DIV-tags.

Zorg er steeds voor dat de microdata voorzien in het code-voorbeeld (http://schema.org) geïmplementeerd wordt. Wanneer er eigen elementen toegevoegd worden aan de contact card moet u controleren of er itemprops beschikbaar zijn. U vindt een overzicht van de verschillende itemprops op schema.org.

U moet zelf een Google Maps API key aanvragen en invullen in de code. Per key kunt u een bepaald aantal kaarten per dag laden. Daarna moet u betalen. Omwille van deze beperking delen wij onze key niet, en moet u zelf 1 aanvragen. 

Om een locatie weer te geven op de kaart moet u de attributen "data-lat" en "data-lng" invullen. Hier vult u de coördinaten (latitude en longitude) in van de locatie die u wilt tonen.

Daarnaast moet u ook de url naar de Google Map toevoegen. De url vindt u door het adres in te geven op Google Maps. De url vult u dan in op:

<div class="map__static-card">
                    <a href="https://maps.google.com?q=Koning%20Albert%20II-laan%2035%2C1030%20Brussel" target="_blank">

en

<div class="map__interactive-card js-interactive-card" data-lat="50.8626661" data-lng="4.3591373"></div>
                  <a class="map__enlarge" href="https://maps.google.com?q=Koning%20Albert%20II-laan%2035%2C1030%20Brussel" target="_blank">

Om de statische map te tonen, moet u die map eerst genereren. Vul de API key en het adres in. 

Kopieer de gegenereerde code naar de src in 

<img itemprop="image" target="_blank" src="https://maps.google.com/maps/api/staticmap?center=50.8626661%2C4.3591373&zoom=15&sensor=false&markers=50.8626661%2C4.3591373&scale=1&key=AIzaSyCrXvq-_E69REM-zFK0P90jyYBg5t7Ao4E&size=399x226&style=feature%3Aadministrative%7Celement%3Aall%7Cvisbility%3Aoff&style=feature%3Aadministrative%7Celement%3Alabels.text.fill%7Cvisibility%3Aon%7Ccolor%3A%23444444&style=feature%3Alandscape%7Celement%3Aall%7Cvisibility%3Aon%7Ccolor%3A%23ebecef&style=feature%3Apoi%7Celement%3Aall%7Cvisibility%3Aoff&style=feature%3Apoi.park%7Celement%3Aall%7Cvisibility%3Aon%7Ccolor%3A%23c4da7b&style=feature%3Aroad%7Celement%3Aall%7Csaturation%3A-100%7Clightness%3A50%7Cvisibility%3Asimplified%7Cgamma%3A1&style=feature%3Aroad%7Celement%3Ageometry%7Cvisibility%3Aoff&style=feature%3Aroad%7Celement%3Alabels%7Cvisibility%3Aoff&style=feature%3Aroad%7Celement%3Alabels.text%7Cgamma%3A0.54&style=feature%3Aroad.highway%7Celement%3Aall%7Cvisibility%3Asimplified&style=feature%3Aroad.highway%7Celement%3Ageometry%7Cvisibility%3Asimplified%7Ccolor%3A%23cbd2da&style=feature%3Aroad.highway.controlled_access%7Celement%3Aall%7Cvisibility%3Asimplified&style=feature%3Aroad.highway.controlled_access%7Celement%3Alabels.icon%7Cgamma%3A0.58&style=feature%3Aroad.arterial%7Celement%3Aall%7Cvisibility%3Asimplified&style=feature%3Aroad.arterial%7Celement%3Ageometry.fill%7Cvisibility%3Aon&style=feature%3Aroad.arterial%7Celement%3Ageometry.stroke%7Cvisibility%3Aon%7Ccolor%3A%23cbd2da&style=feature%3Aroad.arterial%7Celement%3Alabels.text.stroke%7Cvisibility%3Asimplified&style=feature%3Aroad.arterial%7Celement%3Alabels.icon%7Cvisibility%3Aoff&style=feature%3Aroad.local%7Celement%3Aall%7Cvisibility%3Asimplified&style=feature%3Aroad.local%7Celement%3Ageometry.fill%7Cvisibility%3Aon&style=feature%3Aroad.local%7Celement%3Ageometry.stroke%7Cvisibility%3Aon%7Cgamma%3A7.17%7Ccolor%3A%23cbd2da&style=feature%3Atransit%7Celement%3Aall%7Cvisibility%3Aoff&style=feature%3Awater%7Celement%3Aall%7Ccolor%3A%23bfdfe9%7Cvisibility%3Asimplified"
                        alt="">

Geef de description data een logische betekenis door microdata van schema.org toe te voegen.

Beperk de titel tot 2 lijnen door middel van de data-clamp functionaliteit. De tekst in het label is aanpasbaar, maar zal maximaal 4 tekens goed weergeven.

De lightbox wordt opgebouwd met behulp van de photoswipe library (http://photoswipe.com/documentation/api.html). Alle instellingen worden door de component afgehandeld.

Voeg het data attribuut "data-lightbox-item" toe aan een foto binnen een "js-lightbox" om het te kunnen vergroten in een lightbox. Als de foto's in dezelfde "lightbox" zitten kan de bezoeker tussen de afbeeldingen navigeren.

Plaats het attribuut "data-lightbox-item" op een overkoepelende link met als bron de originele afbeelding. Voeg ook een data-attribuut "data-size" toe, met de afmetingen van de originele afbeelding. Dit is nodig voor het zoom-effect. Afhankelijk van de variant moet deze link een thumbnail bevatten met de correcte afmetingen voor elke specifieke positie. De link moet ook een element met klasse "js-lightbox-caption" bevatten. Dit wordt gebruikt als onderschrift in de lightbox.

Teaser

Er kunnen meer afbeeldingen in een teaser zitten dan dat er thumbnail-posities zijn. In dat geval moeten de resterende afbeeldingen in een div met data-attribuut "data-lightbox-images" geplaatst worden. Deze afbeeldingen hebben geen thumbnail nodig. De andere attributen (size , href, ... ) en inhoud (caption) moet wel aanwezig zijn.

Gebruik de teaser in het grid "col--1-2 col--1-1--s"

Slider

De slider__item-elementen moeten ook de klasse "gallery__item" bevatten voor correcte weergave.

Gebruik de slider over de volledige grid-breedte.

Accessibility

Gebruik een correcte schema.org opmaak voor afbeeldingen die gerelateerd zijn aan de content van de pagina. 

Teaser A

Ideale afmetingen van de thumbnails per positie:

1: 296x191

2: 296x191

3: 200x200

4: 200x200

5: 200x200

Voorzie ook een 2x variant voor retina-schermen.

Teaser B

Ideale afmetingen van de thumbnails per positie:

1: 590x380

2: 200x200

3: 200x200

4: 200x200

Voorzie ook een 2x variant voor retina-schermen. 

Teaser C

Ideale afmetingen van de thumbnails per positie:

1: 400x600

2: 200x200

3: 200x200

4: 200x200

Voorzie ook een 2x variant voor retina-schermen.

Slider met lightbox

Ideale afmetingen van de thumbnails:

200x200

Slider inline

Plaats een viewer met klasse "js-gallery__viewer" binnen een element met klasse "js-gallery". Als de gebruiker klikt op een item met data-attribuut "data-viewer-item" wordt de afbeelding hierdoor vergroot.

Een infoblock kan enkel in een standaard region gebruikt te worden, niet in een region--alt.

Voor de tekst in de component wordt steeds de volledige breedte voorzien, maar wordt er meestal maar 130px gebruikt. Om dit te voorkomen kan de class js-infographic__value toegekend worden aan de bovenste tekst. Javascript berekent vervolgens de breedte van het element en past de tekstgrootte aan volgens de grootte van de container.

Wij voorzien enkel de opmaak van de Instagram feed. U moet zelf zorgen voor de koppeling met Instagram.

Een overlay kan getoond worden door gebruik van de klasse .overlay. Om de overlay terug te verbergen kan de klasse .overlay--hidden worden toegekend.

Standaard wordt een modal dialog als fixed weergegeven, en verschijnt het venster boven alle andere content. In het codevoorbeeld wijken we hier van af om zowel het venster als de achterliggende tekst te laten zien. De klasse .modal-dialog--static moet verwijderd worden bij het gebruik van deze component.

Gebruik equal height wanneer de news teaser in een grid gebruikt wordt. Hierdoor zijn de lijntjes langs de teasers even hoog.

Respecteer de volgorde van de interne componenten voor een correcte opmaak.

Gebruik aspectratio 2:1 voor de afbeeldingen van de news teaser. Zo worden ze het mooist getoond. 

Accessibility

In het code-voorbeeld is een voorbeeld van microdata geïmplementeerd. Deze microdata is niet verplicht, maar wel sterk aangeraden.

News teaser video

Voeg de klasse "news-teaser--is-video" toe.

News teaser tweet

Voeg de klasse "news-teaser--is-tweet" toe.

News teaser publication

Voeg de klasse "news-teaser--is-publication" toe.

Voeg de large modifier toe om de afbeelding groter weer te geven bij de person large-variant. 

Het properties element moet minimaal 8 cols breed zijn. Het is mogelijk om twee kolommen met property-data te bezetten waarbij elke kolom 50% van de containerbreedte inneemt.

We raden aan om microdata te implementeren. Op de website van schema.org vindt u een lijst van gestandaardiseerde itemprops voor de zoekresultatenpagina.

De div .share-buttons zorgt voor de juiste positionering en opmaak van de knoppen.

Bij het toevoegen van deze knoppen is het ook belangrijk om de juiste metatags mee te nemen:

<!-- Social media sharing tags -->

<meta property="og:title" content="Title Here" />

<meta property="og:url" content="http://www.vlaanderen.be/" />

<meta property="og:image" content="http://www.vlaanderen.be/share-image.png" />

<meta property="og:image:width" content="1200" />

<meta property="og:image:height" content="628" />

<meta property="og:description" content="Description Here" />

<meta property="og:site_name" content="Site Name, i.e. Moz" />

<!-- twitter specific -->

<meta name="twitter:card" content="summary_large_image">

<meta name="twitter:site" content="@publisher_handle">

<meta name="twitter:title" content="Page Title">

<meta name="twitter:description" content="Page description less than 200 characters">

<meta name="twitter:creator" content="@author_handle">

<meta name="twitter:image:src" content="http://www.vlaanderen.be/share-image.png">

Zorg er ook voor dat afbeeldingen op uw website de juiste grootte hebben om goed gedeeld te worden op de verschillende netwerken. Meer informatie over de verschillende groottes vindt u op http://makeawebsitehub.com/social-media-image-sizes-cheat-sheet/

Een teaser wordt steeds gebruikt in een grid met 2 kolommen.

Voor een consistente layout binnen de teaser moeten alle HTML-tags verwijderd worden van de inhoud.

Teaser alt

Voeg de klasse "teaser–alt" toe aan de teaser.

Wij voorzien enkel de opmaak van de Twitter timeline. U moet zelf zorgen voor de koppeling met Twitter. 

De video player is gebaseerd op Plyr (https://plyr.io). Plaats de player in een div met klasse video-player. Dit zorgt voor de nodige opmaak. De player wordt aangesproken door JavaScript om de juiste elementen te genereren (op basis van de Plyr library).

HTML5 video player

De HTML5 video player bevat een standaard HTML5 video met de standaard instellingen.

External video player

De externe video player een div met volgende data-attributen:

• data-type: "youtube" of "vimeo"
• data-video-id: bevat de volledige URL van de externe video of de ID van de video op de externe site

Data-attributen

• [data-search]
  • Standaard wordt de search functionaliteit toegevoegd aan de component. U kunt deze functionaliteit verwijderen door data-search="false" toe te voegen op het DOM element met het attribuut data-tabs
• [data-search-ph]
  • Als de search functie actief is kan een placeholder voor het zoekveld ingesteld worden via het data-attribuut data-search-ph
• [data-search-no-results="Geen resultaten gevonden"]
  • Als er geen zoekresultaten zijn, wordt standaard "Geen resultaten gevonden" getoond. Dit kan aangepast worden via data-search-no-results=""

Gebruik de functie vl.drilldown.dress(field); om een drilldown te initialiseren. field is het DOM element van de drilldown ([data-drilldown]).

Zonder Javascript is deze component niet bruikbaar.

De data-attributen "data-hero-index" moeten overeenkomen op de div met klasse "js-hero-navigation-background" en "js-hero-navigation-link". De achtergrond kan inline toegevoegd worden zoals in de demo, maar deze kan ook via CSS gezet worden.

.link-list__item--no-border

De --bordered variant kan per element overschreven worden via de klasse .link-list__item--no-border.

Gebruik .link om een <button> visueel te stijlen als een link. 

Eigen icoon uit iconfont

Het is mogelijk om een ander icoon uit het iconfont te gebruiken als icoon bij de link.

Plaats het icoon voor of achter het element:

<a href="#" class="link–icon"><i class="vi vi-book" aria-hidden></i> Label van de link</a>

Zorg er steeds voor dat "aria-hidden" toegevoegd wordt op het icoon, zodat het niet kan geïnterpreteerd worden als een karakter bij het gebruik van een screenreader.

Gebruik de klasse u-hidden-mobile om elementen te verwijderen in mobiele weergaves.

Gebruik bij voorkeur een 'Laad meer'-knop voor een lange lijst.

Gebruik de klasse pager__list–right op pager__list om de de paginanummering te aligneren aan de rechterzijde. Dit wordt voornamelijk gebruikt in de datatable component.

Functies

De side-navigation functionaliteiten worden on-load geïnitialiseerd bij gebruik van de juiste klassen en data-attributen. Volgende functies zijn ook publiek beschikbaar:

• vl.scrollspy.dress(scrollspyWrapper);
  • Verwacht als attribuut de scrollspy wrapper (.js-scrollspy)
• vl.scrollspy.dressAll();
  • Initialiseert alle scrollspy instanties op de pagina

Technisch

Een side navigation werkt steeds samen met de inhoud binnen éénzelfde .region element. De sticky- en scrollspy functionaliteit start bij de bovenkant en stopt bij de onderkant van het .region element. Voorzie steeds volgende klasses en attributen voor een goede werking:

• Sticky
  • .js-sticky*: is de container rond de side navigation, initialiseert de component
  • [data-sticky-offset-top]: (standaard 75) De afstand van de side navigation vanaf de bovenkant wanneer sticky functionaliteit aanwezig is
• Scrollspy
  • .js-scrollspy*: is de container rond de side navigation, initialiseert de component (zelfde container als .js-sticky)
  • .js-scrollspy__content*: is de container rond de inhoud naast de side navigation. Zorgt ervoor dat de knop op mobiel op de juiste plaats wordt getoond
  • [data-scrollspy-mobile]*: Verwacht een string. Wordt gebruikt als label voor de toggle knop die de navigatie toont op mobiel
• Submenu's: Bij het gebruik van een submenu in de side navigation dienen volgende data-attributen aanwezig te zijn
  • [data-child]: staat op de anchor tag van het overkoepelend lijst element en communiceert met de submenu elementen, hoort steeds dezelfde value te bevatten als [data-parent]
  • [data-parent]: staat op de anchor van een submenu element, hoort steeds dezelfde value te bevatten als [data-child]

Initialisatie

Als Javascript ingeladen is, worden alle elementen met de klasse "js-sticky-bar" geïnitialiseerd. Indien er achteraf nog de nood is om een of meerdere sticky bars te initialiseren kan men gebruik maken van volgende globale functies:

• vl.stickyBar.dress(element) => deze functie initialiseert de specifieke sticky bar.
• vl.stickyBar.dressAll() => deze functie zal elke sticky bar die nog niet geïnitialiseerd is, initialiseren.

Accessibility

Omdat deze component geen meerwaarde biedt voor slechtzienden en de sticky bar terugkerende content bevat, raden we aan om de aria-tag aria-hidden="true" toe te voegen. Op deze manier zal de readspeaker hier geen notie van nemen.

Op de buttons / links die hieraan toegevoegd worden raden we aan om tabindex="-1" toe te voegen, zo zal deze inhoud niet in de tab-volgorde voorkomen.

Configuratie

Het data-attribuut "data-sticky-bar-trigger" geeft aan welk item er voor zal zorgen dat de sticky bar tevoorschijn komt. Op dit element dient het attribuut "data-sticky-bar-id" te staan met dezelfde waarde.

Standaard gaat de sticky bar op zoek naar een implementatie van de Global header. Indien hij deze vindt zal dit element gebruikt worden als basis om de sticky bar onder te kleven. Hierdoor vermijden we dat de bar bovenop of achter de global header staat. Indien dit niet gevonden wordt, zal de bar bovenaan het scherm staan.

Styling

De klasses sticky-bar__item zorgen ervoor dat de content mooi in lijn getoond wordt en de nodige ruimte opneemt. Als men hieraan ook de klasse sticky-bar__title toevoegt, zal de nodige titel-styling toegepast worden.

Functies

• On-load
  • Alle Tabs instanties met de correcte data-attributen (zie code-voorbeeld) worden bij het laden van de pagina geïnitialiseerd
• vl.tabs.dress(element);
  • Gebruik deze functie van een nieuwe show-on-select instantie wanneer deze asynchroon toegevoegd wordt op de pagina.
  • @element: DOM element met het [data-tabs] attribuut
• vl.tabs.dressAll();
  • Initialiseert alle Tabs instanties. Deze functie wordt ook on-load uitgevoerd.
  • Gebruik deze functie enkel wanneer nieuwe pagina’s asynchroon ingeladen worden en de standaard on-load functionaliteit niet getriggerd wordt (bijvoorbeeld in een angular of react omgeving).

Classes

• .tabs--alt
  • Bij het gebruik van de Alt versie moet op de bovenliggende .region de klasse .u-no-overflow toegekend worden. Dit voorkomt een overflow en dus een horizontale scroll.
  • Bij het gebruik van de Alt versie moet op de bovenliggende .region de klasse .region--no-space-top toegekend worden. Dit verwijdert de marge tussen de Header en de Tabs component.

Data-attributen

• [data-tab] (required)
  • Voeg het attribuut samen met een unieke ID toe aan alle .tab__link elementen.
• [data-tab-pane] (required)
  • Voeg het attribuut toe aan alle .tab__pane elementen. Deze zorgt, samen met het [data-tab] en [data-tab-list] attribuut, voor de Javascript functionaliteit.
• [data-tab-list] (required)
  • Voeg het attribuut toe aan het .tabs DOM element. Deze zorgt, samen met het [data-tab] en [data-tab-pane] attribuut, voor de Javascript functionaliteit.
• [data-active="data-active="tab-2-nummer-3"]
  • Voeg het attribuut, samen met het ID van het tab element dat actief moet worden, toe aan het .tabs DOM element wanneer een standaard tab actief moet staan on-load. 
  • Voeg de klasse .tab–active toe aan het actieve li-element in de tabs
• [data-tabs-responsive-label="Navigatie"]
  • Voeg het attribuut toe aan het DOM element met het [data-tabs] attribuut.
  • Wanneer geen optie geselecteerd is in het dropdown menu (op mobiel) wordt het ingevulde label getoond. Standaard is dit "Navigatie".

Usability

• Duidelijke labels: gebruik korte omschrijvende labels om te navigeren tussen de verschillende tabs. Beperk het label tot twee woorden. Korte labels zijn nl. sneller leesbaar.
• Gebruik niet enkel hoofdletters: labels met enkel hoofdletters zijn moeilijker te lezen. Ze worden door een screenreader voorgelezen als bv. E-E-N-T-A-B. 
• 1 rij met tabs: beperk het aantal tabs tot één rij. Plaats de tabs steeds boven de tab inhoud.

Alle elementen die zich binnen het .js-equal-height-container element bevinden, en de klasse .js-equal-height hebben, krijgen dezelfde hoogte.

Als de elementen op mobiele weergaves geen gelijke hoogte moeten hebben, kan de klasse .u-mobile-no-equal-height toegevoegd worden aan de .js-equal-height elementen.

Layout

De layout wrapper wordt steeds als overkoepelende container gebruikt voor de componenten op de pagina. De maximale breedte van de wrapper is 1280px.

Kolommen

Het grid is opgebouwd uit 12 kolommen, die evenredig verdeeld zijn over de beschikbare breedte. Een element in een grid bestaat uit minimaal 1 kolom (.col--1-12) en maximaal 12 kolommen (.col--12-12). 

Kolommen kunnen ook gedefinieerd worden met procentuele breedtes: .col--x-2, .col--x-3, .col--x-4, .col--x-6. Een element dat de helft van de container inneemt kan gedefinieerd worden door de klasse .col--6-12, maar ook door .col--1-2.

Responsive

Als een verschillende breedte moet toegepast worden op een kolom bij een tablet/mobiele weergave kan de andere breedte toegevoegd worden aan het element met de modifier

• --xl (groter dan 1600px)
• --l (kleiner dan desktop)
• --m (kleiner dan tablet)
• --s (kleiner dan (grote) mobiele apparaten)
• --xs (kleiner dan (kleine) mobiele apparaten)

Een gridelement dat als 1/4 moet weergegeven worden op desktop, 1/2 op tablet en op volle breedte op mobiel ziet er als volgt uit: <div class="col--1-4 col--1-2--m col--1-1–s">...

Offset

Een gridelement kan ook werken met een offset. Zo kan een element dat de helft van de breedte inneemt toch centraal uitgelijnd worden binnen de container. Het element ziet er dan als volgt uit: <div class="col--6-12 push--3-12">...</div> Push classes zijn ook uitbreidbaar met de responsive modifiers: --xl (groter dan 1600px), --l (kleiner dan desktop), --m (kleiner dan tablet), --s (kleiner dan (grote) mobiele apparaten), --xs (kleiner dan (kleine) mobiele apparaten) Hierdoor wordt de uitlijning enkel toegepast in bepaalde weergaves.

Push Reset

De .push--reset class wordt gebruikt om de geïnitialiseerde push--x-y te verwijderen. Dit kan gebruikt worden in combinatie met de responsive modifiers (--l, --m, --s, --xs). Een gridelement dat op desktop niet de volledige breedte inneemt en gecentreerd wordt met de hulp van push--x-y, maar de volledige breedte inneemt op tablet en kleinere schermen ziet er als volgt uit: <div class="col--6-12 push--3-12 col--1-1--m push--reset–m">...

Technisch

Plaats een icon op een i-tag met klasse "vi" en de klasse van het gewenste icon. Hierdoor wordt op het :before element een icon toegepast.

In verschillende componenten worden de icons ook op andere manieren gebruikt. Dit kunt u gewoon overnemen.

Badges moeten steeds gepaard gaan met een size. 

Het icoon kan ook op het :after pseudo element toegekend worden. Gebruik hiervoor de modifier --after op de klasse van het icoon.

<i class="vi vi-check--after" aria-hidden="true"></i>

Accessibility

Gebruik het attribuut "aria-hidden='true'" wanneer u een icon toepast op een enkel element (vb. op een i-tag). Op die manier krijgen mensen met een screenreader het icoon niet te zien, en is het niet verwarrend voor hen. 

Lazyload image

Het lazyload patroon wordt voornamelijk gebruikt om afbeeldingen uitgesteld te downloaden. Bij het laden van de webpagina wordt een placeholder of een kleine afbeelding (thumbnail) van de afbeelding geladen. Deze wordt vervangen door de kwalitatieve, grotere, foto wanneer de afbeelding in de viewport verschijnt. Voeg volgende attributen toe aan de <img> tag: 

• data-src: bevat de kwalitatieve afbeelding
• data-srcset: gebruik data-srcset om srcset met lazyloading voor images te gebruiken
• data-sizes="auto": met data-sizes auto wordt de hoogte & breedte van de afbeelding automatisch berekend

Lazyload picture

Voeg dezelfde attributen toe op de <img> tag binnen de <picture>. Voeg het data-src (en optioneel data-srcset) attribuut toe op de <source> elementen binnen het <picture> element.

Lazyload met blur

Voeg het attribuut data-blur="true" toe aan het <img> element.

Voeg .js-lazyload-wrapper toe rond het element (<img> of <picture>).

Positioning klasses starten steeds met u- en worden als laatste element toegevoegd aan de classlist.

Om enkel op mobiel te aligneren kan de modifier --s of --xs toegevoegd worden, bijvoorbeeld .u-align-left--s

Gebruik de class .u-show-on-print om een sectie van uw pagina steeds te printen.

Gebruik de class .u-hide-on-print om een sectie van uw pagina steeds te verwijderen bij het printen.

Voeg de klasse js-push toe aan het element dat omhoog geduwd moet worden.

Het data-attribuut data-push-by bevat de klasse van het element dat het andere element naar boven zal duwen. Deze klasse moet uniek zijn, bv. "global-footer".

Het data-attribuut data-push-space zegt hoeveel pixels er minstens tussen de 2 elementen moeten zitten, bv. "15" is 15px.

Responsive klasses starten steeds met u- en worden als laatste element toegevoegd aan de classlist.

Spacer klasses starten steeds met u- en worden als laatste element toegevoegd aan de classlist.

Verwijderen van de data-clamp functionaliteit

Wanneer er gewerkt wordt met een 'Lees meer'-knop moet de data-clamp functionaliteit verwijderd worden. De beperkte tekst zal dan uitgeklapt worden en volledig weergegeven. Voeg hiervoor het attribuut data-clamp-id toe aan het data-clamp element en het attribuut data-clamp-target met als waarde de id van het data-clamp element.

Accessibility

Voeg een aria-hidden tag toe bij het gebruik van de verwijderfunctie. Dit zorgt ervoor dat de tekst niet voorgelezen wordt aan gebruikers met een screenreader.

Voorbeeld: <button type="button" data-clamp-target="123" aria-hidden>lees meer</button>

Voeg de modifier --sans toe om de sans-serif variant van de titels te gebruiken.