DSO Toolkit | Component Library

Definition List 

<!-- 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>Pneumonoultramicroscopicsilicovolcanoconiosis:</dt>
    <dd>
        <p>Een factitious (quasi-fictieve) vorm van pneumoconiose (stoflongen), veroorzaakt door het inademen van microscopisch kleine silicadeeltjes uit vulkanen.</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>Pneumonoultramicroscopicsilicovolcanoconiosis:</dt>
    <dd>
        <p>Een factitious (quasi-fictieve) vorm van pneumoconiose (stoflongen), veroorzaakt door het inademen van microscopisch kleine silicadeeltjes uit vulkanen.</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>Pneumonoultramicroscopicsilicovolcanoconiosis:</dt>
    <dd>
        <p>Een factitious (quasi-fictieve) vorm van pneumoconiose (stoflongen), veroorzaakt door het inademen van microscopisch kleine silicadeeltjes uit vulkanen.</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>Pneumonoultramicroscopicsilicovolcanoconiosis:</dt>
    <dd>
        <p>Een factitious (quasi-fictieve) vorm van pneumoconiose (stoflongen), veroorzaakt door het inademen van microscopisch kleine silicadeeltjes uit vulkanen.</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>Pneumonoultramicroscopicsilicovolcanoconiosis:</dt>
    <dd>
        <p>Een factitious (quasi-fictieve) vorm van pneumoconiose (stoflongen), veroorzaakt door het inademen van microscopisch kleine silicadeeltjes uit vulkanen.</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>


<dl{{{ifattr ' class' modifier }}}>
  {{#each definitions }}
    <dt>{{ term }}</dt>
    {{#each descriptions }}
      <dd>{{ description }}</dd>
    {{/each }}
    {{#if longread }}
      <dd>
        {{#each longread }}
          <p>{{ paragraph }}</p>
        {{/each }}
      </dd>
    {{/if }}
  {{/each}}
</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: 'Pneumonoultramicroscopicsilicovolcanoconiosis:'
    longread:
      - paragraph: >-
          Een factitious (quasi-fictieve) vorm van pneumoconiose (stoflongen),
          veroorzaakt door het inademen van microscopisch kleine silicadeeltjes
          uit vulkanen.



/* 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: 'Pneumonoultramicroscopicsilicovolcanoconiosis:'
    longread:
      - paragraph: >-
          Een factitious (quasi-fictieve) vorm van pneumoconiose (stoflongen),
          veroorzaakt door het inademen van microscopisch kleine silicadeeltjes
          uit vulkanen.



/* 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: 'Pneumonoultramicroscopicsilicovolcanoconiosis:'
    longread:
      - paragraph: >-
          Een factitious (quasi-fictieve) vorm van pneumoconiose (stoflongen),
          veroorzaakt door het inademen van microscopisch kleine silicadeeltjes
          uit vulkanen.
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: 'Pneumonoultramicroscopicsilicovolcanoconiosis:'
    longread:
      - paragraph: >-
          Een factitious (quasi-fictieve) vorm van pneumoconiose (stoflongen),
          veroorzaakt door het inademen van microscopisch kleine silicadeeltjes
          uit vulkanen.
modifier: dso-emphasize-description



/* Vertical Emphasize Description */
__title: null
__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: 'Pneumonoultramicroscopicsilicovolcanoconiosis:'
    longread:
      - paragraph: >-
          Een factitious (quasi-fictieve) vorm van pneumoconiose (stoflongen),
          veroorzaakt door het inademen van microscopisch kleine silicadeeltjes
          uit vulkanen.
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

There are no notes for this item.