Rijksoverheid
De meeste tekstopmaak wordt door het gebruik van Manon weergegeven zoals deze beschreven staat binnen de huisstijl. Soms is een uitzondering binnen een applicatie of website wenselijk. Om dat mogelijk te maken kunnen ontwikkelaars gebruik maken van de onderstaande opties.
Voor het benadrukken of subtieler tonen van delen van de tekst om de gebruiksvriendelijkheid te vergroten.
Hiërarchie binnen informatie vergroot de begrijpbaarheid van informatie omdat het voor gebruikers makkelijker is om de informatie te overzien als er een indeling binnen de informatie aanwezig is. Vaak komt deze hiërarchie overeen met de gebruikte html-elementen zoals bijvoorbeeld titels, subtitels en paragrafen.
De opmaak van de standaard structuren zijn bepaald binnen de huisstijl van de Rijksoverheid en worden standaard meegenomen binnen Manon op basis van de gebruikte html-elementen. In sommige gevallen kan het echter wenselijk zijn om een paragraaf of een gedeelte daarvan meer of juist minder gewicht te geven dan de standaard weergave. Voor deze gevallen zijn de onderstaande opties beschikbaar.
Aandachtspunten:
Voor het benadrukken van delen van de tekst om de gebruiksvriendelijkheid te vergroten.
Beschikbare voorbeelden:
Introductieteksten worden binnen de huisstijl van de Rijksoverheid visueel groter weergegeven. Deze introductie is vaak een korte duidelijke omschrijving van de informatie.
Manon voegt de stijl van introductieteksten standaard toe op de eerste paragraaf van een sectie of artikel.
Mocht deze stijl op een andere plek wenselijk zijn om de begrijpbaarheid te vergroten kan er gebruikt
gemaakt worden van class="emphasized"
Visueel voorbeeld:
Lorem ipsum
Html-voorbeeld:
<p class="emphasized">Lorem ipsum</p>
<strong>Voor het benadrukken van een deel van de tekst kan gebruik gemaakt worden van het html-element
<strong>. Bijvoorbeeld om extra aandacht te vestigen.
Toelichting: Voor het toevoegen van belangrijke waarschuwingen en overige notificaties kan het beste gebruik gemaakt worden van de notificaties. Voor meer informatie zie: notificaties
Let op: Lorem ipsum dolor set amet
Html-voorbeeld:
<p><strong>Let op:</strong> Lorem ipsum dolor set amet</p>
Om aandacht te vestigen op de opeenvolgende content. Bijvoorbeeld om aan te geven dat een veld verplicht is binnen een formulier.
Visueel voorbeeld:
let op: Bij het toevoegen van een nota bene tekst op een verplicht veld dient ook altijd het
required attribuut toegevoegd te worden. Voor meer informatie zie: formulieren
Html-voorbeeld:
<form action="" method="post">
<label for="voorbeeld-invoerveld-1">Voorbeeld invoerveld</label>
<div>
<p class="nota-bene">Dit veld is verplicht</p>
<input id="voorbeeld-invoerveld-1" name="voorbeeld-invoerveld-1" placeholder="voorbeeld invoerveld" type="text" required>
</div>
<button type="submit">Verzend</button>
</form>
Voor het subtieler weergeven van delen van de tekst om de gebruiksvriendelijkheid te vergroten.
Beschikbare voorbeelden:
Sommige content is belangrijk voor een deel van de gebruikers maar ondergeschikt ten op zichte van de overige tekst. Denk bijvoorbeeld aan een datum- of tijdsweergave bij een melding. Deze is van belang voor de gebruiker die de informatie zoekt maar niet voor iedere gebruiker van direct belang. Hier kan gekozen worden voor een subtiele weergave.
Visueel voorbeeld:
Vandaag om 12:34
Html-voorbeeld:
<p class="de-emphasized">Vandaag om 12:34</p>