Definition List

Component preview

Een definition list is een lijst met termen en een omschrijving of definitie daarvan. Gebruik de definition list bijvoorbeeld voor items die een directe relatie hebben met elkaar.

Wanneer te gebruiken

Gebruik de definition list om informatie samen te vatten. Denk bijvoorbeeld aan de antwoorden van een gebruiker aan het einde van een formulier.

Hoe te gebruiken

Bij een definition list staat de term links en de definitie rechts of op de volgende regel. Deze tekst is meestal ingesprongen in verhouding tot de term. De lijst moet een visueel ontwerp hebben en een layout die het belang van de content weergeeft en behoudt.

Als gebruikers een lijst bekijken, willen ze snel kunnen zien welke van de items voor hen belangrijk zijn. Te veel informatie kan de gebruiker overladen en maakt de lijst onduidelijk. Te weinig informatie zorgt er juist weer voor dat de gebruiker het niet goed genoeg begrijpt. De hoeveelheid detail in de definitie moet daarom precies genoeg zijn.

Gedrag en toegankelijkheid

Plaats een dubbele punt na de term. Dit geeft aan waar de term ophoudt en de definitie begint. Dit geeft gebruikers die met een sterke vergroting werken extra houvast. Een sterke vergroting zorgt er soms namelijk voor dat items op meerdere regels vallen, of dat het overzicht van het scherm wegvalt. Het is ook belangrijk voor gebruikers met cognitieve beperkingen en gebruikers van screenreaders die dit verschil niet duidelijk aangeven.

Component in context

Beheer-basis

Bronvermelding

NN/g Nielsen Norman Group. The Anatomy of a List Entry. Geraadpleegd op 20 maart 2020, van https://www.nngroup.com/articles/list-entries/
Mozilla.org. MDN Web docs Mozilla. The Description List element. Geraadpleegd op 20 maart 2020, van https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl

<!-- Default -->
<dl>

    <dt>Thema:</dt>
    <dd>Wonen</dd>
    <dd>Werken</dd>
    <dt>Regelkwalificatie:</dt>
    <dd>Instructieregels</dd>
    <dt>Onderwerp:</dt>
    <dd>Bedrijventerrein</dd>
    <dt>Functie:</dt>
    <dd>Bedrijventerrein &gt; Bedrijventerrein</dd>
    <dt>Type regel:</dt>
    <dd>Bindend voor bestuursorganen</dd>
    <dt>Normadressaat:</dt>
    <dd>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </dd>
    <dt>Pneumonoultramicroscopicsilicovolcanoconiosisfantasismus:</dt>
    <dd>
        <p>Een factitious (quasi-fictieve) vorm van pneumoconiose (stoflongen), veroorzaakt door het inademen van microscopisch kleine silicadeeltjes uit vulkanen.</p>
    </dd>
    <dt>De stoflongziekte (mijnwerkers-pneumoconiose):</dt>
    <dd>
        <p>Veroorzaakt door lange blootstelling aan kolengruis.</p>
    </dd>
    <dt>Pneumoconiose:</dt>
    <dd>
        <p>Pneumoconiose of stoflong is een longaandoening die door de inhalatie van stof wordt veroorzaakt.</p>
    </dd>
</dl>

<!-- Accessibility -->
<dl>

    <dt>Thema:</dt>
    <dd>Wonen</dd>
    <dd>Werken</dd>
    <dt>Regelkwalificatie:</dt>
    <dd>Instructieregels</dd>
    <dt>Onderwerp:</dt>
    <dd>Bedrijventerrein</dd>
    <dt>Functie:</dt>
    <dd>Bedrijventerrein &gt; Bedrijventerrein</dd>
    <dt>Type regel:</dt>
    <dd>Bindend voor bestuursorganen</dd>
    <dt>Normadressaat:</dt>
    <dd>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </dd>
    <dt>Pneumonoultramicroscopicsilicovolcanoconiosisfantasismus:</dt>
    <dd>
        <p>Een factitious (quasi-fictieve) vorm van pneumoconiose (stoflongen), veroorzaakt door het inademen van microscopisch kleine silicadeeltjes uit vulkanen.</p>
    </dd>
    <dt>De stoflongziekte (mijnwerkers-pneumoconiose):</dt>
    <dd>
        <p>Veroorzaakt door lange blootstelling aan kolengruis.</p>
    </dd>
    <dt>Pneumoconiose:</dt>
    <dd>
        <p>Pneumoconiose of stoflong is een longaandoening die door de inhalatie van stof wordt veroorzaakt.</p>
    </dd>
</dl>

<!-- Vertical -->
<dl class="dso-vertical">

    <dt>Thema:</dt>
    <dd>Wonen</dd>
    <dd>Werken</dd>
    <dt>Regelkwalificatie:</dt>
    <dd>Instructieregels</dd>
    <dt>Onderwerp:</dt>
    <dd>Bedrijventerrein</dd>
    <dt>Functie:</dt>
    <dd>Bedrijventerrein &gt; Bedrijventerrein</dd>
    <dt>Type regel:</dt>
    <dd>Bindend voor bestuursorganen</dd>
    <dt>Normadressaat:</dt>
    <dd>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </dd>
    <dt>Pneumonoultramicroscopicsilicovolcanoconiosisfantasismus:</dt>
    <dd>
        <p>Een factitious (quasi-fictieve) vorm van pneumoconiose (stoflongen), veroorzaakt door het inademen van microscopisch kleine silicadeeltjes uit vulkanen.</p>
    </dd>
    <dt>De stoflongziekte (mijnwerkers-pneumoconiose):</dt>
    <dd>
        <p>Veroorzaakt door lange blootstelling aan kolengruis.</p>
    </dd>
    <dt>Pneumoconiose:</dt>
    <dd>
        <p>Pneumoconiose of stoflong is een longaandoening die door de inhalatie van stof wordt veroorzaakt.</p>
    </dd>
</dl>

<!-- Emphasize Description -->
<dl class="dso-emphasize-description">

    <dt>Thema:</dt>
    <dd>Wonen</dd>
    <dd>Werken</dd>
    <dt>Regelkwalificatie:</dt>
    <dd>Instructieregels</dd>
    <dt>Onderwerp:</dt>
    <dd>Bedrijventerrein</dd>
    <dt>Functie:</dt>
    <dd>Bedrijventerrein &gt; Bedrijventerrein</dd>
    <dt>Type regel:</dt>
    <dd>Bindend voor bestuursorganen</dd>
    <dt>Normadressaat:</dt>
    <dd>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </dd>
    <dt>Pneumonoultramicroscopicsilicovolcanoconiosisfantasismus:</dt>
    <dd>
        <p>Een factitious (quasi-fictieve) vorm van pneumoconiose (stoflongen), veroorzaakt door het inademen van microscopisch kleine silicadeeltjes uit vulkanen.</p>
    </dd>
    <dt>De stoflongziekte (mijnwerkers-pneumoconiose):</dt>
    <dd>
        <p>Veroorzaakt door lange blootstelling aan kolengruis.</p>
    </dd>
    <dt>Pneumoconiose:</dt>
    <dd>
        <p>Pneumoconiose of stoflong is een longaandoening die door de inhalatie van stof wordt veroorzaakt.</p>
    </dd>
</dl>

<!-- Vertical Emphasize Description -->
<dl class="dso-vertical dso-emphasize-description">

    <dt>Thema:</dt>
    <dd>Wonen</dd>
    <dd>Werken</dd>
    <dt>Regelkwalificatie:</dt>
    <dd>Instructieregels</dd>
    <dt>Onderwerp:</dt>
    <dd>Bedrijventerrein</dd>
    <dt>Functie:</dt>
    <dd>Bedrijventerrein &gt; Bedrijventerrein</dd>
    <dt>Type regel:</dt>
    <dd>Bindend voor bestuursorganen</dd>
    <dt>Normadressaat:</dt>
    <dd>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </dd>
    <dt>Pneumonoultramicroscopicsilicovolcanoconiosisfantasismus:</dt>
    <dd>
        <p>Een factitious (quasi-fictieve) vorm van pneumoconiose (stoflongen), veroorzaakt door het inademen van microscopisch kleine silicadeeltjes uit vulkanen.</p>
    </dd>
    <dt>De stoflongziekte (mijnwerkers-pneumoconiose):</dt>
    <dd>
        <p>Veroorzaakt door lange blootstelling aan kolengruis.</p>
    </dd>
    <dt>Pneumoconiose:</dt>
    <dd>
        <p>Pneumoconiose of stoflong is een longaandoening die door de inhalatie van stof wordt veroorzaakt.</p>
    </dd>
</dl>

<!-- Columns 1 3 -->
<dl class="dso-columns-1-3 dso-with-header">

    <dt>Verzoek 1:</dt>
    <dd>Aanleg rondweg Leiden traject Rijnland route 1</dd>
    <dt>Verzoeknummer:</dt>
    <dd>20181024 00729 000</dd>
    <dt>Datum ingediend:</dt>
    <dd>24/10/2018</dd>
    <dt>Ingediend bij:</dt>
    <dd>Gemeente Den Haag</dd>
    <dt>Uw verzoek wordt behandeld door:</dt>
    <dd>Omgevingsdienst Haaglanden</dd>
</dl>

<!-- Columns 2 2 -->
<dl class="dso-columns-2-2 dso-with-header">

    <dt>Verzoek 1:</dt>
    <dd>Aanleg rondweg Leiden traject Rijnland route 1</dd>
    <dt>Verzoeknummer:</dt>
    <dd>20181024 00729 000</dd>
    <dt>Datum ingediend:</dt>
    <dd>24/10/2018</dd>
    <dt>Ingediend bij:</dt>
    <dd>Gemeente Den Haag</dd>
    <dt>Uw verzoek wordt behandeld door:</dt>
    <dd>Omgevingsdienst Haaglanden</dd>
</dl>

<!-- Columns 3 1 -->
<dl class="dso-columns-3-1">

    <dt>Verzoeknummer:</dt>
    <dd>20181024 00729 000</dd>
    <dt>Datum ingediend:</dt>
    <dd>24/10/2018</dd>
    <dt>Ingediend bij:</dt>
    <dd>Gemeente Den Haag</dd>
    <dt>Uw verzoek wordt behandeld door:</dt>
    <dd>Omgevingsdienst Haaglanden</dd>
</dl>

<!-- Two Columns Small Content -->
<dl class="dso-columns dso-2-columns">

    <div>
        <dt>Organisator:</dt>
        <dd>Gemeente Rotterdam</dd>
    </div>

    <div>
        <dt>Verzoeknummer:</dt>
        <dd>12123497987</dd>
    </div>

    <div>
        <dt>Status:</dt>
        <dd>Open</dd>
    </div>

    <div>
        <dt>Creatie datum:</dt>
        <dd>17-12-2019</dd>
    </div>

    <div>
        <dt>Contactpersoon:</dt>
        <dd>Jan van Veen</dd>
    </div>

    <div>
        <dt>Emailadres:</dt>
        <dd>j.veen@testmail.nl</dd>
    </div>

    <div>
        <dt>Telefoonnummer:</dt>
        <dd>06-12345678</dd>
    </div>

</dl>

<!-- Two Columns -->
<dl class="dso-columns dso-2-columns">

    <div>
        <dt>Thema:</dt>
        <dd>Wonen</dd>
        <dd>Werken</dd>
    </div>

    <div>
        <dt>Regelkwalificatie:</dt>
        <dd>Instructieregels</dd>
    </div>

    <div>
        <dt>Onderwerp:</dt>
        <dd>Bedrijventerrein</dd>
    </div>

    <div>
        <dt>Functie:</dt>
        <dd>Bedrijventerrein &gt; Bedrijventerrein</dd>
    </div>

    <div>
        <dt>Type regel:</dt>
        <dd>Bindend voor bestuursorganen</dd>
    </div>

    <div>
        <dt>Normadressaat:</dt>
        <dd>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </dd>
    </div>

    <div>
        <dt>Pneumonoultramicroscopicsilicovolcanoconiosisfantasismus:</dt>
        <dd>
            <p>Een factitious (quasi-fictieve) vorm van pneumoconiose (stoflongen), veroorzaakt door het inademen van microscopisch kleine silicadeeltjes uit vulkanen.</p>
        </dd>
    </div>

    <div>
        <dt>De stoflongziekte (mijnwerkers-pneumoconiose):</dt>
        <dd>
            <p>Veroorzaakt door lange blootstelling aan kolengruis.</p>
        </dd>
    </div>

    <div>
        <dt>Pneumoconiose:</dt>
        <dd>
            <p>Pneumoconiose of stoflong is een longaandoening die door de inhalatie van stof wordt veroorzaakt.</p>
        </dd>
    </div>

</dl>

<!-- Three Columns Small Content -->
<dl class="dso-columns dso-3-columns">

    <div>
        <dt>Organisator:</dt>
        <dd>Gemeente Rotterdam</dd>
    </div>

    <div>
        <dt>Verzoeknummer:</dt>
        <dd>12123497987</dd>
    </div>

    <div>
        <dt>Status:</dt>
        <dd>Open</dd>
    </div>

    <div>
        <dt>Creatie datum:</dt>
        <dd>17-12-2019</dd>
    </div>

    <div>
        <dt>Contactpersoon:</dt>
        <dd>Jan van Veen</dd>
    </div>

    <div>
        <dt>Emailadres:</dt>
        <dd>j.veen@testmail.nl</dd>
    </div>

    <div>
        <dt>Telefoonnummer:</dt>
        <dd>06-12345678</dd>
    </div>

</dl>

<!-- Three Columns -->
<dl class="dso-columns dso-3-columns">

    <div>
        <dt>Thema:</dt>
        <dd>Wonen</dd>
        <dd>Werken</dd>
    </div>

    <div>
        <dt>Regelkwalificatie:</dt>
        <dd>Instructieregels</dd>
    </div>

    <div>
        <dt>Onderwerp:</dt>
        <dd>Bedrijventerrein</dd>
    </div>

    <div>
        <dt>Functie:</dt>
        <dd>Bedrijventerrein &gt; Bedrijventerrein</dd>
    </div>

    <div>
        <dt>Type regel:</dt>
        <dd>Bindend voor bestuursorganen</dd>
    </div>

    <div>
        <dt>Normadressaat:</dt>
        <dd>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </dd>
    </div>

    <div>
        <dt>Pneumonoultramicroscopicsilicovolcanoconiosisfantasismus:</dt>
        <dd>
            <p>Een factitious (quasi-fictieve) vorm van pneumoconiose (stoflongen), veroorzaakt door het inademen van microscopisch kleine silicadeeltjes uit vulkanen.</p>
        </dd>
    </div>

    <div>
        <dt>De stoflongziekte (mijnwerkers-pneumoconiose):</dt>
        <dd>
            <p>Veroorzaakt door lange blootstelling aan kolengruis.</p>
        </dd>
    </div>

    <div>
        <dt>Pneumoconiose:</dt>
        <dd>
            <p>Pneumoconiose of stoflong is een longaandoening die door de inhalatie van stof wordt veroorzaakt.</p>
        </dd>
    </div>

</dl>

<dl {{ className(modifier) }}>
  {% if dsoColumns %}
    {%- for definition in definitions %}
      <div>
        <dt>{{ definition.term }}</dt>
        {%- for description in definition.descriptions %}
          <dd>{{ description.description }}</dd>
        {%- endfor -%}
        {%- if definition.longread %}
          <dd>
            {%- for paragraph in definition.longread %}
              <p>{{ paragraph.paragraph }}</p>
            {%- endfor -%}
          </dd>
        {%- endif -%}
      </div>
    {% endfor -%}
  {% else %}
    {%- for definition in definitions %}
      <dt>{{ definition.term }}</dt>
      {%- for description in definition.descriptions %}
        <dd>{{ description.description }}</dd>
      {%- endfor -%}
      {%- if definition.longread %}
        <dd>
          {%- for paragraph in definition.longread %}
            <p>{{ paragraph.paragraph }}</p>
          {%- endfor -%}
        </dd>
      {%- endif -%}
    {% endfor -%}
  {% endif %}
</dl>

/* Default */
__title: Standaard
__explanation: >-
  Responsive component. Gedrag kan gestuurd worden met
  <code>.dso-vertical</code> en <code>.dso-emphasize-description</code>
definitions:
  - term: 'Thema:'
    descriptions:
      - description: Wonen
      - description: Werken
  - term: 'Regelkwalificatie:'
    descriptions:
      - description: Instructieregels
  - term: 'Onderwerp:'
    descriptions:
      - description: Bedrijventerrein
  - term: 'Functie:'
    descriptions:
      - description: Bedrijventerrein > Bedrijventerrein
  - term: 'Type regel:'
    descriptions:
      - description: Bindend voor bestuursorganen
  - term: 'Normadressaat:'
    longread:
      - paragraph: >-
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
      - paragraph: >-
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat.
  - term: 'Pneumonoultramicroscopicsilicovolcanoconiosisfantasismus:'
    longread:
      - paragraph: >-
          Een factitious (quasi-fictieve) vorm van pneumoconiose (stoflongen),
          veroorzaakt door het inademen van microscopisch kleine silicadeeltjes
          uit vulkanen.
  - term: 'De stoflongziekte (mijnwerkers-pneumoconiose):'
    longread:
      - paragraph: Veroorzaakt door lange blootstelling aan kolengruis.
  - term: 'Pneumoconiose:'
    longread:
      - paragraph: >-
          Pneumoconiose of stoflong is een longaandoening die door de inhalatie
          van stof wordt veroorzaakt.

/* Accessibility */
__title: Gedrag en accessibility
__explanation: >-
  Bij het gebruik van de definition list gebruik dan altijd een dubbele punt
  <code>:</code> achter de termen. Dit helpt gebruikers van screenreaders termen
  en definities makkelijker te relateren aan elkaar. Zie voorbeelden voor de
  implementatie.
definitions:
  - term: 'Thema:'
    descriptions:
      - description: Wonen
      - description: Werken
  - term: 'Regelkwalificatie:'
    descriptions:
      - description: Instructieregels
  - term: 'Onderwerp:'
    descriptions:
      - description: Bedrijventerrein
  - term: 'Functie:'
    descriptions:
      - description: Bedrijventerrein > Bedrijventerrein
  - term: 'Type regel:'
    descriptions:
      - description: Bindend voor bestuursorganen
  - term: 'Normadressaat:'
    longread:
      - paragraph: >-
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
      - paragraph: >-
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat.
  - term: 'Pneumonoultramicroscopicsilicovolcanoconiosisfantasismus:'
    longread:
      - paragraph: >-
          Een factitious (quasi-fictieve) vorm van pneumoconiose (stoflongen),
          veroorzaakt door het inademen van microscopisch kleine silicadeeltjes
          uit vulkanen.
  - term: 'De stoflongziekte (mijnwerkers-pneumoconiose):'
    longread:
      - paragraph: Veroorzaakt door lange blootstelling aan kolengruis.
  - term: 'Pneumoconiose:'
    longread:
      - paragraph: >-
          Pneumoconiose of stoflong is een longaandoening die door de inhalatie
          van stof wordt veroorzaakt.

/* Vertical */
__title: Geforceerd verticale modus
__explanation: >-
  Als het definitie component in smalle elementen wordt gebruikt kan de
  verticale modus worden gefoceerd met <code>.dso-vertical</code>
definitions:
  - term: 'Thema:'
    descriptions:
      - description: Wonen
      - description: Werken
  - term: 'Regelkwalificatie:'
    descriptions:
      - description: Instructieregels
  - term: 'Onderwerp:'
    descriptions:
      - description: Bedrijventerrein
  - term: 'Functie:'
    descriptions:
      - description: Bedrijventerrein > Bedrijventerrein
  - term: 'Type regel:'
    descriptions:
      - description: Bindend voor bestuursorganen
  - term: 'Normadressaat:'
    longread:
      - paragraph: >-
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
      - paragraph: >-
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat.
  - term: 'Pneumonoultramicroscopicsilicovolcanoconiosisfantasismus:'
    longread:
      - paragraph: >-
          Een factitious (quasi-fictieve) vorm van pneumoconiose (stoflongen),
          veroorzaakt door het inademen van microscopisch kleine silicadeeltjes
          uit vulkanen.
  - term: 'De stoflongziekte (mijnwerkers-pneumoconiose):'
    longread:
      - paragraph: Veroorzaakt door lange blootstelling aan kolengruis.
  - term: 'Pneumoconiose:'
    longread:
      - paragraph: >-
          Pneumoconiose of stoflong is een longaandoening die door de inhalatie
          van stof wordt veroorzaakt.
modifier: dso-vertical

/* Emphasize Description */
__title: Nadruk op beschrijving
__explanation: >-
  Nadruk op de beschrijving door de termen niet dikgedrukt te maken en lichtere
  kleur te geven
definitions:
  - term: 'Thema:'
    descriptions:
      - description: Wonen
      - description: Werken
  - term: 'Regelkwalificatie:'
    descriptions:
      - description: Instructieregels
  - term: 'Onderwerp:'
    descriptions:
      - description: Bedrijventerrein
  - term: 'Functie:'
    descriptions:
      - description: Bedrijventerrein > Bedrijventerrein
  - term: 'Type regel:'
    descriptions:
      - description: Bindend voor bestuursorganen
  - term: 'Normadressaat:'
    longread:
      - paragraph: >-
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
      - paragraph: >-
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat.
  - term: 'Pneumonoultramicroscopicsilicovolcanoconiosisfantasismus:'
    longread:
      - paragraph: >-
          Een factitious (quasi-fictieve) vorm van pneumoconiose (stoflongen),
          veroorzaakt door het inademen van microscopisch kleine silicadeeltjes
          uit vulkanen.
  - term: 'De stoflongziekte (mijnwerkers-pneumoconiose):'
    longread:
      - paragraph: Veroorzaakt door lange blootstelling aan kolengruis.
  - term: 'Pneumoconiose:'
    longread:
      - paragraph: >-
          Pneumoconiose of stoflong is een longaandoening die door de inhalatie
          van stof wordt veroorzaakt.
modifier: dso-emphasize-description

/* Vertical Emphasize Description */
__title: Verticale modus met nadruk op beschrijving
__explanation: null
definitions:
  - term: 'Thema:'
    descriptions:
      - description: Wonen
      - description: Werken
  - term: 'Regelkwalificatie:'
    descriptions:
      - description: Instructieregels
  - term: 'Onderwerp:'
    descriptions:
      - description: Bedrijventerrein
  - term: 'Functie:'
    descriptions:
      - description: Bedrijventerrein > Bedrijventerrein
  - term: 'Type regel:'
    descriptions:
      - description: Bindend voor bestuursorganen
  - term: 'Normadressaat:'
    longread:
      - paragraph: >-
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
      - paragraph: >-
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat.
  - term: 'Pneumonoultramicroscopicsilicovolcanoconiosisfantasismus:'
    longread:
      - paragraph: >-
          Een factitious (quasi-fictieve) vorm van pneumoconiose (stoflongen),
          veroorzaakt door het inademen van microscopisch kleine silicadeeltjes
          uit vulkanen.
  - term: 'De stoflongziekte (mijnwerkers-pneumoconiose):'
    longread:
      - paragraph: Veroorzaakt door lange blootstelling aan kolengruis.
  - term: 'Pneumoconiose:'
    longread:
      - paragraph: >-
          Pneumoconiose of stoflong is een longaandoening die door de inhalatie
          van stof wordt veroorzaakt.
modifier: dso-vertical dso-emphasize-description

/* Columns 1 3 */
__title: Kolomverdeling 1-3
__explanation: Kolomverdeling 1-3, groene koppen door class <code>dso-with-header</code>.
definitions:
  - term: 'Verzoek 1:'
    descriptions:
      - description: Aanleg rondweg Leiden traject Rijnland route 1
  - term: 'Verzoeknummer:'
    descriptions:
      - description: 20181024 00729 000
  - term: 'Datum ingediend:'
    descriptions:
      - description: 24/10/2018
  - term: 'Ingediend bij:'
    descriptions:
      - description: Gemeente Den Haag
  - term: 'Uw verzoek wordt behandeld door:'
    descriptions:
      - description: Omgevingsdienst Haaglanden
modifier: dso-columns-1-3 dso-with-header

/* Columns 2 2 */
__title: Kolomverdeling 2-2
__explanation: Kolomverdeling 2-2 en <code>dso-with-header</code>.
definitions:
  - term: 'Verzoek 1:'
    descriptions:
      - description: Aanleg rondweg Leiden traject Rijnland route 1
  - term: 'Verzoeknummer:'
    descriptions:
      - description: 20181024 00729 000
  - term: 'Datum ingediend:'
    descriptions:
      - description: 24/10/2018
  - term: 'Ingediend bij:'
    descriptions:
      - description: Gemeente Den Haag
  - term: 'Uw verzoek wordt behandeld door:'
    descriptions:
      - description: Omgevingsdienst Haaglanden
modifier: dso-columns-2-2 dso-with-header

/* Columns 3 1 */
__title: Kolomverdeling 3-1
__explanation: Kolomverdeling 3-1.
definitions:
  - term: 'Verzoeknummer:'
    descriptions:
      - description: 20181024 00729 000
  - term: 'Datum ingediend:'
    descriptions:
      - description: 24/10/2018
  - term: 'Ingediend bij:'
    descriptions:
      - description: Gemeente Den Haag
  - term: 'Uw verzoek wordt behandeld door:'
    descriptions:
      - description: Omgevingsdienst Haaglanden
modifier: dso-columns-3-1

/* Two Columns Small Content */
__title: Twee kolommen
__explanation: >-
  De combinatie van de classes <code>dso-columns</code> en
  <code>dso-2-columns</code> zorgt voor een verdeling van de inhoud over twee
  kolommen. Om ongewenste afbreek-problemen te voorkomen, dienen de
  <code>dl</code> en bijbehorende <code>dd</code>'s gegroepeerd te worden binnen
  een <code>div</code>.
definitions:
  - term: 'Organisator:'
    descriptions:
      - description: Gemeente Rotterdam
  - term: 'Verzoeknummer:'
    descriptions:
      - description: 12123497987
  - term: 'Status:'
    descriptions:
      - description: Open
  - term: 'Creatie datum:'
    descriptions:
      - description: 17-12-2019
  - term: 'Contactpersoon:'
    descriptions:
      - description: Jan van Veen
  - term: 'Emailadres:'
    descriptions:
      - description: j.veen@testmail.nl
  - term: 'Telefoonnummer:'
    descriptions:
      - description: 06-12345678
modifier: dso-columns dso-2-columns
dsoColumns: true

/* Two Columns */
__title: Twee kolommen, voorbeeld uitgebreide content
__explanation: >-
  De combinatie van de classes <code>dso-columns</code> en
  <code>dso-2-columns</code> zorgt voor een verdeling van de inhoud over twee
  kolommen. Om ongewenste afbreek-problemen te voorkomen, dienen de
  <code>dl</code> en bijbehorende <code>dd</code>'s gegroepeerd te worden binnen
  een <code>div</code>.
definitions:
  - term: 'Thema:'
    descriptions:
      - description: Wonen
      - description: Werken
  - term: 'Regelkwalificatie:'
    descriptions:
      - description: Instructieregels
  - term: 'Onderwerp:'
    descriptions:
      - description: Bedrijventerrein
  - term: 'Functie:'
    descriptions:
      - description: Bedrijventerrein > Bedrijventerrein
  - term: 'Type regel:'
    descriptions:
      - description: Bindend voor bestuursorganen
  - term: 'Normadressaat:'
    longread:
      - paragraph: >-
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
      - paragraph: >-
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat.
  - term: 'Pneumonoultramicroscopicsilicovolcanoconiosisfantasismus:'
    longread:
      - paragraph: >-
          Een factitious (quasi-fictieve) vorm van pneumoconiose (stoflongen),
          veroorzaakt door het inademen van microscopisch kleine silicadeeltjes
          uit vulkanen.
  - term: 'De stoflongziekte (mijnwerkers-pneumoconiose):'
    longread:
      - paragraph: Veroorzaakt door lange blootstelling aan kolengruis.
  - term: 'Pneumoconiose:'
    longread:
      - paragraph: >-
          Pneumoconiose of stoflong is een longaandoening die door de inhalatie
          van stof wordt veroorzaakt.
modifier: dso-columns dso-2-columns
dsoColumns: true

/* Three Columns Small Content */
__title: Drie kolommen
__explanation: >-
  De combinatie van de classes <code>dso-columns</code> en
  <code>dso-3-columns</code> zorgt voor een verdeling van de inhoud over twee
  kolommen. Om ongewenste afbreek-problemen te voorkomen, dienen de
  <code>dl</code> en bijbehorende <code>dd</code>'s gegroepeerd te worden binnen
  een <code>div</code>.
definitions:
  - term: 'Organisator:'
    descriptions:
      - description: Gemeente Rotterdam
  - term: 'Verzoeknummer:'
    descriptions:
      - description: 12123497987
  - term: 'Status:'
    descriptions:
      - description: Open
  - term: 'Creatie datum:'
    descriptions:
      - description: 17-12-2019
  - term: 'Contactpersoon:'
    descriptions:
      - description: Jan van Veen
  - term: 'Emailadres:'
    descriptions:
      - description: j.veen@testmail.nl
  - term: 'Telefoonnummer:'
    descriptions:
      - description: 06-12345678
modifier: dso-columns dso-3-columns
dsoColumns: true

/* Three Columns */
__title: Drie kolommen, voorbeeld uitgebreide content
__explanation: >-
  De combinatie van de classes <code>dso-columns</code> en
  <code>dso-3-columns</code> zorgt voor een verdeling van de inhoud over twee
  kolommen. Om ongewenste afbreek-problemen te voorkomen, dienen de
  <code>dl</code> en bijbehorende <code>dd</code>'s gegroepeerd te worden binnen
  een <code>div</code>.
definitions:
  - term: 'Thema:'
    descriptions:
      - description: Wonen
      - description: Werken
  - term: 'Regelkwalificatie:'
    descriptions:
      - description: Instructieregels
  - term: 'Onderwerp:'
    descriptions:
      - description: Bedrijventerrein
  - term: 'Functie:'
    descriptions:
      - description: Bedrijventerrein > Bedrijventerrein
  - term: 'Type regel:'
    descriptions:
      - description: Bindend voor bestuursorganen
  - term: 'Normadressaat:'
    longread:
      - paragraph: >-
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
      - paragraph: >-
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat.
  - term: 'Pneumonoultramicroscopicsilicovolcanoconiosisfantasismus:'
    longread:
      - paragraph: >-
          Een factitious (quasi-fictieve) vorm van pneumoconiose (stoflongen),
          veroorzaakt door het inademen van microscopisch kleine silicadeeltjes
          uit vulkanen.
  - term: 'De stoflongziekte (mijnwerkers-pneumoconiose):'
    longread:
      - paragraph: Veroorzaakt door lange blootstelling aan kolengruis.
  - term: 'Pneumoconiose:'
    longread:
      - paragraph: >-
          Pneumoconiose of stoflong is een longaandoening die door de inhalatie
          van stof wordt veroorzaakt.
modifier: dso-columns dso-3-columns
dsoColumns: true