DSO Component Library

Alert 

<!-- Succes -->
<div class="alert alert-success" role="alert">
    <strong>Succes:</strong> De wijziging is opgeslagen!
</div>


<!-- Info -->
<div class="alert alert-info" role="alert">
    <strong>Let op:</strong> De sessie verloopt over 5 minuten.
</div>


<!-- Warning -->
<div class="alert alert-warning" role="alert">
    <strong>Waarschuwing:</strong> Vergeet niet uit te loggen na het gebruik van dit systeem.
</div>


<!-- Danger -->
<div class="alert alert-danger" role="alert">
    <strong>Fout:</strong> Uw wijzigingen konden helaas niet worden opgeslagen door een technisch probleem. Probeer het later nog eens.
</div>


<!-- Success Icon -->
<div class="alert alert-success" role="alert">
    <span class="fa fa-check" aria-hidden="true"></span>
    <span class="sr-only">Success</span> De wijziging is opgeslagen!
</div>


<div class="alert {{ modifier }}" role="alert">
  {{#if icon }}
    {{> '@icon' }}
    <span class="sr-only">{{ label }}</span>
    {{ message }}
  {{else}}
    <strong>{{ label }}:</strong>
    {{ message }}
  {{/if}}
</div>
 
/* Succes */
modifier: alert-success
label: Succes
message: De wijziging is opgeslagen!



/* Info */
modifier: alert-info
label: Let op
message: De sessie verloopt over 5 minuten.



/* Warning */
modifier: alert-warning
label: Waarschuwing
message: Vergeet niet uit te loggen na het gebruik van dit systeem.



/* Danger */
modifier: alert-danger
label: Fout
message: >-
  Uw wijzigingen konden helaas niet worden opgeslagen door een technisch
  probleem. Probeer het later nog eens.



/* Success Icon */
modifier: alert-success
label: Success
message: De wijziging is opgeslagen!
icon: fa fa-check

Toon een contextuele melding aan de gebruiker. Gebasserd op de Bootstrap “Alerts” component

WARNING: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage

This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.

<div class="alert alert-success" role="alert"> <strong>Succes:</strong> De wijziging is opgeslagen! </div>

NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2

Check that the title element describes the document.

<title>Alert