Contentweergave

Om informatie op een prettige manier weer te geven is het belangrijk om een goed passende pagina-indeling te hanteren. Binnen de huisstijl van de Rijksoverheid zijn verschillende layouts beschikbaar.

Standaard weergave

Alle online weergegeven content voor de Overheid heeft een maximale breedte. Deze is belangrijk voor leesbaarheid van teksten. Als tekst te breed weergegeven wordt is het lastiger voor mensen om de teksten goed te kunnen lezen. voeg de onderstaande html structuur toe om gebruik te maken van deze standaard weergave.

Standaard weergave gebruiken:

• Maak gebruik van secties <section> om onderscheid aan te brengen tussen de verschillende secties op de pagina.
• Gebruik <article> op artikelen. Denk hierbij aan nieuwsberichten, informatiepagina's en tekstpagina's. Voor meer informatie over wanneer een article-tag gewenst is zie: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article
• Om de content qua breedte te limiteren maar de achtergrondkleur door te laten lopen over de volledig breedte is het nodig om een content container toe te voegen. Gebruik hiervoor: <div> direct binnen een sectie of een article.

Html-voorbeeld:

section:

                        
    <section>
        <div>
            <!-- Voeg hier de content toe. -->
        </div>
    </section>
                        
                    

Article:

                        
    <article>
        <div>
            <!-- Voeg hier de content toe. -->
        </div>
    </article>
                        
                    

overige weergaven

Sommige content is makkelijker te consumeren voor gebruikers in een aangepastte layout. Voor deze uitzonderingen zijn verschillende layout-opties beschikbaar.

Beschikbare layout varianten:

Tekstpagina's & artikelen

Tekstpagina's, informatiepagina's, nieuwsartikelen etc zijn pagina's met veel tekst. Voor leesbaarheid van deze tekst is het belangrijk dat de regels niet te breed weergeven worden. Daarom wordt de content op tekstpagina's smaller weergegeven dan de standaard pagina breedte.

Om tekstpagina's en artikelen gebruiksvriendelijk weer te geven, gebruik <article>.

Visueel voorbeeld:

Html-voorbeeld:

                        
    <article>
        <div>
            <!-- Voeg hier de content toe. -->
        </div>
    </article>
                        
                    

Authenticatie-pagina's

Pagina's in het authenticatieproces voelen het prettigst op een smalle breedte. Denk bijvoorbeeld aan, inloggen, nieuw wachtwoord aanvragen of het invoeren van en two-factor-code.

Om tekstpagina's en artikelen gebruiksvriendelijk weer te geven, gebruik de class layout-authentication op de bijbehorende sectie.

Visueel voorbeeld:

Html voorbeeld:

                        
    <section class="layout-authentication">
        <div>
            <!-- Voeg hier de content toe. -->
        </div>
    </section>
                        
                    

Formulier-pagina's

Pagina's die als hoofdfunctie een formulier hebben worden het beste smaller weergegeven dan een standaard-pagina of tekstpagina.

Om tekstpagina's en artikelen gebruiksvriendelijk weer te geven, gebruik de class layout-form op de bijbehorende sectie.

Visueel voorbeeld:

Html voorbeeld:

                        
    <section class="layout-form">
    <div>
        <!-- Voeg hier de content toe. -->
    </div>
    </section>
                        
                    

Elementen-lijst twee kolommen

Opsommingen van elementen zoals: Nieuwsberichten, artikelen, onderwerpen of overige opsommingen kunnen in kolommen weergegeven worden. Op basis van de content kan gekozen worden voor een layout met twee, drie of vier kolommen.

Om opsommingen gebruiksvriendelijk weer te geven in twee kolommen gebruik de class column-2 op het element wat kolommen dient weer te geven.

Visueel voorbeeld:

Html-voorbeeld:

                        
    <section>
        <div class="column-2">
            <!-- Voeg hier de content toe. -->
        </div>
    </section>
                        
                    

Visueel voorbeeld losse elementen:

Content direct binnen het element met de class column-2 wordt in twee kolommen geplaatst.

Html voorbeeld losse elementen:

                        
    <section>
        <div class="column-2">
            <p>Lorem ipsum</p>
            <p>Lorem ipsum</p>
        </div>
    </section>
                        
                    

Visueel voorbeeld gegroepeerde elementen:

Html voorbeeld gegroepeerde elementen:

Content kan gegroepeerd worden binnen de kolommen. Groepeer hiervoor de content in een <div>.

                        
    <section>
        <div class="column-2">

            <div>
                <h1>Lorem</h1>
                <p>Lorem ipsum</p>
            </div>

            <div>
                <h1>Lorem</h1>
                <p>Lorem ipsum</p>
            </div>

        </div>
    </section>
                        
                    

Elementen-lijst drie kolommen

Om opsommingen gebruiksvriendelijk weer te geven in drie kolommen gebruik de class column-3 op de bijbehorende sectie.

Visueel voorbeeld:

Html voorbeeld:

                        
    <section>
        <div class="column-3">
            <!-- Voeg hier de content toe. -->
        </div>
    </section>
                        
                    

Elementen-lijst 4 kolommen

Opsommingen van elementen zoals: Nieuwsberichten, artikelen, onderwerpen of overige opsommingen kunnen in kolommen weergegeven worden. Op basis van de content kan gekozen worden voor een layout met twee, drie of vier kolommen.

Om opsommingen gebruiksvriendelijk weer te geven gebruik de class column-4 op de bijbehorende sectie.

Visueel voorbeeld:

Html voorbeeld:

                        
    <section>
        <div class="column-4">
            <!-- Voeg hier de content toe. -->
        </div>
    </section>
                        
                    

Eenderde-, tweederde-verdeling

Soms is een deel van de content belangrijker dan de rest. In dat geval kan er gebruik gemaakt worden van een een-derde - twee-derde-verdeling.

Aandachtspunten:

• Om gebruik te maken van deze layout, gebruik de class showcase op de bijbehorende sectie.
• Deze contentweergave verwacht twee elementen om de ruimte over te verdelen.

Visueel voorbeeld:

Html voorbeeld:

                        
<section class="background-color-offset">
    <div class="one-third-two-thirds">
        <div>
            <h1>Lorem ipsum</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <ul>
                <li>Lorem ipsum dolor set amet</li>
                <li>Lorem ipsum dolor set amet</li>
                <li>Lorem ipsum dolor set amet</li>
                <li>Lorem ipsum dolor set amet</li>
            </ul>
            <button type="button">Lorem ipsum</button>
        </div>
        <div>
            <h1>Lorem ipsum</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
</section>
                        
                    

Tweederde-, eenderde-verdeling

Soms is een deel van de content belangrijker dan de rest. In dat geval kan er gebruik gemaakt worden van een tweederde- eenderde-verdeling.

Aandachtspunten:

• Om gebruik te maken van deze layout, gebruik de class two-thirds-one-third op de bijbehorende sectie of div.
• Deze contentweergave verwacht twee elementen om de ruimte over te verdelen.

Visueel voorbeeld:

Html voorbeeld:

                        
<section class="background-color-offset">
    <div class="two-thirds-one-third">
        <div>
            <h1>Lorem ipsum</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <ul>
                <li>Lorem ipsum dolor set amet</li>
                <li>Lorem ipsum dolor set amet</li>
                <li>Lorem ipsum dolor set amet</li>
                <li>Lorem ipsum dolor set amet</li>
            </ul>
            <button type="button">Lorem ipsum</button>
        </div>
        <div>
            <h1>Lorem ipsum</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
</section>