Highlight Box

Component preview opent in nieuw tabblad

Standaard achtergrondkleur grijs, andere varianten geel (modifier dso-yellow) en met grijze border (modifier dso-border).

<!-- Default -->
<dso-highlight-box>
    <div class="dso-rich-content">
        <h3>Toelichting: Vergunningvrij onder voorbehoud</h3>
        <p>Het Informatiehuis Bouw kent, op basis van de huidige gebruikerswensen, vier Informatieproducten, namelijk het Opleverdossier, de Bouwregelgeving, de Vergunningvrije bouwwerken en een Digitaliseringshulp.</p>
        <p>Het Opleverdossier (zie voor een nadere omschrijving van de informatieproducten de volgende paragrafen) is de, door gebruikers gewenste, centrale registratie waarin alle informatie over een bouwwerk is opgenomen. Het gaat hierbij om de tekeningen, berekeningen en de resultaten van de kwaliteitsborging (zoals toetsen en inspecties).</p>
        <p>De <a href="#">Bouwregelgeving</a> is een database met alle bouwregelgeving in Nederland, die op zodanige wijze moet zijn ingericht en ontsloten dat die voldoet aan de eisen van de Omgevingswet (3B's), en daarmee bruikbaar is in de ontwerp- en toetsingsfase van ieder bouwwerk.</p>
        <p>Het derde informatieproduct zijn de Vergunningvrije bouwwerken, hierin zijn opgenomen de (bekende) bouwwerken die vergunningvrij, maar niet regelvrij, zijn gerealiseerd. Het vierde en vooralsnog laatste informatieproduct is de Digitaliseringshulp, een service voor het centraal en gestandaardiseerd digitaliseren van documenten.</p>
        <div class="dso-button-row">
            <a href="#" class="dso-primary">Primaire button</a>
            <a href="#" class="dso-secondary">Secundaire button</a>
            <a href="#" class="dso-tertiary btn-align">
                Tertiaire button
                <dso-icon icon="chevron-down"></dso-icon>
            </a>
        </div>
    </div>

</dso-highlight-box>
<!-- Yellow -->
<dso-highlight-box yellow>
    <div class="dso-rich-content">
        <h3>Toelichting: Vergunningvrij onder voorbehoud</h3>
        <p>Het Informatiehuis Bouw kent, op basis van de huidige gebruikerswensen, vier Informatieproducten, namelijk het Opleverdossier, de Bouwregelgeving, de Vergunningvrije bouwwerken en een Digitaliseringshulp.</p>
        <p>Het Opleverdossier (zie voor een nadere omschrijving van de informatieproducten de volgende paragrafen) is de, door gebruikers gewenste, centrale registratie waarin alle informatie over een bouwwerk is opgenomen. Het gaat hierbij om de tekeningen, berekeningen en de resultaten van de kwaliteitsborging (zoals toetsen en inspecties).</p>
        <p>De <a href="#">Bouwregelgeving</a> is een database met alle bouwregelgeving in Nederland, die op zodanige wijze moet zijn ingericht en ontsloten dat die voldoet aan de eisen van de Omgevingswet (3B's), en daarmee bruikbaar is in de ontwerp- en toetsingsfase van ieder bouwwerk.</p>
        <p>Het derde informatieproduct zijn de Vergunningvrije bouwwerken, hierin zijn opgenomen de (bekende) bouwwerken die vergunningvrij, maar niet regelvrij, zijn gerealiseerd. Het vierde en vooralsnog laatste informatieproduct is de Digitaliseringshulp, een service voor het centraal en gestandaardiseerd digitaliseren van documenten.</p>
        <div class="dso-button-row">
            <a href="#" class="dso-primary">Primaire button</a>
            <a href="#" class="dso-secondary">Secundaire button</a>
            <a href="#" class="dso-tertiary btn-align">
                Tertiaire button
                <dso-icon icon="chevron-down"></dso-icon>
            </a>
        </div>
    </div>

</dso-highlight-box>
<!-- Bordered -->
<dso-highlight-box border>
    <div class="dso-rich-content">
        <h3>Toelichting: Vergunningvrij onder voorbehoud</h3>
        <p>Het Informatiehuis Bouw kent, op basis van de huidige gebruikerswensen, vier Informatieproducten, namelijk het Opleverdossier, de Bouwregelgeving, de Vergunningvrije bouwwerken en een Digitaliseringshulp.</p>
        <p>Het Opleverdossier (zie voor een nadere omschrijving van de informatieproducten de volgende paragrafen) is de, door gebruikers gewenste, centrale registratie waarin alle informatie over een bouwwerk is opgenomen. Het gaat hierbij om de tekeningen, berekeningen en de resultaten van de kwaliteitsborging (zoals toetsen en inspecties).</p>
        <p>De <a href="#">Bouwregelgeving</a> is een database met alle bouwregelgeving in Nederland, die op zodanige wijze moet zijn ingericht en ontsloten dat die voldoet aan de eisen van de Omgevingswet (3B's), en daarmee bruikbaar is in de ontwerp- en toetsingsfase van ieder bouwwerk.</p>
        <p>Het derde informatieproduct zijn de Vergunningvrije bouwwerken, hierin zijn opgenomen de (bekende) bouwwerken die vergunningvrij, maar niet regelvrij, zijn gerealiseerd. Het vierde en vooralsnog laatste informatieproduct is de Digitaliseringshulp, een service voor het centraal en gestandaardiseerd digitaliseren van documenten.</p>
        <div class="dso-button-row">
            <a href="#" class="dso-primary">Primaire button</a>
            <a href="#" class="dso-secondary">Secundaire button</a>
            <a href="#" class="dso-tertiary btn-align">
                Tertiaire button
                <dso-icon icon="chevron-down"></dso-icon>
            </a>
        </div>
    </div>

</dso-highlight-box>
<!-- White Drop Shadow -->
<dso-highlight-box white drop-shadow>
    <div class="dso-rich-content">
        <h3>Toelichting: Vergunningvrij onder voorbehoud</h3>
        <p>Het Informatiehuis Bouw kent, op basis van de huidige gebruikerswensen, vier Informatieproducten, namelijk het Opleverdossier, de Bouwregelgeving, de Vergunningvrije bouwwerken en een Digitaliseringshulp.</p>
        <p>Het Opleverdossier (zie voor een nadere omschrijving van de informatieproducten de volgende paragrafen) is de, door gebruikers gewenste, centrale registratie waarin alle informatie over een bouwwerk is opgenomen. Het gaat hierbij om de tekeningen, berekeningen en de resultaten van de kwaliteitsborging (zoals toetsen en inspecties).</p>
        <p>De <a href="#">Bouwregelgeving</a> is een database met alle bouwregelgeving in Nederland, die op zodanige wijze moet zijn ingericht en ontsloten dat die voldoet aan de eisen van de Omgevingswet (3B's), en daarmee bruikbaar is in de ontwerp- en toetsingsfase van ieder bouwwerk.</p>
        <p>Het derde informatieproduct zijn de Vergunningvrije bouwwerken, hierin zijn opgenomen de (bekende) bouwwerken die vergunningvrij, maar niet regelvrij, zijn gerealiseerd. Het vierde en vooralsnog laatste informatieproduct is de Digitaliseringshulp, een service voor het centraal en gestandaardiseerd digitaliseren van documenten.</p>
        <div class="dso-button-row">
            <a href="#" class="dso-primary">Primaire button</a>
            <a href="#" class="dso-secondary">Secundaire button</a>
            <a href="#" class="dso-tertiary btn-align">
                Tertiaire button
                <dso-icon icon="chevron-down"></dso-icon>
            </a>
        </div>
    </div>

</dso-highlight-box>
<!-- Step Indicator -->
<dso-highlight-box yellow step="2">
    <div class="dso-rich-content">
        <h3>Toelichting: Vergunningvrij onder voorbehoud</h3>
        <p>Het Informatiehuis Bouw kent, op basis van de huidige gebruikerswensen, vier Informatieproducten, namelijk het Opleverdossier, de Bouwregelgeving, de Vergunningvrije bouwwerken en een Digitaliseringshulp.</p>
        <p>Het Opleverdossier (zie voor een nadere omschrijving van de informatieproducten de volgende paragrafen) is de, door gebruikers gewenste, centrale registratie waarin alle informatie over een bouwwerk is opgenomen. Het gaat hierbij om de tekeningen, berekeningen en de resultaten van de kwaliteitsborging (zoals toetsen en inspecties).</p>
        <p>De <a href="#">Bouwregelgeving</a> is een database met alle bouwregelgeving in Nederland, die op zodanige wijze moet zijn ingericht en ontsloten dat die voldoet aan de eisen van de Omgevingswet (3B's), en daarmee bruikbaar is in de ontwerp- en toetsingsfase van ieder bouwwerk.</p>
        <p>Het derde informatieproduct zijn de Vergunningvrije bouwwerken, hierin zijn opgenomen de (bekende) bouwwerken die vergunningvrij, maar niet regelvrij, zijn gerealiseerd. Het vierde en vooralsnog laatste informatieproduct is de Digitaliseringshulp, een service voor het centraal en gestandaardiseerd digitaliseren van documenten.</p>
        <div class="dso-button-row">
            <a href="#" class="dso-primary">Primaire button</a>
            <a href="#" class="dso-secondary">Secundaire button</a>
            <a href="#" class="dso-tertiary btn-align">
                Tertiaire button
                <dso-icon icon="chevron-down"></dso-icon>
            </a>
        </div>
    </div>

</dso-highlight-box>
<!-- Icon Indicator -->
<dso-highlight-box yellow>
    <dso-icon icon="plus" slot="icon"></dso-icon>
    <div class="dso-rich-content">
        <h3>Toelichting: Vergunningvrij onder voorbehoud</h3>
        <p>Het Informatiehuis Bouw kent, op basis van de huidige gebruikerswensen, vier Informatieproducten, namelijk het Opleverdossier, de Bouwregelgeving, de Vergunningvrije bouwwerken en een Digitaliseringshulp.</p>
        <p>Het Opleverdossier (zie voor een nadere omschrijving van de informatieproducten de volgende paragrafen) is de, door gebruikers gewenste, centrale registratie waarin alle informatie over een bouwwerk is opgenomen. Het gaat hierbij om de tekeningen, berekeningen en de resultaten van de kwaliteitsborging (zoals toetsen en inspecties).</p>
        <p>De <a href="#">Bouwregelgeving</a> is een database met alle bouwregelgeving in Nederland, die op zodanige wijze moet zijn ingericht en ontsloten dat die voldoet aan de eisen van de Omgevingswet (3B's), en daarmee bruikbaar is in de ontwerp- en toetsingsfase van ieder bouwwerk.</p>
        <p>Het derde informatieproduct zijn de Vergunningvrije bouwwerken, hierin zijn opgenomen de (bekende) bouwwerken die vergunningvrij, maar niet regelvrij, zijn gerealiseerd. Het vierde en vooralsnog laatste informatieproduct is de Digitaliseringshulp, een service voor het centraal en gestandaardiseerd digitaliseren van documenten.</p>
        <div class="dso-button-row">
            <a href="#" class="dso-primary">Primaire button</a>
            <a href="#" class="dso-secondary">Secundaire button</a>
            <a href="#" class="dso-tertiary btn-align">
                Tertiaire button
                <dso-icon icon="chevron-down"></dso-icon>
            </a>
        </div>
    </div>

</dso-highlight-box>
<!-- Link List -->
<dso-highlight-box>

    <ul class="dso-link-list">
        <li>
            <a href="#" class="extern" target="_blank" rel="noopener noreferrer">Externe link<span class="sr-only">(Opent andere website in nieuw tabblad)</span></a>

        </li>
        <li>
            <a href="#" class="download">Download link</a>

        </li>
        <li>
            <a href="#">Interne link</a>

        </li>
    </ul>

</dso-highlight-box>
<dso-highlight-box yellow>

    <ul class="dso-link-list">
        <li>
            <a href="#" class="extern" target="_blank" rel="noopener noreferrer">Externe link<span class="sr-only">(Opent andere website in nieuw tabblad)</span></a>

        </li>
        <li>
            <a href="#" class="download">Download link</a>

        </li>
        <li>
            <a href="#">Interne link</a>

        </li>
    </ul>

</dso-highlight-box>
<dso-highlight-box border>

    <ul class="dso-link-list">
        <li>
            <a href="#" class="extern" target="_blank" rel="noopener noreferrer">Externe link<span class="sr-only">(Opent andere website in nieuw tabblad)</span></a>

        </li>
        <li>
            <a href="#" class="download">Download link</a>

        </li>
        <li>
            <a href="#">Interne link</a>

        </li>
    </ul>

</dso-highlight-box>
<dso-highlight-box drop-shadow white>

    <ul class="dso-link-list">
        <li>
            <a href="#" class="extern" target="_blank" rel="noopener noreferrer">Externe link<span class="sr-only">(Opent andere website in nieuw tabblad)</span></a>

        </li>
        <li>
            <a href="#" class="download">Download link</a>

        </li>
        <li>
            <a href="#">Interne link</a>

        </li>
    </ul>

</dso-highlight-box>
<!-- Default -->
<div class="dso-highlight-box">
  <div class="dso-rich-content">
    <h3>Toelichting: Vergunningvrij onder voorbehoud</h3>
    <p>
      Het Informatiehuis Bouw kent, op basis van de huidige gebruikerswensen, vier Informatieproducten, namelijk het
      Opleverdossier, de Bouwregelgeving, de Vergunningvrije bouwwerken en een Digitaliseringshulp.
    </p>
    <p>
      Het Opleverdossier (zie voor een nadere omschrijving van de informatieproducten de volgende paragrafen) is de,
      door gebruikers gewenste, centrale registratie waarin alle informatie over een bouwwerk is opgenomen. Het gaat
      hierbij om de tekeningen, berekeningen en de resultaten van de kwaliteitsborging (zoals toetsen en inspecties).
    </p>
    <p>
      De <a href="#">Bouwregelgeving</a> is een database met alle bouwregelgeving in Nederland, die op zodanige wijze
      moet zijn ingericht en ontsloten dat die voldoet aan de eisen van de Omgevingswet (3B's), en daarmee bruikbaar is
      in de ontwerp- en toetsingsfase van ieder bouwwerk.
    </p>
    <p>
      Het derde informatieproduct zijn de Vergunningvrije bouwwerken, hierin zijn opgenomen de (bekende) bouwwerken die
      vergunningvrij, maar niet regelvrij, zijn gerealiseerd. Het vierde en vooralsnog laatste informatieproduct is de
      Digitaliseringshulp, een service voor het centraal en gestandaardiseerd digitaliseren van documenten.
    </p>
    <div class="dso-button-row">
      <a href="#" class="dso-primary">Primaire button</a> <a href="#" class="dso-secondary">Secundaire button</a>
      <a href="#" class="dso-tertiary btn-align"> Tertiaire button <dso-icon icon="chevron-down"></dso-icon> </a>
    </div>
  </div>
</div>
<!-- Yellow -->
<div class="dso-highlight-box dso-yellow">
  <div class="dso-rich-content">
    <h3>Toelichting: Vergunningvrij onder voorbehoud</h3>
    <p>
      Het Informatiehuis Bouw kent, op basis van de huidige gebruikerswensen, vier Informatieproducten, namelijk het
      Opleverdossier, de Bouwregelgeving, de Vergunningvrije bouwwerken en een Digitaliseringshulp.
    </p>
    <p>
      Het Opleverdossier (zie voor een nadere omschrijving van de informatieproducten de volgende paragrafen) is de,
      door gebruikers gewenste, centrale registratie waarin alle informatie over een bouwwerk is opgenomen. Het gaat
      hierbij om de tekeningen, berekeningen en de resultaten van de kwaliteitsborging (zoals toetsen en inspecties).
    </p>
    <p>
      De <a href="#">Bouwregelgeving</a> is een database met alle bouwregelgeving in Nederland, die op zodanige wijze
      moet zijn ingericht en ontsloten dat die voldoet aan de eisen van de Omgevingswet (3B's), en daarmee bruikbaar is
      in de ontwerp- en toetsingsfase van ieder bouwwerk.
    </p>
    <p>
      Het derde informatieproduct zijn de Vergunningvrije bouwwerken, hierin zijn opgenomen de (bekende) bouwwerken die
      vergunningvrij, maar niet regelvrij, zijn gerealiseerd. Het vierde en vooralsnog laatste informatieproduct is de
      Digitaliseringshulp, een service voor het centraal en gestandaardiseerd digitaliseren van documenten.
    </p>
    <div class="dso-button-row">
      <a href="#" class="dso-primary">Primaire button</a> <a href="#" class="dso-secondary">Secundaire button</a>
      <a href="#" class="dso-tertiary btn-align"> Tertiaire button <dso-icon icon="chevron-down"></dso-icon> </a>
    </div>
  </div>
</div>
<!-- Bordered -->
<div class="dso-highlight-box dso-border">
  <div class="dso-rich-content">
    <h3>Toelichting: Vergunningvrij onder voorbehoud</h3>
    <p>
      Het Informatiehuis Bouw kent, op basis van de huidige gebruikerswensen, vier Informatieproducten, namelijk het
      Opleverdossier, de Bouwregelgeving, de Vergunningvrije bouwwerken en een Digitaliseringshulp.
    </p>
    <p>
      Het Opleverdossier (zie voor een nadere omschrijving van de informatieproducten de volgende paragrafen) is de,
      door gebruikers gewenste, centrale registratie waarin alle informatie over een bouwwerk is opgenomen. Het gaat
      hierbij om de tekeningen, berekeningen en de resultaten van de kwaliteitsborging (zoals toetsen en inspecties).
    </p>
    <p>
      De <a href="#">Bouwregelgeving</a> is een database met alle bouwregelgeving in Nederland, die op zodanige wijze
      moet zijn ingericht en ontsloten dat die voldoet aan de eisen van de Omgevingswet (3B's), en daarmee bruikbaar is
      in de ontwerp- en toetsingsfase van ieder bouwwerk.
    </p>
    <p>
      Het derde informatieproduct zijn de Vergunningvrije bouwwerken, hierin zijn opgenomen de (bekende) bouwwerken die
      vergunningvrij, maar niet regelvrij, zijn gerealiseerd. Het vierde en vooralsnog laatste informatieproduct is de
      Digitaliseringshulp, een service voor het centraal en gestandaardiseerd digitaliseren van documenten.
    </p>
    <div class="dso-button-row">
      <a href="#" class="dso-primary">Primaire button</a> <a href="#" class="dso-secondary">Secundaire button</a>
      <a href="#" class="dso-tertiary btn-align"> Tertiaire button <dso-icon icon="chevron-down"></dso-icon> </a>
    </div>
  </div>
</div>
<!-- White Drop Shadow -->
<div class="dso-highlight-box dso-white dso-drop-shadow">
  <div class="dso-rich-content">
    <h3>Toelichting: Vergunningvrij onder voorbehoud</h3>
    <p>
      Het Informatiehuis Bouw kent, op basis van de huidige gebruikerswensen, vier Informatieproducten, namelijk het
      Opleverdossier, de Bouwregelgeving, de Vergunningvrije bouwwerken en een Digitaliseringshulp.
    </p>
    <p>
      Het Opleverdossier (zie voor een nadere omschrijving van de informatieproducten de volgende paragrafen) is de,
      door gebruikers gewenste, centrale registratie waarin alle informatie over een bouwwerk is opgenomen. Het gaat
      hierbij om de tekeningen, berekeningen en de resultaten van de kwaliteitsborging (zoals toetsen en inspecties).
    </p>
    <p>
      De <a href="#">Bouwregelgeving</a> is een database met alle bouwregelgeving in Nederland, die op zodanige wijze
      moet zijn ingericht en ontsloten dat die voldoet aan de eisen van de Omgevingswet (3B's), en daarmee bruikbaar is
      in de ontwerp- en toetsingsfase van ieder bouwwerk.
    </p>
    <p>
      Het derde informatieproduct zijn de Vergunningvrije bouwwerken, hierin zijn opgenomen de (bekende) bouwwerken die
      vergunningvrij, maar niet regelvrij, zijn gerealiseerd. Het vierde en vooralsnog laatste informatieproduct is de
      Digitaliseringshulp, een service voor het centraal en gestandaardiseerd digitaliseren van documenten.
    </p>
    <div class="dso-button-row">
      <a href="#" class="dso-primary">Primaire button</a> <a href="#" class="dso-secondary">Secundaire button</a>
      <a href="#" class="dso-tertiary btn-align"> Tertiaire button <dso-icon icon="chevron-down"></dso-icon> </a>
    </div>
  </div>
</div>
<!-- Step Indicator -->
<div class="dso-highlight-box dso-yellow dso-has-counter">
  <div class="dso-step-counter">2</div>
  <div class="dso-rich-content">
    <h3>Toelichting: Vergunningvrij onder voorbehoud</h3>
    <p>
      Het Informatiehuis Bouw kent, op basis van de huidige gebruikerswensen, vier Informatieproducten, namelijk het
      Opleverdossier, de Bouwregelgeving, de Vergunningvrije bouwwerken en een Digitaliseringshulp.
    </p>
    <p>
      Het Opleverdossier (zie voor een nadere omschrijving van de informatieproducten de volgende paragrafen) is de,
      door gebruikers gewenste, centrale registratie waarin alle informatie over een bouwwerk is opgenomen. Het gaat
      hierbij om de tekeningen, berekeningen en de resultaten van de kwaliteitsborging (zoals toetsen en inspecties).
    </p>
    <p>
      De <a href="#">Bouwregelgeving</a> is een database met alle bouwregelgeving in Nederland, die op zodanige wijze
      moet zijn ingericht en ontsloten dat die voldoet aan de eisen van de Omgevingswet (3B's), en daarmee bruikbaar is
      in de ontwerp- en toetsingsfase van ieder bouwwerk.
    </p>
    <p>
      Het derde informatieproduct zijn de Vergunningvrije bouwwerken, hierin zijn opgenomen de (bekende) bouwwerken die
      vergunningvrij, maar niet regelvrij, zijn gerealiseerd. Het vierde en vooralsnog laatste informatieproduct is de
      Digitaliseringshulp, een service voor het centraal en gestandaardiseerd digitaliseren van documenten.
    </p>
    <div class="dso-button-row">
      <a href="#" class="dso-primary">Primaire button</a> <a href="#" class="dso-secondary">Secundaire button</a>
      <a href="#" class="dso-tertiary btn-align"> Tertiaire button <dso-icon icon="chevron-down"></dso-icon> </a>
    </div>
  </div>
</div>
<!-- Icon Indicator -->
<div class="dso-highlight-box dso-yellow dso-has-counter">
  <div class="dso-step-counter"><dso-icon icon="plus" slot="icon"></dso-icon></div>
  <div class="dso-rich-content">
    <h3>Toelichting: Vergunningvrij onder voorbehoud</h3>
    <p>
      Het Informatiehuis Bouw kent, op basis van de huidige gebruikerswensen, vier Informatieproducten, namelijk het
      Opleverdossier, de Bouwregelgeving, de Vergunningvrije bouwwerken en een Digitaliseringshulp.
    </p>
    <p>
      Het Opleverdossier (zie voor een nadere omschrijving van de informatieproducten de volgende paragrafen) is de,
      door gebruikers gewenste, centrale registratie waarin alle informatie over een bouwwerk is opgenomen. Het gaat
      hierbij om de tekeningen, berekeningen en de resultaten van de kwaliteitsborging (zoals toetsen en inspecties).
    </p>
    <p>
      De <a href="#">Bouwregelgeving</a> is een database met alle bouwregelgeving in Nederland, die op zodanige wijze
      moet zijn ingericht en ontsloten dat die voldoet aan de eisen van de Omgevingswet (3B's), en daarmee bruikbaar is
      in de ontwerp- en toetsingsfase van ieder bouwwerk.
    </p>
    <p>
      Het derde informatieproduct zijn de Vergunningvrije bouwwerken, hierin zijn opgenomen de (bekende) bouwwerken die
      vergunningvrij, maar niet regelvrij, zijn gerealiseerd. Het vierde en vooralsnog laatste informatieproduct is de
      Digitaliseringshulp, een service voor het centraal en gestandaardiseerd digitaliseren van documenten.
    </p>
    <div class="dso-button-row">
      <a href="#" class="dso-primary">Primaire button</a> <a href="#" class="dso-secondary">Secundaire button</a>
      <a href="#" class="dso-tertiary btn-align"> Tertiaire button <dso-icon icon="chevron-down"></dso-icon> </a>
    </div>
  </div>
</div>
<!-- Link List -->
<div class="dso-highlight-box">
  <ul class="dso-link-list">
    <li>
      <a href="#" class="extern" target="_blank" rel="noopener noreferrer"
        >Externe link<span class="sr-only">(Opent andere website in nieuw tabblad)</span></a
      >
    </li>
    <li><a href="#" class="download">Download link</a></li>
    <li><a href="#">Interne link</a></li>
  </ul>
</div>
<div class="dso-highlight-box dso-yellow">
  <ul class="dso-link-list">
    <li>
      <a href="#" class="extern" target="_blank" rel="noopener noreferrer"
        >Externe link<span class="sr-only">(Opent andere website in nieuw tabblad)</span></a
      >
    </li>
    <li><a href="#" class="download">Download link</a></li>
    <li><a href="#">Interne link</a></li>
  </ul>
</div>
<div class="dso-highlight-box dso-border">
  <ul class="dso-link-list">
    <li>
      <a href="#" class="extern" target="_blank" rel="noopener noreferrer"
        >Externe link<span class="sr-only">(Opent andere website in nieuw tabblad)</span></a
      >
    </li>
    <li><a href="#" class="download">Download link</a></li>
    <li><a href="#">Interne link</a></li>
  </ul>
</div>
<div class="dso-highlight-box dso-white dso-drop-shadow">
  <ul class="dso-link-list">
    <li>
      <a href="#" class="extern" target="_blank" rel="noopener noreferrer"
        >Externe link<span class="sr-only">(Opent andere website in nieuw tabblad)</span></a
      >
    </li>
    <li><a href="#" class="download">Download link</a></li>
    <li><a href="#">Interne link</a></li>
  </ul>
</div>
<!-- Default -->
<dso-highlight-box
  {{ attributes([yellow, 'yellow'], [border, 'border'], [white, 'white'], [dropShadow, 'drop-shadow'], [step, 'step', step])}}
>
  {%- if icon and label %}
    <dso-icon icon="{{ icon }}" slot="icon"></dso-icon>
  {% endif -%}
  {{ yield | safe }}
</dso-highlight-box>

<!-- Yellow -->
<dso-highlight-box
  {{ attributes([yellow, 'yellow'], [border, 'border'], [white, 'white'], [dropShadow, 'drop-shadow'], [step, 'step', step])}}
>
  {%- if icon and label %}
    <dso-icon icon="{{ icon }}" slot="icon"></dso-icon>
  {% endif -%}
  {{ yield | safe }}
</dso-highlight-box>

<!-- Bordered -->
<dso-highlight-box
  {{ attributes([yellow, 'yellow'], [border, 'border'], [white, 'white'], [dropShadow, 'drop-shadow'], [step, 'step', step])}}
>
  {%- if icon and label %}
    <dso-icon icon="{{ icon }}" slot="icon"></dso-icon>
  {% endif -%}
  {{ yield | safe }}
</dso-highlight-box>

<!-- White Drop Shadow -->
<dso-highlight-box
  {{ attributes([yellow, 'yellow'], [border, 'border'], [white, 'white'], [dropShadow, 'drop-shadow'], [step, 'step', step])}}
>
  {%- if icon and label %}
    <dso-icon icon="{{ icon }}" slot="icon"></dso-icon>
  {% endif -%}
  {{ yield | safe }}
</dso-highlight-box>

<!-- Step Indicator -->
<dso-highlight-box
  {{ attributes([yellow, 'yellow'], [border, 'border'], [white, 'white'], [dropShadow, 'drop-shadow'], [step, 'step', step])}}
>
  {%- if icon and label %}
    <dso-icon icon="{{ icon }}" slot="icon"></dso-icon>
  {% endif -%}
  {{ yield | safe }}
</dso-highlight-box>

<!-- Icon Indicator -->
<dso-highlight-box
  {{ attributes([yellow, 'yellow'], [border, 'border'], [white, 'white'], [dropShadow, 'drop-shadow'], [step, 'step', step])}}
>
  {%- if icon and label %}
    <dso-icon icon="{{ icon }}" slot="icon"></dso-icon>
  {% endif -%}
  {{ yield | safe }}
</dso-highlight-box>

<!-- Link List -->
<dso-highlight-box>
  {% render '@link-list' %}
</dso-highlight-box>
<dso-highlight-box yellow>
  {% render '@link-list' %}
</dso-highlight-box>
<dso-highlight-box border>
  {% render '@link-list' %}
</dso-highlight-box>
<dso-highlight-box drop-shadow white>
  {% render '@link-list' %}
</dso-highlight-box>
/* Default */
__title: Standaard
yield: |
  <div class="dso-rich-content">
    <h3>Toelichting: Vergunningvrij onder voorbehoud</h3>
    <p>Het Informatiehuis Bouw kent, op basis van de huidige gebruikerswensen, vier Informatieproducten, namelijk het Opleverdossier, de Bouwregelgeving, de Vergunningvrije bouwwerken en een Digitaliseringshulp.</p>
    <p>Het Opleverdossier (zie voor een nadere omschrijving van de informatieproducten de volgende paragrafen) is de, door gebruikers gewenste, centrale registratie waarin alle informatie over een bouwwerk is opgenomen. Het gaat hierbij om de tekeningen, berekeningen en de resultaten van de kwaliteitsborging (zoals toetsen en inspecties).</p>
    <p>De <a href="#">Bouwregelgeving</a> is een database met alle bouwregelgeving in Nederland, die op zodanige wijze moet zijn ingericht en ontsloten dat die voldoet aan de eisen van de Omgevingswet (3B's), en daarmee bruikbaar is in de ontwerp- en toetsingsfase van ieder bouwwerk.</p>
    <p>Het derde informatieproduct zijn de Vergunningvrije bouwwerken, hierin zijn opgenomen de (bekende) bouwwerken die vergunningvrij, maar niet regelvrij, zijn gerealiseerd. Het vierde en vooralsnog laatste informatieproduct is de Digitaliseringshulp, een service voor het centraal en gestandaardiseerd digitaliseren van documenten.</p>
    <div class="dso-button-row">
      <a href="#" class="dso-primary">Primaire button</a>
      <a href="#" class="dso-secondary">Secundaire button</a>
      <a href="#" class="dso-tertiary btn-align">
        Tertiaire button
        <dso-icon icon="chevron-down"></dso-icon>
      </a>
    </div>
  </div>
/* Yellow */
__title: Geel
yield: |
  <div class="dso-rich-content">
    <h3>Toelichting: Vergunningvrij onder voorbehoud</h3>
    <p>Het Informatiehuis Bouw kent, op basis van de huidige gebruikerswensen, vier Informatieproducten, namelijk het Opleverdossier, de Bouwregelgeving, de Vergunningvrije bouwwerken en een Digitaliseringshulp.</p>
    <p>Het Opleverdossier (zie voor een nadere omschrijving van de informatieproducten de volgende paragrafen) is de, door gebruikers gewenste, centrale registratie waarin alle informatie over een bouwwerk is opgenomen. Het gaat hierbij om de tekeningen, berekeningen en de resultaten van de kwaliteitsborging (zoals toetsen en inspecties).</p>
    <p>De <a href="#">Bouwregelgeving</a> is een database met alle bouwregelgeving in Nederland, die op zodanige wijze moet zijn ingericht en ontsloten dat die voldoet aan de eisen van de Omgevingswet (3B's), en daarmee bruikbaar is in de ontwerp- en toetsingsfase van ieder bouwwerk.</p>
    <p>Het derde informatieproduct zijn de Vergunningvrije bouwwerken, hierin zijn opgenomen de (bekende) bouwwerken die vergunningvrij, maar niet regelvrij, zijn gerealiseerd. Het vierde en vooralsnog laatste informatieproduct is de Digitaliseringshulp, een service voor het centraal en gestandaardiseerd digitaliseren van documenten.</p>
    <div class="dso-button-row">
      <a href="#" class="dso-primary">Primaire button</a>
      <a href="#" class="dso-secondary">Secundaire button</a>
      <a href="#" class="dso-tertiary btn-align">
        Tertiaire button
        <dso-icon icon="chevron-down"></dso-icon>
      </a>
    </div>
  </div>
yellow: true
/* Bordered */
__title: Met rand
yield: |
  <div class="dso-rich-content">
    <h3>Toelichting: Vergunningvrij onder voorbehoud</h3>
    <p>Het Informatiehuis Bouw kent, op basis van de huidige gebruikerswensen, vier Informatieproducten, namelijk het Opleverdossier, de Bouwregelgeving, de Vergunningvrije bouwwerken en een Digitaliseringshulp.</p>
    <p>Het Opleverdossier (zie voor een nadere omschrijving van de informatieproducten de volgende paragrafen) is de, door gebruikers gewenste, centrale registratie waarin alle informatie over een bouwwerk is opgenomen. Het gaat hierbij om de tekeningen, berekeningen en de resultaten van de kwaliteitsborging (zoals toetsen en inspecties).</p>
    <p>De <a href="#">Bouwregelgeving</a> is een database met alle bouwregelgeving in Nederland, die op zodanige wijze moet zijn ingericht en ontsloten dat die voldoet aan de eisen van de Omgevingswet (3B's), en daarmee bruikbaar is in de ontwerp- en toetsingsfase van ieder bouwwerk.</p>
    <p>Het derde informatieproduct zijn de Vergunningvrije bouwwerken, hierin zijn opgenomen de (bekende) bouwwerken die vergunningvrij, maar niet regelvrij, zijn gerealiseerd. Het vierde en vooralsnog laatste informatieproduct is de Digitaliseringshulp, een service voor het centraal en gestandaardiseerd digitaliseren van documenten.</p>
    <div class="dso-button-row">
      <a href="#" class="dso-primary">Primaire button</a>
      <a href="#" class="dso-secondary">Secundaire button</a>
      <a href="#" class="dso-tertiary btn-align">
        Tertiaire button
        <dso-icon icon="chevron-down"></dso-icon>
      </a>
    </div>
  </div>
border: true
/* White Drop Shadow */
__title: Wit met schaduw
yield: |
  <div class="dso-rich-content">
    <h3>Toelichting: Vergunningvrij onder voorbehoud</h3>
    <p>Het Informatiehuis Bouw kent, op basis van de huidige gebruikerswensen, vier Informatieproducten, namelijk het Opleverdossier, de Bouwregelgeving, de Vergunningvrije bouwwerken en een Digitaliseringshulp.</p>
    <p>Het Opleverdossier (zie voor een nadere omschrijving van de informatieproducten de volgende paragrafen) is de, door gebruikers gewenste, centrale registratie waarin alle informatie over een bouwwerk is opgenomen. Het gaat hierbij om de tekeningen, berekeningen en de resultaten van de kwaliteitsborging (zoals toetsen en inspecties).</p>
    <p>De <a href="#">Bouwregelgeving</a> is een database met alle bouwregelgeving in Nederland, die op zodanige wijze moet zijn ingericht en ontsloten dat die voldoet aan de eisen van de Omgevingswet (3B's), en daarmee bruikbaar is in de ontwerp- en toetsingsfase van ieder bouwwerk.</p>
    <p>Het derde informatieproduct zijn de Vergunningvrije bouwwerken, hierin zijn opgenomen de (bekende) bouwwerken die vergunningvrij, maar niet regelvrij, zijn gerealiseerd. Het vierde en vooralsnog laatste informatieproduct is de Digitaliseringshulp, een service voor het centraal en gestandaardiseerd digitaliseren van documenten.</p>
    <div class="dso-button-row">
      <a href="#" class="dso-primary">Primaire button</a>
      <a href="#" class="dso-secondary">Secundaire button</a>
      <a href="#" class="dso-tertiary btn-align">
        Tertiaire button
        <dso-icon icon="chevron-down"></dso-icon>
      </a>
    </div>
  </div>
white: true
dropShadow: true
/* Step Indicator */
__title: Met step indicator
yield: |
  <div class="dso-rich-content">
    <h3>Toelichting: Vergunningvrij onder voorbehoud</h3>
    <p>Het Informatiehuis Bouw kent, op basis van de huidige gebruikerswensen, vier Informatieproducten, namelijk het Opleverdossier, de Bouwregelgeving, de Vergunningvrije bouwwerken en een Digitaliseringshulp.</p>
    <p>Het Opleverdossier (zie voor een nadere omschrijving van de informatieproducten de volgende paragrafen) is de, door gebruikers gewenste, centrale registratie waarin alle informatie over een bouwwerk is opgenomen. Het gaat hierbij om de tekeningen, berekeningen en de resultaten van de kwaliteitsborging (zoals toetsen en inspecties).</p>
    <p>De <a href="#">Bouwregelgeving</a> is een database met alle bouwregelgeving in Nederland, die op zodanige wijze moet zijn ingericht en ontsloten dat die voldoet aan de eisen van de Omgevingswet (3B's), en daarmee bruikbaar is in de ontwerp- en toetsingsfase van ieder bouwwerk.</p>
    <p>Het derde informatieproduct zijn de Vergunningvrije bouwwerken, hierin zijn opgenomen de (bekende) bouwwerken die vergunningvrij, maar niet regelvrij, zijn gerealiseerd. Het vierde en vooralsnog laatste informatieproduct is de Digitaliseringshulp, een service voor het centraal en gestandaardiseerd digitaliseren van documenten.</p>
    <div class="dso-button-row">
      <a href="#" class="dso-primary">Primaire button</a>
      <a href="#" class="dso-secondary">Secundaire button</a>
      <a href="#" class="dso-tertiary btn-align">
        Tertiaire button
        <dso-icon icon="chevron-down"></dso-icon>
      </a>
    </div>
  </div>
yellow: true
step: 2
/* Icon Indicator */
__title: Met icoon
yield: |
  <div class="dso-rich-content">
    <h3>Toelichting: Vergunningvrij onder voorbehoud</h3>
    <p>Het Informatiehuis Bouw kent, op basis van de huidige gebruikerswensen, vier Informatieproducten, namelijk het Opleverdossier, de Bouwregelgeving, de Vergunningvrije bouwwerken en een Digitaliseringshulp.</p>
    <p>Het Opleverdossier (zie voor een nadere omschrijving van de informatieproducten de volgende paragrafen) is de, door gebruikers gewenste, centrale registratie waarin alle informatie over een bouwwerk is opgenomen. Het gaat hierbij om de tekeningen, berekeningen en de resultaten van de kwaliteitsborging (zoals toetsen en inspecties).</p>
    <p>De <a href="#">Bouwregelgeving</a> is een database met alle bouwregelgeving in Nederland, die op zodanige wijze moet zijn ingericht en ontsloten dat die voldoet aan de eisen van de Omgevingswet (3B's), en daarmee bruikbaar is in de ontwerp- en toetsingsfase van ieder bouwwerk.</p>
    <p>Het derde informatieproduct zijn de Vergunningvrije bouwwerken, hierin zijn opgenomen de (bekende) bouwwerken die vergunningvrij, maar niet regelvrij, zijn gerealiseerd. Het vierde en vooralsnog laatste informatieproduct is de Digitaliseringshulp, een service voor het centraal en gestandaardiseerd digitaliseren van documenten.</p>
    <div class="dso-button-row">
      <a href="#" class="dso-primary">Primaire button</a>
      <a href="#" class="dso-secondary">Secundaire button</a>
      <a href="#" class="dso-tertiary btn-align">
        Tertiaire button
        <dso-icon icon="chevron-down"></dso-icon>
      </a>
    </div>
  </div>
yellow: true
icon: plus
label: Plus
/* Link List */
__title: Standaard
yield: |
  <div class="dso-rich-content">
    <h3>Toelichting: Vergunningvrij onder voorbehoud</h3>
    <p>Het Informatiehuis Bouw kent, op basis van de huidige gebruikerswensen, vier Informatieproducten, namelijk het Opleverdossier, de Bouwregelgeving, de Vergunningvrije bouwwerken en een Digitaliseringshulp.</p>
    <p>Het Opleverdossier (zie voor een nadere omschrijving van de informatieproducten de volgende paragrafen) is de, door gebruikers gewenste, centrale registratie waarin alle informatie over een bouwwerk is opgenomen. Het gaat hierbij om de tekeningen, berekeningen en de resultaten van de kwaliteitsborging (zoals toetsen en inspecties).</p>
    <p>De <a href="#">Bouwregelgeving</a> is een database met alle bouwregelgeving in Nederland, die op zodanige wijze moet zijn ingericht en ontsloten dat die voldoet aan de eisen van de Omgevingswet (3B's), en daarmee bruikbaar is in de ontwerp- en toetsingsfase van ieder bouwwerk.</p>
    <p>Het derde informatieproduct zijn de Vergunningvrije bouwwerken, hierin zijn opgenomen de (bekende) bouwwerken die vergunningvrij, maar niet regelvrij, zijn gerealiseerd. Het vierde en vooralsnog laatste informatieproduct is de Digitaliseringshulp, een service voor het centraal en gestandaardiseerd digitaliseren van documenten.</p>
    <div class="dso-button-row">
      <a href="#" class="dso-primary">Primaire button</a>
      <a href="#" class="dso-secondary">Secundaire button</a>
      <a href="#" class="dso-tertiary btn-align">
        Tertiaire button
        <dso-icon icon="chevron-down"></dso-icon>
      </a>
    </div>
  </div>