Kleurgebruik
De vaste online huisstijl kleuren van provincie Brabant zijn rood (#DD0000) en donkergrijs (#666666) gecombineerd met wit (#FFFFFF) en een scala aan grijstinten.
Webrichtlijn contrast
De gebruikte kleur rood in de content wijkt iets af van de huisstijl kleur om te kunnen voldoen aan de overheidsrichtlijnen voor contrast en
leesbaarheid.
Huisstijl kleuren
Voorbeelden van gebruik van de vaste rode kleur:
Grijstinten
Scale van grijstinten als achtergrond voor tekst
Steun kleuren
Binnen provinciale websites zijn ook steunkleuren te gebruiken ter versterking van een specifieke uitstraling.
Kleurverlopen
Gerelateerdeerd informatie - 'knoppen' - aan de rechterzijde is vormgegeven met een licht kleurverloop
Typografie
Het lettertype binnen de site is 'Arial' en de weergave van normale tekst is in 12 px met een interlinie van 18 px.
Webrichtlijn typografie
Tekst is schaalbaar.
Koppen (headings)
Door gebruik van de juiste heading-elementen in een pagina is de structuur eenvoudiger uit de pagina af te leiden.'
Bezoekers krijgen met een eenvoudige zoekopdracht naar de headings op een pagina een snel overzicht van de inhoud. Dit ijkpunt zorgt voor een drempelvrij en seo-vriendelijk gebruik van de headings elementen. Met bepaalde hulpsoftware kan de bezoeker via de headings-koppen door een pagina lopen en bepalen welke informatie relevant is. Alle headings-elementen zijn vertegenwoordigt.
Voorbeelden
Titel van de webpagina
Subtitel van panel of een paragraaf op een webpagina
Subtitels in overzichtslijst
H1. Futura, 22 px, #DD0000, Bold
H2. Futura, 20 px, #DD0000, Bold
H3. Futura, 18 px, #333333, Bold
H4. Futura, 16 px, #333333, Bold
H5. Futura, 14 px, #333333, Bold
H2. Futura, 12 px, #333333, Bold
Body tekst
Het lettertype van de normale tekst is 'Arial' in 12 px met een interlinie van 18 px.
De standaard waarde voor "medium-text" font-weergave in elke moderne browser is 16px. En de
eerste stap om deze waarde te verlagen voor de hele website is door de body-tag te voorzien van
een font-size van 12 / 16 = 0.75 em. De standaard grootte verandert hiermee in 12px.
Er zijn 2 soorten paragraaf-titels:
- Artikel-paragraaf-titel op een zogenaamde detailpagina
- Onderwerp-paragraaf-titel op een zogenaamde onderwerppagina
Voorbeeld artikel-paragraaf-titel(detailpagina)
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Voorbeeld onderwerp-paragraaf-titel (onderwerppagina)
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non
metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec
elit. Donec ullamcorper nulla non metus auctor fringilla.
Body tekst intro
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Lijsten
Codeer lijststructuur en lijstelementen met HTML-lijstelementen dl, ul en ol. Hierdoor zijn lijsten en lijstelementen inzichtelijker voor de lezer.
NOOT: gebruik deze alleen voor het maken van lijsten en niet voor formatteringseffecten, zoals inspringen.
Ongeordende lijsten
Gebruik voor een onafhanlijke volgorde een ongeordende (Unorderd list) lijstweergave.
- Ongeordende lijst item 1
-
Ongeordende lijst item 2
- Ongeordende lijst item 1
- Ongeordende lijst item 2
- Ongeordende lijst item 3
- Ongeordende lijst item 3
Geordende lijsten
Gebruik voor een hierarchische volgorde een geordende (Orderd list) lijstweergave.
- Geordende lijst item 1
- Geordende lijst item 2
- Geordende lijst item 3
Binnen brabant.nl en Brain zijn 2 type buttons beschikbaar. namelijk:
btn--default voor normaal (default) gebruikbtn--dark voor formulieren, omdat deze een achtergrond kleur hebben.
De buttons hebben allemaal dezelfde hoogte en de inhoud bepaald de breedte van de button.
door 'Digitale Toegankelijkheid' (EN 301 549 met daarin opgenomen WCAG 2.1).: 2 buttons
Niet alle onderdelen van een formulier krijgen een naam via expliciete associatie van een label of een title attribuut.
- het value-attribuut geeft een naam aan Submit, Reset en Button (input type="button") knoppen
- het alt attribuut geeft een naam aan image buttons
- bij button elementen wordt de naam tussen de
<button> tags geboden.
Het is beter om geen reset knop te gebruiken bij een formulier. Het per ongeluk activeren van een reset knop kan namelijk als consequentie hebben dat de gebruiker al haar ingevulde gegevens verliest.
Gebruik de beschikbare classes om een button stijlen.
Gebruik de .btn op <a>, <button>, or <input> elementen.