DSO Component Library

Alert 

<!-- Default -->
<div class="alert alert-success" role="alert">
    Dit is een succesmelding. Deze wordt getoond als een proces succesvol is afgerond.
</div>


<!-- Danger -->
<div class="alert alert-danger" role="alert">
    Dit is een foutmelding. Deze wordt getoond als er iets is misgegaan.
</div>


<!-- Warning -->
<div class="alert alert-warning" role="alert">
    Dit is een waarschuwingsmelding. Deze wordt gebruikt voor waarschuwingen.
</div>


<!-- Info -->
<div class="alert alert-info" role="alert">
    Dit is een informatiemelding. Deze wordt gebruikt voor aanvullende informatie of tips.
</div>


<div class="alert {{ modifier }}" role="alert">
  {{ message }}
</div>
 
/* Default */
modifier: alert-success
message: >-
  Dit is een succesmelding. Deze wordt getoond als een proces succesvol is
  afgerond.



/* Danger */
modifier: alert-danger
message: Dit is een foutmelding. Deze wordt getoond als er iets is misgegaan.



/* Warning */
modifier: alert-warning
message: Dit is een waarschuwingsmelding. Deze wordt gebruikt voor waarschuwingen.



/* Info */
modifier: alert-info
message: >-
  Dit is een informatiemelding. Deze wordt gebruikt voor aanvullende informatie
  of tips.

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"> Dit is een succesmelding. Deze wordt getoond als een proces succesvol is afgerond. </div>

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

Check that the title element describes the document.

<title>Alert