Visuele taal

Typografie

De huisstijl van het CIBG gebruikt net als alle overheidssites het lettertype "RO Sans".

Paragraaf

Voor de introductie van een pagina kan een standaard paragraaf voorzien worden van de class .lead. De alinea komt er dan uit te zien zoals deze alinea, zodat er meer nadruk op komt.

Een normale paragraaf ziet er uit zoals de tekst die je nu leest. Standaard wordt er marge toegevoegd onder aan elke paragraaf om visuele ruimte te creƫren met opvolgende elementen.

Weergave van diverse kopniveau's

Koppen van het niveau h2 worden standaard in het blauw getoond en niet dikgedrukt, omdat deze bijna alleen voorkomen bij het gebruik in formulieren. Wanneer je h2 op een content pagina gebruikt, kun je de class .content toevoegen aan de h2 tag. Hierdoor wordt de kop zwart en dikgedrukt.

Header classes onafhankelijk van kopniveau

De visuele weergave van de koppen veranderen standaard op basis van het kopniveau. Tegenwoordig worden er meer complexe schermen ontwikkelt, waarbij het soms nodig is om meer hierarchie aan te brengen met behulp van lettergrootte.

Hierom zijn er ook classes beschikbaar waarmee koppen in drie maten weergegeven kunnen worden. Let er hierbij op dat de opbouw van de koppen nog wel valide is.

Opsommingen

Voor het tonen van opsommingen zijn er ordered, unordered en unordered-unstyled varianten.

Het is ook mogelijk om een lijst met pijltjes ervoor te tonen. Over het algemeen wordt deze alleen gebruikt om een lijst met links te tonen.

Inline elementen

Dikgedrukt en cursief

Om nadruk te leggen op een deel van een alinea kan gebruik gemaakt worden van strong en em tags. Het op dat dit expliciet niet gebruikt mag worden om hele alinea's te benadrukken.

Links in een lopende tekst moeten herkenbaar zijn door onderstreept te zijn.

Externe links openen in een nieuw venster en zijn herkenbaar doordat er een icoon voor staat. In een externe link moet een screenreader tekstalternatief aanwezig zijn waarmee wordt aangegevens dat de link in een nieuw venster opent.

Metadata

Op een onderschrift toe te voegen kan de class meta worden toegevoegd. Let er op dat een onderschrift visueel bijna altijd gekoppeld is aan content waar het bij hoort. Zorg er voor dat dit ook voor screen readers duidelijk is.