Pagina opbouw

Hier komt een stukje tekst over de pagina opbouw.

Wrapper

Elke pagina begint met een <div class="wrapper">. Alle inhoud van de pagina bevindt zich binnen deze wrapper

Breedte

De breedte van de content wordt zo ingesteld, zodat de regellengte maximaal 600 pixels is. Dit wordt bereikt door verschillende .col-{screensize} toe te passen.
Door een .col-xx-offset-## op de div te zetten wordt het content blok worden gecentreerd op de pagina.

<div class="row">
    <div class="col-xs-12 col-xl-8 col-xl-offset-2 col-lg-10 col-lg-offset-1">
        <div class="content-background">
            <div class="content">
                <p>Inhoud van de pagina</p>
            </div>
        </div>
    </div>
</div>

Main

Zet alle content van een pagina (alle zaken behalve het DUO logo, de navigatie en de footer) in een main element. De main heeft een minimale hoogte van 70vh (70% van de view height). Als je teveel zaken buiten de main zet heb je kans dat er zaken buiten beeld gedrukt worden.

Zorg er wel voor dat niet meer dan één main element per pagina is. Screenreaders verwachten ook maar één keer een main per pagina, namelijk het stuk waar de pagina over gaat.

Meestal zal een skiplinks ook verwijzen naar de main.

<main class="skiplink-target main" id="content" tabindex="-1">
    <div class="container">
        [content bijvoorbeeld intro]
    </div>
</main>

Achtergrondkleur

De inhoud van de pagina wordt weergegeven op een witte achtergrond, dit wordt bereikt door het .content blok in een <div class="content-background"> te plaatsen.

<div class="row">
    <div class="col-xs-12 col-xl-8 col-xl-offset-2 col-lg-10 col-lg-offset-1">
        <!-- Geeft deze content een achtergrond -->
        <div class="content-background">
            <div class="content">
                <p>Inhoud van de pagina</p>
            </div>
        </div>
    </div>
</div>

Alternatieve achtergrond kleur

De achtergrond kan gewijzigd door een extra class toe te voegen .background-{rijkshuisstijl kleur}. Gebruik dit alleen voor bijvoorbeeld een link list, niet voor tekst blokken.

Content

Een pagina bestaat altijd uit .content blokken. Binnen de contentvlak kun je de pagina beginnen met een intro .content__header

Content Header

De meeste pagina's beginnen met een intro. Deze bevat de titel van de pagina met een korte introductie. De titel & de introductie paragraaf worden geplaatst in een header element met de class .content__header. Het intro blok bevat ook de eventuele .backlink.

<section class="row">
        <div class="col-xs-12 col-xl-8 col-xl-offset-2 col-lg-10 col-lg-offset-1">
            <div class="content">
                <a href="#" class="content__header-backlink backlink">Terug</a>
                <header class="content__header">
                    <h1 class="content__header-title">Titel</h1>
                    <p class="content__header-paragraph">Intro</p>
                </header>
            </div>
        </div>
    </section>
    

Titel met subtitel

De subtitel is geen <h2> maar een gewone paragraaf

h1–h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection. – W3
Lees meer over html5

Titel met meta informatie

Titel met voortgangsindicatie

Extra kolom witruimte

Op grotere schermen kan het wenselijk zijn een extra kolom witruimte aan de linker en rechter kant van het content vlak toe te voegen. Hiervoor moet op de .content tag een class worden toegevoegd .content--large-padding.

Minder witruimte

Voor o.a. medewerkersschermen kan het juist wenselijk zijn om minder witruimte tussen de verschillende content blokken te hebben. Voeg hiervoor de modifier .content--compact toe aan het .content blok. De witruimte bovenaan het content vlak wordt hiermee verkleind. Deze modifier kan niet worden gebruikt in combinatie met .theme--large-padding.

<div class="row">
    <div class="col-xs-12 col-lg-10 col-lg-offset-1">
        <div class="content-background">
            <div class="content content--compact">
                <h2>Externe identifiers</h2>
                <table class="table table--striped">
                    <thead>
                        <tr>
                            <th>Type</th>
                            <th>Inhoud</th>
                            <th>Begindatum</th>
                            <th>Einddatum</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>ONDERWIJSAANBIEDER_ID</td>
                            <td>100A001</td>
                            <td>02-02-2002</td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

Content uitvullen

De padding aan de linker en rechter zijde van content blokken kan worden verwijderd door de modifier .content--wide toe te passen. Tabellen en componenten worden dan strak tegen de rand van het content vlak geplaatst

<div class="row">
    <div class="col-xs-12 col-lg-10 col-lg-offset-1">
        <div class="content-background">
            <div class="content content--wide">
                <h2>Externe identifiers</h2>
                <table class="table table--striped">
                    <thead>
                        <tr>
                            <th>Type</th>
                            <th>Inhoud</th>
                            <th>Begindatum</th>
                            <th>Einddatum</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>ONDERWIJSAANBIEDER_ID</td>
                            <td>100A001</td>
                            <td>02-02-2002</td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>