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>

<!-- Bordered -->
<dl class="dso-bordered">

    <dt>Thema<span class="sr-only">:<span></dt>
    <dd>Wonen</dd>
    <dd>Werken</dd>
    <dt>Regelkwalificatie<span class="sr-only">:<span></dt>
    <dd>Instructieregels</dd>
    <dt>Onderwerp<span class="sr-only">:<span></dt>
    <dd>Bedrijventerrein</dd>
    <dt>Functie<span class="sr-only">:<span></dt>
    <dd>Bedrijventerrein &gt; Bedrijventerrein</dd>
    <dt>Type regel<span class="sr-only">:<span></dt>
    <dd>Bindend voor bestuursorganen</dd>
    <dt>Normadressaat<span class="sr-only">:<span></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<span class="sr-only">:<span></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)<span class="sr-only">:<span></dt>
    <dd>
        <p>Veroorzaakt door lange blootstelling aan kolengruis.</p>
    </dd>
    <dt>Pneumoconiose<span class="sr-only">:<span></dt>
    <dd>
        <p>Pneumoconiose of stoflong is een longaandoening die door de inhalatie van stof wordt veroorzaakt.</p>
    </dd>
</dl>

<!-- With List In Columns -->
<dl>

    <dt>Trefwoorden:</dt>
    <dd>
        <ul class="dso-columns-list">
            <li>aanbouwen</li>
            <li>afvalcontainer</li>
            <li>avegaarpaal</li>
            <li>berging</li>
            <li>bijbehorend bouwwerk</li>
            <li>bijkeuken</li>
            <li>blokhut</li>
            <li>boorpaal</li>
            <li>buispaal</li>
            <li>buitenkeuken</li>
            <li>carport</li>
            <li>dierenverblijf</li>
            <li>erker</li>
            <li>fietsenberging</li>
            <li>fietsenhok</li>
            <li>fundering</li>
            <li>garage</li>
        </ul>
    </dd>
</dl>

<dl {{ className(modifier) }}>
  {% if dsoColumns %}
    {%- for definition in definitions %}
      <div>
        <dt>{{ definition.term }}{% if definition.useSrOnlyColon %}<span class="sr-only">:<span>{% else %}:{% endif %}</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 }}{% if definition.useSrOnlyColon %}<span class="sr-only">:<span>{% else %}:{% endif %}</dt>
      {%- for description in definition.descriptions %}
        <dd>
          {%- if description.columnsList -%}
            {{ description.columnsList | safe }}
          {%- else -%}
            {{ description.description }}
          {%- endif -%}
        </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

/* Bordered */
__title: Variant van definition list met borders
__explanation: >-
  De class <code>dso-bordered,</code> zorgt op de definition list voor
  horizontale borders. De breedte classes <code>dso-columns-1-3</code>,
  <code>dso-columns-2-2,</code> en <code>dso-columns-3-1,</code> kunnen ook
  toegepast worden.
definitions:
  - term: Thema
    useSrOnlyColon: true
    descriptions:
      - description: Wonen
      - description: Werken
  - term: Regelkwalificatie
    useSrOnlyColon: true
    descriptions:
      - description: Instructieregels
  - term: Onderwerp
    useSrOnlyColon: true
    descriptions:
      - description: Bedrijventerrein
  - term: Functie
    useSrOnlyColon: true
    descriptions:
      - description: Bedrijventerrein > Bedrijventerrein
  - term: Type regel
    useSrOnlyColon: true
    descriptions:
      - description: Bindend voor bestuursorganen
  - term: Normadressaat
    useSrOnlyColon: true
    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
    useSrOnlyColon: true
    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)
    useSrOnlyColon: true
    longread:
      - paragraph: Veroorzaakt door lange blootstelling aan kolengruis.
  - term: Pneumoconiose
    useSrOnlyColon: true
    longread:
      - paragraph: >-
          Pneumoconiose of stoflong is een longaandoening die door de inhalatie
          van stof wordt veroorzaakt.
modifier: dso-bordered

/* With List In Columns */
__title: Met lijst in kolommen
__explanation: >-
  Responsive component. Kolommen worden gezet doormiddel van
  <code>ul.dso-columns-list</code>.
definitions:
  - term: Trefwoorden
    descriptions:
      - columnsList: |
          <ul class="dso-columns-list">
            <li>aanbouwen</li>
            <li>afvalcontainer</li>
            <li>avegaarpaal</li>
            <li>berging</li>
            <li>bijbehorend bouwwerk</li>
            <li>bijkeuken</li>
            <li>blokhut</li>
            <li>boorpaal</li>
            <li>buispaal</li>
            <li>buitenkeuken</li>
            <li>carport</li>
            <li>dierenverblijf</li>
            <li>erker</li>
            <li>fietsenberging</li>
            <li>fietsenhok</li>
            <li>fundering</li>
            <li>garage</li>
          </ul>