Webcomponenten, versie 2
Hier vindt u het overzicht van alle webcomponenten in versie 2, met de bijhorende documentatie.
Webcomponenten versie 2 niet meer gebruiken
Versie 2 van de webcomponenten wordt niet verder ontwikkeld en zal op termijn helemaal uitgefaseerd worden. Gebruik deze versie niet meer voor nieuwe projecten. We ontwikkelden een verbeterde versie 3, beschikbaar via NPM en met gedetailleerde technische informatie. Voor meer informatie kunt u contact opnemen met de servicedesk van Informatie Vlaanderen.
Formulieren
Gebruik
Een button laat de gebruiker toe om een bepaalde actie uit te voeren. Welke soort actie dat is, staat aangegeven op de button in de vorm van een tekst of een icoon.
Functioneel maken we een onderscheid tussen:
- Primaire buttons
- Secundaire buttons
- Waarschuwingsbuttons
Gerelateerde componenten
Gebruik deze klasses op <a>, <button>, <input type="submit">, <input type="button"> elementen.
Secundaire knop toegevoegd.
Button--narrow variant toegevoegd.
De button-klasse toont nu bij elk element een cursor: pointer.
Gebruik
Een checkbox laat een gebruiker toe om één of meer keuzes te maken in een lijst van opties. Gebruik de checkbox voornamelijk in formulieren.
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.
Leesbaarheid van disabled checkbox geoptimaliseerd.
Een nieuwe variant van de checkbox (switch toggle) werd toegevoegd. Deze variant bevat een 1 en 0 om de toegankelijkheid van de switch toggle te garanderen.
Gebruik
Een datepicker laat de gebruiker toe om een datum te kiezen.
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.
Globale functie getDate() toevoegen aan datepicker.
De datepicker component opende steeds op de huidige dag. Wanneer een max-date werd ingesteld werd hier geen rekening mee gehouden. Het data-attribuut [data-datepicker-default] werd toegevoegd, zodat de afnemer zelf kan bepalen op welke datum de datepicker wordt geopend. Wanneer het data-attribuut niet wordt toegevoegd opent de datepicker steeds op de huidige datum.
Z-index aangepast, zodat deze ook in de overlay kan gebruikt worden.
Gebruik
Gebruik een double input veld om 2 maal data op te vragen via 1 veld. Dit kan gebruikt worden om bijvoorbeeld de gegevens van 2 personen op te vragen.
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".
Gebruik
Gebruik een dynamic label om bepaalde gegevens aanpasbaar te maken. Dit kan bv. gebruikt worden in een persoonlijk profiel van een gebruiker.
Het dynamic label wordt aangegeven door een bewerk-icoon. Door te klikken op het icoon wordt het label omgezet naar een standaard inputveld waardoor de gebruiker de tekst kan aanpassen.
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.
Gebruik
Dankzij form validation wordt de data die door een gebruiker wordt ingegeven gevalideerd tijdens het invullen van een formulier.
Standaard voorzien we on-blur validatie. Het veld wordt dan gevalideerd van zodra de gebruiker het veld verlaat (bv. door buiten het veld te klikken of met de tab-toets naar het volgende veld te springen).
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:
- 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.
De dependency waarop de vorige form validatie steunde werd niet onderhouden en beschouwd als legacy. Een nieuwe form validatie library werd gebruikt. De manier van initialiseren blijft volledig hetzelfde.
Naast error states/boodschappen kunnen nu ook (optioneel) success states en boodschappen getoond worden.
Form validatie werkte niet meer zonder een standaard data-attribuut. Dit werd rechtgezet.
Gebruik
Met een input pattern wordt de data, die door de gebruiker in een veld wordt ingegeven, automatisch weergegeven in het juiste patroon (bv. xx.xx.xx-xxx.xx voor een rijksregisternummer). Als de ingegeven data niet overeen komt met het patroon, kan er een foutmelding getoond worden aan de gebruiker.
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.
Gebruik
Een inputfield laat de gebruiker van uw applicatie toe om data in te voeren, denk bijvoorbeeld aan een e-mailadres of een wachtwoord.
Gebruik geen dubbelpunt (:) achteraan een label. Het verband tussen het label en het veld is visueel duidelijk.
Zoom op mobiele schermen bij focussen van een tekstveld vermijden.
De text-indent op inputfields is verwijderd.
Gebruik
Pills kunnen gebruikt worden om trefwoorden (filters of tags) weer te geven.
Pill closable variant heeft standaard geen functionaliteit. Die moet u zelf toevoegen.
Variant met checkbox toegevoegd.
Error-variant toegevoegd.
Gebruik
Gebruik een progressbar om voortgang binnen een bepaald proces aan te geven.
Elke stap in het proces krijgt in de progressbar een bolletje met een tooltip. De tooltip kan gebruikt worden om een naam te geven aan de stap.
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.
Progressbar met nummering toegevoegd.
Gebruik
Een radiobutton laat de gebruiker toe om één optie te kiezen in een lijst. Vermijd bij radiobuttons voorgeselecteerde elementen. Een gebruiker moet altijd een bewuste keuze kunnen maken.
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
Via de range kan de gebruiker een bepaalde minimum- en maximumwaarde aangeven. De range kan gebruikt worden als een filtermechanisme.
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.
Gebruik
Gebruik select om de gebruiker een keuze te laten maken uit een lijst met voorgedefinieerde opties.
Gebruik select enkel als er meer dan 5 keuzemogelijkheden zijn. Als er minder keuzemogelijkheden zijn, is het beter om radiobuttons te gebruiken.
Gerelateerde componenten
- [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
Dynamic load optie toegevoegd aan select.
Progressive enhanced select component.
Promises op de select component verwijderd
De select component beschikt op IE9 over dubbele pijlen.
Performance, accessibility en usability updates.
De select component beschikt op IE9 over dubbele pijlen. Performance, accessibility en usability updates.
Event toegevoegd om de wijziging van een selectie op te vangen.
Een bug bij het dressen van de js-select component werd aangepakt.
Gebruik
Steps is een lijst van genummerde stappen op een verticale lijn. Gebruik het om de gebruiker stapsgewijs door een bepaald proces te begeleiden.
- 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 steps component is uitgebreid met een dropdown.
Gebruik
Gebruik het uploadveld om de gebruiker bestanden te laten opladen. Het is mogelijk om meerdere bestanden in 1 keer op te laden. De gebruiker kan bestanden toevoegen door ze te slepen naar het uploadveld, of ze te selecteren via het bestandmenu. Bestanden verwijderen kan eenvoudig via het kruisje.
Wij voorzien enkel de styling van de component, de achterliggende upload-functionaliteit moet u zelf implementeren.
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
Een kleine weergave-bug met het kruisje van de upload-component is opgelost.
Het uploadveld had een vreemde weergave bij lange bestandsnamen.
Bugfixes
De upload component biedt support voor single uploads. Wanneer er niets gespecificeerd is wordt de upload gelimiteerd tot max. één bestand. Wanneer je multiple uploads wil toestaan gebruik dan de volgende attributen:
- data-vl-upload-max-files="2"
- data-vl-upload-error-message-maxfiles="Je kan maximum :maxfl file(s) uploaden."
De upload error message werd niet getoond. Dit werd aangepast.
Feature
Het event vl.upload.hook.fileChange wordt afgevuurd telkens een change gebeurd aan de upload component.
Gebruik
Gebruik een wizard als de bezoeker een proces met verschillende stappen moet doorlopen. Met de wizard kunt u een langer of ingewikkelder proces opsplitsen in kleinere, makkelijkere, stappen voor de bezoeker. De wizard laat ook toe om de mogelijkheden in een volgend scherm afhankelijk te maken van wat de bezoeker heeft gekozen in een eerder scherm.
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.
Nieuwe component/patroon Wizard.
Gedragspatronen
Gebruik
Een accordion is een aanklikbaar element om inhoud te verbergen of te tonen. De gebruiker kan de accordion uitklappen of inklappen door op een bepaalde toggle te klikken (bv. een "+" of een pijltje).
In verschillende componenten, zoals de contact card, is er al opmaak voorzien om de inhoud te tonen of verbergen. Voor andere componenten kunt u verschillende, vooraf gedefinieerde, toggles gebruiken.
Gerelateerde componenten
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)
Gebruik
De autocomplete vult aan op basis van wat de gebruiker aan het typen is. Gebruik de autocomplete om te helpen bij ambiguïteit, of als een woord vaak verkeerd gespeld wordt.
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);
});
Nieuwe component.
"zoeken op locatie" functionaliteit toegevoegd in de Autocomplete component.
Custom event toevoegen die getriggered wordt bij het veranderen van de waarde in het autocomplete keuzeveld.
Custom event toegevoegd die getriggered wordt bij het veranderen van de waarde in het autocomplete keuzeveld.
noResultsFound parameter op "false" plaatsen resulteert in geen error message wanneer er geen resultaten zijn op basis van de zoekparameter.
De autocomplete klapte niet langer toe bij het scrollen met de scrollbar.
Gebruik
Gebruik data table om (grote hoeveelheden) gerelateerde data structureel weer te geven.
De data kan in de tabel weergegeven worden als tekst of cijfer, link, schakelknop of vinkje. Er is een algemene download-knop om de data te exporteren (bv. naar pdf of Excel-bestand).
Er kunnen acties verbonden worden aan records. Als een record geselecteerd wordt, verschijnt er een extra knop.
Dankzij pagination wordt de tabel, als er veel data is, opgesplitst. Zo blijft de data voor de gebruiker overzichtelijk. Onderaan ziet de gebruiker hoeveel records er in totaal in de tabel zitten, en kan de gebruiker naar de vorige of volgende pagina gaan.
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.
- [data-table]
- 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)
- vl.datatable.dressAll()
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.
Data table component uitgebreid met header, footer, actief status, select en select-all mogelijkheid.
Mobiele optimalisatie.
De .table component is verwijderd en de data-table wordt als go-to <table> component gebruikt. De .table component is vanaf v2 niet meer beschikbaar in de componentenbib.
Uitbreiding met verschillende varianten.
De opmaak van tabellen is bijgewerkt waardoor de inhoud in cellen beter uitgelijnd wordt.
In Internet Explorer werden de lijnen van een tabel niet correct getoond als 2 cellen werden samengevoegd (colspan). Dit probleem is opgelost.
Gebruik
Gebruik de drawer om samenhorende content overzichtelijk weer te geven. Enkel de titel wordt getoond. De bezoeker kan, door op de titel te klikken, meer content zichtbaar maken. Bij een drawer kan maar 1 element tegelijkertijd opengeklapt staan.
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.
bugfix: Drawer (small) variant kunnen sluiten.
De pijl van de dynamic drawer werd vreemd gealigneerd. Dit werd aangepast.
Gebruik
Gebruik multiselect om de gebruiker meerdere trefwoorden uit een voorgedefinieerde lijst te laten selecteren. Dankzij de zoekbalk kan de gebruiker ook snel het juiste trefwoord in een (langere) lijst terugvinden.
Een geselecteerd trefwoord kan eenvoudig verwijderd worden door te klikken op het kruisje.
Gebruik een checkbox in plaats van de multiselect waar mogelijk. Een checkbox is gebruiksvriendelijker en toegankelijker dan een multiselect.
Gerelateerde componenten
- [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]
Progressive enhanced multiselect component met tag input.
Promises op de multiselect component verwijderd.
De multiselect component beschikt op IE9 over dubbele pijlen.
Performance, accessibility en usability updates.
De select component beschikt op IE9 over dubbele pijlen.
Performance, accessibility en usability updates.
Bugfix: verwijderen van geselecteerde waarde door op het kruisje te klikken werkt nu ook in Internet Explorer en Firefox.
Een bug werd opgelost waardoor de Multiselect in IE11 niet correct functioneerde.
Multiselect control kon nog niet gedisabled worden. Dit werd aangepast.
Gebruik
Een popover is een nieuw, vaak kleiner, venster dat verschijnt bovenop het bestaande venster. Gebruik een popover om extra informatie aan de gebruiker te tonen, bv. een extra menu. De popover kan gesloten worden door te klikken buiten het venster van de popover, of op het icoon dat de popover opent.
Gerelateerde componenten
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.
Functionaliteit van de popover component op mobiel toevoegen.
Popup en popdown componenten worden één component met varianten (popover).
De preloader toont een animatie terwijl een element van uw website aan het laden is (loading-state).
Gebruik
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.
Gebruik
Gebruik de scheduler om het programma van een evenement te tonen. Bezoekers kunnen voor elk onderdeel meer details bekijken, een programma samenstellen en zich inschrijven.
De scheduler is opgebouwd uit tijdssloten (slots). Elk tijdsslot kan opengeklapt worden om verschillende programma-onderdelen weer te geven (options). Een bezoeker kan uit de verschillende onderdelen kiezen om zo zelf een programma samen te stellen.
Een slot kan een tijdstip, een titel en extra info bevatten. Als er geen keuzemogelijkheden zijn voor een tijdsslot (bv. tijdens de middagpauze), kan het tijdsslot op non-actief gezet worden. Bezoekers kunnen die dan niet langer openklappen.
Een option kan een titel, extra info en een link bevatten. Als een option volzet is, kan die op non-actief gezet worden. Bezoekers kunnen zich dan niet meer voor dat onderdeel inschrijven.
Gerelateerde componenten
- 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.
Gebruikers kunnen nu meerdere opties in 1 timeslot selecteren.
Daarnaast zijn typography-elementen in de info-secties nu ook toegestaan.
De scheduler component werd uitgebreid met support voor:
- Uurselectie
- Uurselectie én programmaselectie
Gebruik
Via filters kan een gebruiker de zoekresultaten verder beperken tot het type resultaat waar hij naar op zoek is. Optioneel kan de filter een introtekst bevatten.
Uitbreiding van de zoekfilter component met een --alt variant.
Gebruik
Gebruik de zoekmodule om bezoekers eenvoudig specifieke inhoud te laten zoeken.
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.
Nieuwe component search module.
Gebruik
Met show on checked kunt u een element tonen of verbergen, op basis van de input van een gebruiker. Door het aan- of afvinken van een selectievakje (checkbox) of keuzerondje (radiobutton) wordt het element getoond of 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.
Gebruik
Met show on select kunt u een element tonen of verbergen, op basis van de input van een gebruiker. Na selectie uit een lijst zal het element getoond of verborgen worden.
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
De "Show on Select" component toont inhoud bij het selecteren van een bepaalde optie binnen een select element.
Gebruik
Gebruik de slider om een aantal elementen (slides) aan de bezoeker te tonen. De bezoeker kan door de slides bladeren met pijltjes terug en vooruit.
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.
Slider controls werden getoond ook wanneer er niet genoeg items in de slider aanwezig waren.
Progress-indicatie is toegevoegd aan de slider. Nu kan de gebruiker zien waar die in de reeks van slides zit.
De pijlen van de slider hebben een andere z-index gekregen zodat ze niet langer verdwijnen onder andere content.
In bepaalde gevallen werd het laatste element in de slider niet volledig getoond.
Gebruik
Gebruik sticky om de inhoud aan de rechterkant van de pagina te laten meescrollen met de gebruiker. De inhoud blijft dus op het scherm 'plakken'.
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.
bugfix: Sticky gedrag voorkomen op mobiel.
Gebruik
Gebruik Subscribe om gebruikers de mogelijkheid te geven zich te abonneren op iets. Dit kan bv. gebruikt worden om een gebruiker in te schrijven op nieuwe nieuwsberichten of om een bericht te krijgen als een bepaalde pagina is bijgewerkt.
Wij voorzien enkel het design van deze component. De technische implementatie (zoals het opslaan van e-mailadressen) moet u zelf voorzien.
Voeg de klasse 'subscribe__toggle--active' toe om de toggle aan te zetten (checked).
Gebruik
Gebruik tag input om de gebruiker in een zoekveld te laten zoeken op verschillende trefwoorden (tags). Door op het kruisje te klikken kan een trefwoord ook terug verwijderd worden.
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
Gebruik een toggle om content te tonen of verbergen. Door op een bepaald element te klikken (bv. een + of een pijltje) kan een gebruiker meer of minder zien op een pagina.
Gerelateerde componenten
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)
Uitbreiding van de toggle component.
- Lees meer variant van de toggle
- Mogelijkheid om de tekst te wijzigen bij het openen/sluiten van de toggle
De accordion JS utility staat in voor de functionaliteit van de toggle component.
De tekst van de toggle "meer opties" wijzigt bij het openklappen.
Gebruik
Gebruik een tooltip om verklarende informatie te geven over een knop, label of ander element. Als de gebruiker de cursor over een element beweegt of op een element klikt, verschijnt de tooltip met extra info.
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.
De tooltip bevat vanaf heden de .dress() en .dressAll() functionaliteit.
De z-index van de tooltip werd verhoogd, zodat deze boven alle elementen komt te liggen.
Gebruik
Gebruik de user toggle om de bezoeker makkelijk te laten wisselen tussen 2 of meer gebruikers (accounts).
Headers en titels
Gebruik
Gebruik een content footer onderaan de pagina om extra content op te nemen. Deze extra content kan links bevatten, bv. contactgegevens, menu-items uit het hoofdmenu, een link om in te schrijven op de nieuwsbrief of afbeeldingen van sponsors. De content is vrij te kiezen. De content footer bestaat altijd uit 4 kolommen.
Gebruik
Bovenaan een pagina gebruikt u ofwel een functional header ofwel een content header. Gebruik de content header voor informatieve pagina's. De content header toont de bezoeker meteen op welke website die zich bevindt.
Logo
Het entiteitenlogo staat standaard links uitgelijnd in sans serif met hoofdletters. Er zijn echter verschillende configuraties beschikbaar:
- Links of rechts uitgelijnd
- Serif of Sans serif lettertype
- Hoofdletters of kleine letters
In de alternatieve weergave van de content header zullen de kleuren van het entiteitenlogo wisselen: gekleurde tekst op een witte achtergrond in plaats van witte/zwarte tekst op een gekleurde achtergrond.
Vormgeving
Als de content header geen achtergrond-afbeelding bevat, wordt deze opgevuld met een kleur uit het gekozen kleurenpalet. Als u toch voor een achtergrond-afbeelding kiest, vult de afbeelding de volledige content header. Als u instelt dat de achtergrond-afbeelding slechts de halve breedte inneemt, wordt de andere helft opgevuld met de achtergrondkleur volgens het kleurenpalet. Als u het merklogo op de content-header plaatst, en geen achtergrond-afbeelding instelt, wordt de achtergrond van de content-header wit.
Voor service navigatie wordt er in de content header geen plaats voorzien. U kunt de informatie onderbrengen in:
- de content footer (sitemap, publicaties, nieuws)
- de global footer (disclaimer, toegankelijkheidsverklaring, taalswitch, over ons)
- de global header (contactopties)
De content header kan ook nog aangevuld worden met context en titel. Dit kan (beperkt) gecombineerd worden met een entiteitenlogo.
Er is een large en een small variant van de content header. Bij de large variant zal de content header wat meer ruimte in beslag nemen, bij de small wat minder. Om de grote variant te gebruiken voegt u de klasse "content-header--large" toe aan de content header. Om de kleine variant te gebruiken voegt u de klasse "content-header--small" toe aan de content header.
Gerelateerde componenten
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)
bugfix: Header titel voor IE9.
Extra home variant.
Uitbreiding van de content header met volgende opties:
- Sizes (small en large)
- Halve of volle of geen achtergrond-afbeelding
- Entiteitenlogo
- Custom logo
In Internet Explorer wordt de titel terug correct getoond.
Gebruik
Bovenaan een pagina gebruikt u ofwel een functional header ofwel een content header. Gebruik de functional header op transactionele pagina's, zoals formulieren en applicaties. De functional header is geschikt voor dit soort pagina's omdat het in tegenstelling tot de content header geen achtergrondfoto bevat. Op die manier toont de functional header de gebruiker waar die zich bevindt in de transactie zonder verder af te leiden.
Gerelateerde componenten
De "afmelden"-link die toegevoegd kan worden in de functional header toonde niet de correcte kleur bij het hoveren met de muis.
Gebruik
Titels en ondertitels zorgen voor structuur en maken de bezoeker wegwijs.
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).
.cta-title__cta--small variant werd toegevoegd.
De titels zijn nu ook beschikbaar in het "flanders sans" font.
Inhoudspatronen
Gebruik
Gebruik een agenda item om een evenement aan te kondigen. Het agenda item bestaat uit een titel, tekst en een datum.
Een agenda item wordt weergegeven als een block element, en neemt dus de volledige grootte van de container in. Het hele element is ook aanklikbaar.
Het agenda item heeft een vaste hoogte. De titel mag maximaal 1 regel lang zijn, de tekst is maximaal 2 regels lang. Het label dat de maand toont is maximaal 3 karakters lang.
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".
Gebruik
Een alert (of melding) houdt de gebruiker op de hoogte van belangrijke informatie.
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.
Minimum hoogte voor een alert toegevoegd.
Alert success variant.
De hover-state op de icons in de alert is verwijderd.
Gebruik
Gebruik de badge om een afbeelding, initialen of een icoon te tonen.
Gerelateerde componenten
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.
Gebruik
Gebruik een bullet list om de bullets van een lijst aan te passen naar bijvoorbeeld tags of checks.
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.
De component list-style is hernoemd naar bullet-list. List-style is vanaf v2 niet meer beschikbaar in de componentenbib.
Functioneel blijft de component hetzelfde.
Gebruik
Gebruik een contact card om contactgegevens van een bepaalde dienst weer te geven.
Volgende velden worden standaard ondersteund door een contact card: adres, telefoon, fax, e-mail, website, locatie (via Google Maps). De lijst kan verder uitgebreid worden.
Gerelateerde componenten
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="">
Google maps lazyload optie op de interactieve kaart toegevoegd.
Google maps lazyload optie op de interactieve kaart toegevoegd.
Er werd steeds een swipe-preventer toegevoegd aan Google Maps om scroll-hijacking te voorkomen. Dit probleem is nu opgelost door Google maps zelf. De swipe-preventer is niet langer van toepassing.
Er werd steeds een swipe-preventer toegevoegd aan Google Maps om scroll-hijacking te voorkomen. Dit probleem is nu opgelost door Google maps zelf. De swipe-preventer is niet langer van toepassing.
Bugfix: kaart uit Google Maps wordt nu geladen bij het open klikken van een Contact Card in een Accordion.
Gebruik
Gebruik description data om meer informatie mee te geven over de hoofdcontent van de pagina. Dit kan bv. de contactpersoon van een dienst zijn, of meer informatie over een publicatie.
De data kan op verschillende manieren ingevuld worden. Hieronder een aantal geschikte voorbeelden:
Geef de description data een logische betekenis door microdata van schema.org toe te voegen.
Nieuwe component.
Mogelijkheid voorzien om iconen toe te voegen aan de description data component.
Gebruik
Gebruik document miniature om een link naar een bestand te tonen. Naast de link staat een icoon met een aanpasbaar label om te tonen over welk type bestand het gaat.
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.
Nieuwe component.
Gebruik
Gebruik Images om afbeeldingen op de website weer te geven.
Informatieve afbeeldingen moeten een alt-attribuut krijgen met een beschrijving van de afbeelding. Zo hebben mensen met een screenreader ook toegang tot de informatie in de afbeelding.
Decoratieve afbeeldingen hebben een leeg alt-attribuut.
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.
Component toegevoegd.
De image gallery (inline variant) ondersteunt image captions.
Gebruik
Gebruik de info tile in informatieve en interactieve dashboards.
Alle varianten van de info tile kunnen steeds een header, body en footer bevatten. De header kan een titel, subtitel en badge bevatten. Beperk de inhoud van de body tot een korte zin om de actie duidelijk te maken. Gebruik de footer om de primaire actie van de info tile te benoemen met een duidelijk label.
Gerelateerde componenten
Gebruik
Gebruik een infoblock om specifieke inhoud uit te lichten, bijvoorbeeld een publicatie of een veelgestelde vraag. Een icoon links bovenaan in het infoblock duidt aan om welke soort inhoud het gaat.
Een infoblock kan volgende soorten inhoud bevatten:
- Nieuws
- Contact
- Veelgestelde vraag
- Publicatie
- Tijdslijn
Een infoblock kan enkel in een standaard region gebruikt te worden, niet in een region--alt.
Gebruik
Met de infotext kunt u belangrijke cijfergegevens beter visualiseren.
De infotext bestaat uit een rond element met een groot label bovenaan en een klein label onderaan. Het grote label bestaat uit een cijfer. Het kleine label bevat een beschrijving om het cijfer te plaatsen binnen een bepaalde context. Door het toevoegen van een link aan de infotext krijgen beide labels een andere kleur en worden ze aanklikbaar.
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.
Infographic en infotext worden één component. Infographic wordt infotext--badge.
Gebruik
Gebruik de Instagram feed om de foto's van een bepaalde Instagram-account te tonen op uw website.
Gerelateerde componenten
Wij voorzien enkel de opmaak van de Instagram feed. U moet zelf zorgen voor de koppeling met Instagram.
Nieuwe component Instagram feed toegevoegd.
Theming toegevoegd aan de Instagram Feed component.
Gebruik
Gebruik introduction voor de inleiding van pagina's en inhoudsblokken. De inleiding krijgt hierdoor een afwijkende opmaak waardoor deze meer in het oog springt.
Gebruik
Gebruik de modal dialog om de gebruiker te wijzen op niet-opgeslagen wijzigingen bij het verlaten van een pagina. Een modal dialog onderbreekt de gebruiker en vereist interactie voordat de gebruiker de website verder kan gebruiken.
Enkel de styling van deze component is voorzien, u moet zelf de logica voor de modal dialog uitwerken en implementeren. Meer informatie over een goede toegankelijke modal dialog vindt u bij AnySurfer.
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
De news slider toont verschillende news teasers in een slider. Door op een teaser te klikken wordt het nieuwsbericht uitgeklapt en volledig getoond.
Slider controls werden getoond ook wanneer er niet genoeg items in de slider aanwezig waren.
In bepaalde gevallen werden publicaties in de nieuwscarousel niet juist gerenderd.
Gebruik
Gebruik de news teaser om de intro van een nieuwsartikel, een tweet, een video of een publicatie te tonen en hier verder naar door te linken.
Gerelateerde componenten
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.
De nieuwscomponent wordt aangepast zodat deze overeenkomt met de component die gebruikt wordt in de nieuwsslider op vlaanderen.be.
Gebruik
Gebruik person om een bepaald persoon te tonen. De persoon wordt voorgesteld door een ronde foto, samen met naam en functie. Werk bij voorkeur op basis van een vierkante foto. Het gebruik van een vierkante foto vermijdt vervorming. De foto zal automatisch rond getoond worden.
Voeg de large modifier toe om de afbeelding groter weer te geven bij de person large-variant.
Gebruik
Gebruik de Person Info om meer informatie te tonen over een bepaalde persoon, bv. functiegegevens. Deze informatie is gerelateerd aan de pagina waarop de component staat, en bevat altijd een 'Lees meer'-link.
Gerelateerde componenten
Person-block wordt person-info.
Gebruik
Gebruik properties om een lijst van eigenschappen over een bepaalde categorie, persoon,... weer te geven. Deze component wordt vooral gebruikt in de context van een e-loket.
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.
halve breedte variant toegevoegd aan de properties component.
Gebruik
Gebruik een quote om een citaat van een bepaald persoon te tonen. Een auteursfoto is aangeraden maar niet verplicht. Als er geen auteursfoto wordt gebruikt, wordt de tekst over de volledige breedte weergegeven.
Een quote wordt best getoond op de volledige breedte maar kan, wanneer de inhoud zich er toe leent, ook met een andere breedte getoond worden.
De quote heeft een visuele update gekregen.
Gebruik
De zoekresultaten worden in een lijst met links weergegeven. Bij veel resultaten wordt de lijst gesplitst over meerdere pagina's. Omdat er verschillende soorten zoekresultaten zijn (bijvoorbeeld artikel, publicatie, locatie, persoon, ...) kan er geen eenduidige stijl voorzien worden.
We raden aan om microdata te implementeren. Op de website van schema.org vindt u een lijst van gestandaardiseerde itemprops voor de zoekresultatenpagina.
Social media sharing
Gebruik
Met social media sharing kunt u knoppen voorzien om uw content te delen op de grootste sociale media-netwerken.
Wij voorzien enkel de opmaak van de knoppen. De functionaliteit van de knoppen moet u zelf configureren. Er zijn 2 manieren om de functionaliteit om uw pagina te delen te integreren:
- Leg een zuivere link naar uw pagina op het sociale netwerk, bv. uw profielpagina op Facebook. Voor ons is dat "https://www.facebook.com/vlaamseoverheid/".
- Open een nieuw venster of dialog waarin de bezoeker de kans krijgt om het bericht te delen op sociale media.
Privacy waarschuwing
Met deze twee opties vermijden we dat sociale netwerken gegevens over uw bezoekers verzamelen terwijl die uw website aan het raadplegen is.
Wij raden ook aan om geen gebruik te maken van de Facebook Pixel en de Facebook Social media plugins. Als u deze functionaliteiten toevoegt, dan worden gegevens van uw bezoekers in cookies opgeslagen terwijl ze uw pagina aan het bezoeken zijn.
Een technische diepgaande uitleg over wat Facebook bijhoudt bij de verschillende manieren van integratie op uw website vindt u in een onderzoek van de KULeuven voor de Belgische Privacy commissie.
Op volgende links kunt u nagaan hoe een link legt met Facebook, Twitter, LinkedIn en Google+:
https://developers.facebook.com/docs/sharing/reference/share-dialog
https://dev.twitter.com/web/tweet-button/web-intent
https://developer.linkedin.com/docs/share-on-linkedin
Google +
Gerelateerde componenten
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/
Nieuwe component.
Alt variant met border uitgewerkt.
Mogelijkheid om een label (bvb: "deel:") voor de iconen te plaatsen.
Alt variant toegevoegd.
Gebruik
Gebruik een teaser om artikels in de kijker zetten, bv. de meest gelezen pagina's op uw website. De teaser toont de titel, een korte intro en een foto van het artikel.
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.
Gebruik
Gebruik de timeline om bepaalde informatie/gebeurtenissen chronologisch weer te geven.
De timeline wordt vaak samen met de accordion gebruikt. Hierdoor worden gebeurtenissen verborgen tot de gebruiker op de titel van de gebeurtenis klikt.
Gerelateerde componenten
Gebruik
Gebruik de Twitter timeline om de tweets van een bepaald Twitter-account te tonen op uw website.
Gerelateerde componenten
Wij voorzien enkel de opmaak van de Twitter timeline. U moet zelf zorgen voor de koppeling met Twitter.
Gebruik
Gebruik de video player om videomateriaal aan te bieden. De player kan verschillende formaten aan, zowel HTML5 als video's op YouTube of Vimeo. Ook ondertiteling wordt ondersteund.
Voorzie voor elke video een transcriptie voor slechtziende mensen, en ondertitels voor slechthorende mensen.
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
Component toegevoegd.
Navigatie en structuur
Gebruik
Gebruik arrow navigation om de gebruiker makkelijk te laten navigeren tussen elementen die een tijdsverband hebben (bv. een maandelijkse nieuwsbrief of een jaarverslag). De gebruiker kan links of rechts klikken om naar een vorig of volgend item te springen op de tijdslijn. Als er geen verder item meer is in de tijdslijn, wordt de pijl inactief. De kleur van de pijl verandert dan naar grijs.
Gebruik
Een doormat kunt u gebruiken binnen een website met veel informatie. De doormat geeft de bezoeker dan een snel en duidelijk overzicht van de onderliggende informatie. Hiervoor deelt u de informatie van uw website op in categorieën. Elke categorie (de doormat) wordt weergegeven met een titel en een korte intro, die dan linkt naar een achterliggende pagina met meer informatie.
- Een standaard doormat heeft een contrasterende achtergrond, dus grijs op een witte achtergrond of wit op een grijze achtergrond.
- Een doormat wordt gebruikt in een grid of lijst.
- De doormat kan weergegeven worden zonder afbeelding, met een kleine rechthoekige afbeelding of met een grote afbeelding.
Binnen 1 grid of lijst wordt steeds dezelfde variant van de doormat gebruikt. U kunt dus geen doormat met afbeelding in dezelfde lijst zetten als een doormat zonder afbeelding. - De doormat heeft steeds een titel en een korte tekst. De tekst wordt afgekapt na een bepaald aantal (zelf in te stellen) tekens. Wij raden aan om de titel en de tekst elk maximaal 2 regels lang te maken. Omdat de tekst van een doormat beperkt is, kunt u ook een lijst met trefwoorden (tags) gebruiken. Deze lijst maakt het voor de bezoeker nog makkelijker om snel de informatie op de pagina te scannen.
- Als meerdere doormat-elementen gebruikt worden in een lijst of grid, moet de hoogte van de verschillende elementen gelijk zijn. Hiervoor kunt u de JavaScript-utility "equal-height" gebruiken.
Doormat en paragraph link component samgengevoegd. Paragraph link is vanaf deze versie deprecated.
Uitbreiding component Doormat (afbeelding, bladwijzer, icoon).
Doormat kleurgebruik analoog met de Spotlight component. Hierdoor wordt de continuiteit behouden binnen de componentenbib.
Gebruik
Gebruik de drilldown om een complexere navigatiestructuur van meerdere niveaus weer te geven.
- Gebruik de active state om aan te duiden waar de gebruiker zich bevindt in de navigatie.
- Het eerste niveau van de drilldown kan maximaal 10 items bevatten. Als er meer dan 10 items in dit bovenste niveau zitten, kunt u best nog een bovenliggend niveau toevoegen.
- Integreer de zoekmodule bij een uitgebreid menu om de gebruiker de mogelijkheid te geven sneller te navigeren.
Let op, ga steeds na of de navigatiestructuur niet eenvoudiger kan vooraleer u de drilldown gebruikt. Deze component is ook niet geschikt voor een website met weinig pagina's.
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]).
Nieuwe component.
Kleine bugfix om de accessibility te verbeteren.
Gebruik
Met de dropdown navigation kunt u een dropdown icoon rechts naast een titel plaatsen. Door op het icoon te klikken verschijnt er een lijst met menu-items waarop de bezoeker kan klikken om te navigeren binnen de website.
Zonder Javascript is deze component niet bruikbaar.
Gebruik
Gebruik de hero navigation om een visueel overzicht te bieden van de onderliggende thema's. In de hero navigation kunnen maximaal 4 thema's (dus navigatie-elementen) opgenomen worden. Elk element in de hero navigation wordt beschreven via een titel, korte beschrijving en link voor meer details.
Kies voor onderwerpen die zinvol via grote foto's te illustreren zijn. Infographics of kaarten als achtergrondbeeld zijn niet aan te bevelen.
Op grote schermresoluties is slechts één achtergrondbeeld zichtbaar, de andere afbeeldingen verschijnen door de cursor over de andere items te bewegen. Op kleine resoluties zijn alle items (kleiner) zichtbaar onder elkaar.
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.
Gebruik
Gebruik een link list om bij elkaar horende informatie gestructureerd te tonen aan een gebruiker. Elke item in de lijst linkt door naar een andere pagina.
.link-list__item--no-border
De --bordered variant kan per element overschreven worden via de klasse .link-list__item--no-border.
Gebruik
Gebruik een link om de bezoeker door te verwijzen naar een andere URL, bv. een nieuwe pagina of een document.
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.
Buttons, links en icon links zijn opgesplitst.
De link-group--bordered plakt niet langer aan elkaar.
Lange inline links die over meerdere lijnen moesten breken, en met een icoon achter de link, zagen er vreemd uit. Dit probleem is opgelost.
Links met iconen werden (foutief) niet onderlijnd. Dit werd rechtgezet.
Bij een link met icoon werd de text-decoration:underline steeds ook getoond op IE11. Via een kleine CSS hack kon deze verwijderd worden.
Gebruik
Gebruik pagination om lange inhoud (bv. een artikel of een lijst) te verdelen over verschillende pagina's. De bezoeker kan tussen de verschillende pagina's bladeren, of de inhoud in volgorde bekijken. Onderaan wordt getoond over hoeveel pagina's de inhoud verdeeld is.
Maak gebruik van elementen zoals "eerste" en "laatste" en toon maximaal 5 pagina's als er meer dan 10 pagina's beschikbaar zijn. Tussen de nummering van de pagina's kan een ellips gebruikt worden om weer te geven dat er meer pagina's aanwezig zijn.
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.
Gebruik
Side navigation is een smal navigatie element dat getoond wordt aan de rechterzijde van de pagina. Gebruik het om te linken binnen dezelfde pagina, of om te linken naar pagina's van andere websites.
Het element kan ook als "sticky" weergegeven worden binnen de container. Dit zorgt ervoor dat de navigatie binnen de container op een vaste locatie blijft staan, en dus meebeweegt als de gebruiker binnen de pagina naar boven of beneden scrollt. Hierdoor kan de gebruiker steeds makkelijk naar de gelinkte elementen navigeren.
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]
Scrollspy functionaliteit toegevoegd aan de Side Navigation component. In tweede fase ook de mobiele functionaliteit geoptimaliseerd.
Bugfix: side navigation blijft nu op de juiste locatie aan de rechterkant van de pagina staan.
De side navigation hield geen rekening met de offset parameter om zijn hoogte te bepalen. Dit werd aangepast.
Op mobiel werd de padding van de links in het uitklapmenu van de side navigation overschreven. Dit werd aangepast.
Vreemd gedrag wanneer de share buttons werden toegevoegd in de side-navigation. Aangepast.
Gebruik
Een skiplink wordt alleen zichtbaar als de link focus krijgt, bv. door er met de tab-toets naartoe te navigeren. Dit laat mensen met bv. een screenreader toe meteen naar de hoofdcontent van een pagina springen.
Gebruik
Gebruik de spotlight om een visuele link te leggen naar een dieperliggende pagina. De spotlight wordt weergegeven als een blok met een (optionele) achtergrondafbeelding, titel en tekst. Normaal is het volledige element aanklikbaar. U kunt dit ook aanpassen zodat enkel de titel aanklikbaar is. De afbeeldingen die u gebruikt in de spotlight moeten een ratio hebben van 24/10.
Lange titels in de spotlight worden afgebroken met een ellips (...).
Uitbreiding van de spotlight component.
Lange woorden in de spotlight titel worden afgebroken met een ellips (...).
Integratie van de oude spotlight-panel component in de spotlight component. De spotlight-panel is vanaf v2 niet meer beschikbaar in de componentenbib.
Het breken van woorden in de spotlight titel is geoptimaliseerd afhankelijk van het type spotlight.
Wordbreak issue in spotlight list aangepakt.
Gebruik
Gebruik de sticky bar om de hoofdactie op een pagina altijd zichtbaar te houden voor de gebruiker. De sticky bar is een balk bovenaan de pagina die altijd zichtbaar blijft terwijl de gebruiker door de pagina scrollt. De sticky bar bevat een grote knop voor de hoofdactie van de pagina (bv. een e-loket openen of solliciteren voor een vacature).
Als u ook de global header & footer hebt geïmplementeerd, zal de sticky bar net onder de global header worden weergegeven. De global header blijft immers ook altijd zichtbaar voor uw bezoeker.
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.
Nieuwe component sticky bar.
Gebruik
Gebruik tab navigation om gerelateerde informatie op te breken en stukje per stukje aan de gebruiker te laten zien. Aangezien niet alle informatie meteen zichtbaar is voor de gebruiker, is het belangrijk om duidelijke labels te gebruiken voor de verschillende tabs. Zo weet de gebruiker dat hij op een tab moet klikken om die specifieke informatie te vinden. Op mobiele weergaven wordt de tab navigation omgevormd tot een dropdown menu.
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.
Integratie van de tab navigation component in de functionele header.
Accessibility integratie in de tabs component.
Tab navigation functionele update.
Samenvoeging van de deprecated bar navigation met de tab navigation component.
Pagina-grid en hulpelementen
Gebruik
Gebruik de accessibility klasses om een component gebruiksvriendelijk te maken voor screenreader-gebruikers.
Visually hidden
De klasse .u-visually-hidden wordt gebruikt om tekst niet zichtbaar te maken. Screenreaders lezen de tekst wel voor aan bezoekers. Hierdoor krijgt een bezoeker die het element niet kan zien meer context over dat element.
Deze component wordt onder andere gebruikt in de component social media sharing. Deze componenten tonen enkel een icoon dat voor de screenreader-gebruiker geen informatie bevat. Hier voegen we een <span> aan toe met de tekst "Deel op Facebook". Wanneer de bezoeker met screenreader op deze knop focust wordt de tekst "Deel op Facebook" voorgelezen.
Gebruik
Gebruik equal height om verschillende elementen met variabele data dezelfde hoogte te geven.
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.
Gebruik
Het grid zorgt voor een duidelijke structuur binnen de pagina. De grid container wordt steeds als container van gridelementen gebruikt en zorgt horizontaal voor een evenredige afstand tussen de elementen in het grid.
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">...
Gebruik
Gebruik de klasse .u-hr om een horizontale streep onder een component toe te voegen.
Gebruik
Gebruik de hulpwidget positioner om de hulpwidget rechts onderaan de pagina te plaatsen.
Gebruik
De iconen van de componentenbibliotheek zitten in een iconfont. Dit iconfont wordt automatisch mee ingeladen bij gebruik van de componentenbibliotheek.
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.
Het instagram icoon werd toegevoegd. Gebruik vi-instagram om deze te tonen.
Gebruik
Gebruik de layout wrapper steeds als overkoepelende container voor de componenten op de pagina.
Gebruik
Gebruik lazyload om bepaalde elementen binnen een pagina pas te laden als ze zichtbaar zijn voor de gebruiker. Zo wordt de pagina veel sneller geladen en wordt de overdracht van data tussen server en client beperkt tot een minimum.
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>).
Nieuwe component.
De lazyload component werkt nu ook in de prefixed versie van de componenten.
Gebruik
Gebruik de positioning klasses om een component te positioneren binnen de pagina.
Float none
Gebruik float none om de float (zwevend gedrag) van een bepaald element uit te schakelen.
Float right
Gebruik float right om een element rechts te laten zweven.
Float left
Gebruik float left om een element links te laten zweven.
Align left
Gebruik align left om een element links uit te lijnen.
Align right
Gebruik float left om een element rechts uit te lijnen.
Align center
Gebruik float left om een element centraal uit te lijnen.
Inline-block
Gebruik inline-block om elementen na elkaar weer te geven. Hoeveel elementen op 1 rij worden weergegeven, hangt af van de breedte van het element en de breedte van de container. Als de container zich aanpast aan de grootte van het scherm, wordt het aantal elementen binnen de container ook aangepast.
Clearfix
Als een element zweeft (float) en groter is dan de container waar het element in zit, dan zal het buiten de container getoond worden. Gebruik clearfix om te zorgen dat de container zich aanpast aan de grootte van het element.
No overflow
Gebruik no overflow om te zorgen dat een element niet buiten zijn container kan worden getoond.
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
Mogelijkheid voorzien om een element op mobiel (--s en --xs) links, rechts of centraal uit te lijnen.
.u-named-target-dummy werd absoluut gepositioneerd wanneer geen relatieve wrapper aanwezig was. Met .u-named-target-wrapper kan je een wrapper toekennen op het bovenliggende element.
Gebruik
Met de print-helper worden alle pagina's op uw website mooi en eenvoudig afgedrukt. Enkel de inhoud die in het <main>-element zit, wordt afgedrukt.
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.
Gebruik
Gebruik push om bepaalde content met een vaste positie toch naar boven te laten duwen door andere content.
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.
Gebruik
Gebruik de responsive klasses om een component te tonen of verbergen in mobiele weergaves. Door de responsive klasses past de pagina zich aan aan de schermgrootte van de bezoeker.
Responsive klasses starten steeds met u- en worden als laatste element toegevoegd aan de classlist.
Gebruik
Gebruik spacer om een marge boven of onder een component toe te voegen.
Spacer tiny
Variant van de spacer, die een zeer kleine marge boven of onder de component toevoegt.
Spacer small
Variant van de spacer, die een kleine marge boven of onder de component toevoegt.
Spacer large
Variant van de spacer, die een grote marge boven of onder de component toevoegt.
Spacer none
Variant van de spacer, die de standaard marge onderaan de component verwijdert.
Spacer klasses starten steeds met u- en worden als laatste element toegevoegd aan de classlist.
Gebruik
Met een text-clamp wordt de tekst binnen een element beperkt tot een voorgedefinieerd aantal regels.
Gebruik het data-clamp attribuut om vast te leggen tot hoeveel regels de tekst binnen het element beperkt moet worden. Zorg er steeds voor dat (HTML-)tags verwijderd worden van de tekst.
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>
De text clamp-functionaliteit kan nu ook uitgeschakeld worden. Dit wordt voornamelijk gebruikt in combinatie met een "lees meer" knop.
Gebruik
Gebruik de typography container om elementen in de container een visuele opmaak mee te geven.
De browseropmaak wordt standaard van alle componenten verwijderd via een css-reset. Als u toch gebruik wilt maken van de hiërarchie binnen elementen kunt u de .typography klasse als container gebruiken rondom de elementen (p, ul, ol, ..). De typography container wordt voornamelijk gebruikt om de inhoud van een wysiwyg-editor op te maken zonder extra klasses toe te kennen aan de afzonderlijke elementen.
Voeg de modifier --sans toe om de sans-serif variant van de titels te gebruiken.
Styling toevoegen voor element.
De opmaak van opsommingen werd bijgewerkt waardoor een opsomming nu meer visueel samenhangt.