Legenda
DraftThe default, ordered and unordered, lists are part of the content styling. These can be viewed at the Content Component
Legenda
The color of the marker can be set by a css variable, default the value of the marker is grey.
<ol class="list--legenda">
<li class="legenda--10">meer dan 25</li>
<li class="legenda--20">21 t/m 25</li>
<li class="legenda--30">16 t/m 20</li>
<li class="legenda--40">11 t/m 15</li>
<li class="legenda--50">6 t/m 10</li>
<li class="legenda--60">0 t/m 5</li>
<li class="legenda--70">-4 t/m 0</li>
<li class="legenda--80">-9 t/m -5</li>
<li class="legenda--90">-14 t/m -10</li>
<li class="legenda--100">-19 t/m -15</li>
<li class="legenda--110">-25 t/m -20</li>
<li class="legenda--120">minder dan -25</li>
</ol>Blue colors
<ol class="list--legenda">
<li class="legenda-blue--10">Mauritania</li>
<li class="legenda-blue--20">Brunei</li>
<li class="legenda-blue--30">Peru</li>
<li class="legenda-blue--40">Croatia</li>
<li class="legenda-blue--50">St. Kitts & Nevis</li>
<li class="legenda-blue--60">Tanzania</li>
<li class="legenda-blue--70">Gambia</li>
<li class="legenda-blue--80">Fiji</li>
<li class="legenda-blue--90">Argentina</li>
<li class="legenda-blue--100">Tuvalu</li>
</ol>Risk
<ol class="list--legenda">
<li class="legenda-risk--10">A</li>
<li class="legenda-risk--20">B</li>
<li class="legenda-risk--30">C</li>
<li class="legenda-risk--40">D</li>
<li class="legenda-risk--50">E</li>
</ol>Custom colors
<div class="space-y-8">
<div class="space-y-4">
<h3 class="heading-6">Handhavingstermijn (jaar)</h3>
<ol class="list--legenda">
<li class="legenda--10">meer dan 25</li>
<li class="legenda--20">21 t/m 25</li>
<li class="legenda--30">16 t/m 20</li>
<li class="legenda--40">11 t/m 15</li>
<li class="legenda--50">6 t/m 10</li>
<li class="legenda--60">0 t/m 5</li>
<li class="legenda--70">-4 t/m 0</li>
<li class="legenda--80">-9 t/m -5</li>
<li class="legenda--90">-14 t/m -10</li>
<li class="legenda--100">-19 t/m -15</li>
<li class="legenda--110">-25 t/m -20</li>
<li class="legenda--120">minder dan -25</li>
</ol>
</div>
<div class="space-y-4">
<h3 class="heading-6">Rapportage type</h3>
<ol class="list--legenda">
<li style="--marker-color: #b54cb0">Monitoring</li>
<li style="--marker-color: #8c4bb6">Notitie</li>
<li style="--marker-color: #5b4ab7">Snelle scan</li>
<li style="--marker-color: #4969b8">Sloop onderzoek</li>
<li style="--marker-color: #489bb9">Second opinion</li>
<li style="--marker-color: #47baa5">Archief onderzoek</li>
<li style="--marker-color: #4ebc77">Bouwkundig onderzoek</li>
<li style="--marker-color: #5cbe55">Funderingsadvies</li>
<li style="--marker-color: #bdc262">Funderingsonderzoek</li>
<li style="--marker-color: #c4a169">Extra onderzoek</li>
<li style="--marker-color: #c67e70">Grondwaterniveau onderzoek</li>
<li style="--marker-color: #6a6c70">Onbekend</li>
</ol>
</div>
<div class="space-y-4">
<h3 class="heading-6">Schadeoorzaak</h3>
<ol class="list--legenda">
<li style="--marker-color: #55b5a7">Ontwateringsdiepte</li>
<li style="--marker-color: #4b8fbf">Overbelasting</li>
<li style="--marker-color: #4145c9">Bacteriële aantasting</li>
<li style="--marker-color: #8936d4">Schimmelaantasting</li>
<li style="--marker-color: #de2ccf">Bodemdaling</li>
<li style="--marker-color: #d2386f">Planten en wortels</li>
<li style="--marker-color: #c75d43">Aardbeving</li>
<li style="--marker-color: #bba14f">Partieel funderingsherstel</li>
<li style="--marker-color: #95b05a">Constructiefout</li>
<li style="--marker-color: #6ea466">Negatieve kleef</li>
<li style="--marker-color: #6a6c70">Onbekend</li>
</ol>
</div>
<div class="space-y-4">
<h3 class="heading-6">Droogstand</h3>
<ol class="list--legenda">
<li class="legenda-risk--10">A</li>
<li class="legenda-risk--20">B</li>
<li class="legenda-risk--30">C</li>
<li class="legenda-risk--40">D</li>
<li class="legenda-risk--50">E</li>
</ol>
</div>
<div class="space-y-4">
<h3 class="heading-6">Ontwateringsdiepte</h3>
<ol class="list--legenda">
<li class="legenda-risk--10">A</li>
<li class="legenda-risk--20">B</li>
<li class="legenda-risk--30">C</li>
<li class="legenda-risk--40">D</li>
<li class="legenda-risk--50">E</li>
</ol>
</div>
<div class="space-y-4">
<h3 class="heading-6">Bacteriele aantasting</h3>
<ol class="list--legenda">
<li class="legenda-risk--10">A</li>
<li class="legenda-risk--20">B</li>
<li class="legenda-risk--30">C</li>
<li class="legenda-risk--40">D</li>
<li class="legenda-risk--50">E</li>
</ol>
</div>
<div class="space-y-4">
<h3 class="heading-6">Herstelkosten</h3>
<ol class="list--legenda">
<li class="legenda-blue--20">minder dan €25.000</li>
<li class="legenda-blue--30">€25.000 t/m €50.000</li>
<li class="legenda-blue--40">€50.000 t/m €75.000</li>
<li class="legenda-blue--50">€75.000 t/m €100.000</li>
<li class="legenda-blue--60">€100.000 t/m €125.000</li>
<li class="legenda-blue--70">€125.000 t/m €150.000</li>
<li class="legenda-blue--80">€150.000 t/m €175.000</li>
<li class="legenda-blue--90">€175.000 t/m €200.000</li>
<li class="legenda-blue--100">meer dan €200.000</li>
</ol>
</div>
<div class="space-y-4">
<h3 class="heading-6">Op basis van onderzoek</h3>
<ol class="list--legenda">
<li class="legenda-risk--10">A</li>
<li class="legenda-risk--20">B</li>
<li class="legenda-risk--30">C</li>
<li class="legenda-risk--40">D</li>
<li class="legenda-risk--50">E</li>
</ol>
</div>
<div class="space-y-4">
<h3 class="heading-6">Funderingstype</h3>
<ol class="list--legenda">
<li style="--marker-color: #c75d43">Houten paal</li>
<li style="--marker-color: #9f8170">Houten paal met oplanger</li>
<li style="--marker-color: #6a6c70">Betonnen paal</li>
<li style="--marker-color: #ff3333">Niet onderheid</li>
<li style="--marker-color: #bdbebf">Stalen paal</li>
<li style="--marker-color: #7192de">Verzwaarde betonpuntpaal</li>
<li style="--marker-color: #b271de">Combinatie</li>
<li style="--marker-color: #ffec33">Overig</li>
<li style="--marker-color: #71decc">Onbekend</li>
</ol>
</div>
<div class="space-y-4">
<h3 class="heading-6">Hersteld</h3>
<ol class="list--legenda">
<li style="--marker-color: #5cbe55">Volledig herstel</li>
<li style="--marker-color: #47baa5">Partieel herstel</li>
<li style="--marker-color: #8c4bb6">Paalkop verlaging</li>
<li style="--marker-color: #c67e70">Grondverbetering</li>
<li style="--marker-color: #5b4ab7">Onbekend</li>
</ol>
</div>
<div class="space-y-4">
<h3 class="heading-6">Pandzakking</h3>
<ol class="list--legenda">
<li class="legenda-blue--20">meer dan 0 mm/jaar</li>
<li class="legenda-blue--30">0,0 t/m -0,5 mm/jaar</li>
<li class="legenda-blue--40">-0,5 t/m -1,0 mm/jaar</li>
<li class="legenda-blue--50">-1,0 t/m -1,5 mm/jaar</li>
<li class="legenda-blue--60">-1,5 t/m -2,0 mm/jaar</li>
<li class="legenda-blue--70">-2,0 t/m -2,5 mm/jaar</li>
<li class="legenda-blue--80">minder dan -2,5 mm/jaar</li>
</ol>
</div>
<div class="space-y-4">
<h3 class="heading-6">Funderingstype indicatief</h3>
<ol class="list--legenda">
<li style="--marker-color: #d8907d">Houten paal</li>
<li style="--marker-color: #edd5b1">Houten paal met oplanger</li>
<li style="--marker-color: #6a6c70">Betonnen paal</li>
<li style="--marker-color: #ff8080">Niet onderheid</li>
</ol>
</div>
<div class="space-y-4">
<h3 class="heading-6">Funderingstype afgeleid</h3>
<ol class="list--legenda">
<li style="--marker-color: #c75d43">Houten paal</li>
<li style="--marker-color: #9f8170">Houten paal met oplanger</li>
<li style="--marker-color: #6a6c70">Betonnen paal</li>
<li style="--marker-color: #ff3333">Niet onderheid</li>
<li style="--marker-color: #bdbebf">Stalen paal</li>
<li style="--marker-color: #7192de">Verzwaarde betonpuntpaal</li>
<li style="--marker-color: #b271de">Combinatie</li>
<li style="--marker-color: #ffec33">Overig</li>
<li style="--marker-color: #71decc">Onbekend</li>
</ol>
</div>
<div class="space-y-4">
<h3 class="heading-6">Eigenaar</h3>
<ol class="list--legenda">
<li style="--marker-color: #d11313">Eigenaar</li>
</ol>
</div>
<div class="space-y-4">
<h3 class="heading-6">Funderingstype afgeleid</h3>
<ol class="list--legenda">
<li style="--marker-color: #293575">Ouder dan 1960</li>
<li style="--marker-color: #1261a3">1960 t/m 1970</li>
<li style="--marker-color: #69a8de">1970 t/m 1980</li>
<li style="--marker-color: #99c1e9">1980 t/m 1990</li>
<li style="--marker-color: #b378b1">1990 t/m 2000</li>
<li style="--marker-color: #bd6495">2000 t/m 2010</li>
<li style="--marker-color: #bd6495">2010 t/m 2020</li>
<li style="--marker-color: #d11313">Nieuwer dan 2020</li>
</ol>
</div>
<div class="space-y-4">
<h3 class="heading-6">Bouwkundige eenheid</h3>
<ol class="list--legenda">
<li style="--marker-color: #0800eb">Indicatief</li>
</ol>
</div>
<div class="space-y-4">
<h3 class="heading-6">Loodmeting</h3>
<ol class="list--legenda">
<li class="legenda-risk--10">Nihil</li>
<li class="legenda-risk--20">Klein</li>
<li class="legenda-risk--30">Matig</li>
<li class="legenda-risk--40">Groot</li>
<li class="legenda-risk--50">Zeer groot</li>
</ol>
</div>
<div class="space-y-4">
<h3 class="heading-6">Lintvoegmeting</h3>
<ol class="list--legenda">
<li class="legenda-risk--10">Nihil</li>
<li class="legenda-risk--20">Klein</li>
<li class="legenda-risk--30">Matig</li>
<li class="legenda-risk--40">Groot</li>
<li class="legenda-risk--50">Zeer groot</li>
</ol>
</div>
<div class="space-y-4">
<h3 class="heading-6">Risico gevelscan</h3>
<ol class="list--legenda">
<li class="legenda-risk--10">A</li>
<li class="legenda-risk--20">B</li>
<li class="legenda-risk--30">C</li>
<li class="legenda-risk--40">D</li>
<li class="legenda-risk--50">E</li>
</ol>
</div>
<div class="space-y-4">
<h3 class="heading-6">Scheuren</h3>
<ol class="list--legenda">
<li class="legenda-risk--10">Geen</li>
<li class="legenda-risk--20">Zeer klein</li>
<li class="legenda-risk--30">Klein</li>
<li class="legenda-risk--40">Matig</li>
<li class="legenda-risk--50">Groot</li>
</ol>
</div>
<div class="space-y-4">
<h3 class="heading-6">Incident</h3>
<ol class="list--legenda">
<li class="legenda-blue--80">Incident</li>
</ol>
</div>
<div class="space-y-4">
<h3 class="heading-6">Incident per buurt</h3>
<ol class="list--legenda">
<li class="legenda-blue--20">1 melding</li>
<li class="legenda-blue--40">tot 3 meldingen</li>
<li class="legenda-blue--60">tot 5 meldingen</li>
<li class="legenda-blue--80">Meer dan 10 meldingen</li>
</ol>
</div>
<div class="space-y-4">
<h3 class="heading-6">Incident per wijk</h3>
<ol class="list--legenda">
<li class="legenda-blue--20">1 melding</li>
<li class="legenda-blue--40">tot 3 meldingen</li>
<li class="legenda-blue--60">tot 5 meldingen</li>
<li class="legenda-blue--80">Meer dan 10 meldingen</li>
</ol>
</div>
<div class="space-y-4">
<h3 class="heading-6">Incident per gemeente</h3>
<ol class="list--legenda">
<li class="legenda-blue--20">1 melding</li>
<li class="legenda-blue--40">tot 3 meldingen</li>
<li class="legenda-blue--60">tot 5 meldingen</li>
<li class="legenda-blue--80">Meer dan 10 meldingen</li>
</ol>
</div>
</div>