DSO Toolkit | Component Library

Banner 

<!-- Default -->
<section class="banner alert-danger" role="alert">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <button type="button" title="Sluiten" class="btn btn-link">
                    <span class="sr-only">Sluiten</span><svg class="di di-times">
                        <use href="../../dso-icons.svg#times" />
                    </svg>
                </button>
                <span>
                    Op dit moment ervaren wij een storing in de Vergunningcheck. U kunt wel een aanvraag of melding indienen.
                </span>
            </div>
        </div>
    </div>
</section>


<!-- Warning -->
<section class="banner alert-warning" role="alert">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <button type="button" title="Sluiten" class="btn btn-link">
                    <span class="sr-only">Sluiten</span><svg class="di di-times">
                        <use href="../../dso-icons.svg#times" />
                    </svg>
                </button>
                <span>
                    Op <strong>zondag 8 december 2019 van 10.00 uur tot 17.00 uur</strong> vindt er onderhoud plaats aan het Omgevingsloket. <a href="#">Meer informatie</a>
                </span>
            </div>
        </div>
    </div>
</section>


<section class="banner{{#if modifier }} alert-{{ modifier }}{{/if}}" role="alert">
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        {{> '@button' type='button' modifier='link' label='Sluiten' icon='times' iconOnly=true }}
        <span>
          {{{ message }}}
        </span>
      </div>
    </div>
  </div>
</section>
 
/* Default */
modifier: danger
message: >-
  Op dit moment ervaren wij een storing in de Vergunningcheck. U kunt wel een
  aanvraag of melding indienen.



/* Warning */
modifier: warning
message: >-
  Op <strong>zondag 8 december 2019 van 10.00 uur tot 17.00 uur</strong> vindt
  er onderhoud plaats aan het Omgevingsloket. <a href="#">Meer informatie</a>

There are no notes for this item.