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 <a href="#">foutmelding</a>. 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 <a href="#">aanvullende</a> informatie of tips.
</div>

<!-- Success Button -->
<div class="alert alert-success" role="alert">
    <div class="dso-rich-content">
        <p>Dit is een succesmelding. Deze wordt getoond als een proces succesvol is afgerond.</p>
        <p><button type="button" class="btn">Button</button></p>
    </div>

</div>

<!-- Danger Button -->
<div class="alert alert-danger" role="alert">
    <div class="dso-rich-content">
        <p>Dit is een foutmelding. Deze wordt getoond als er iets is misgegaan.</p>
        <p><button type="button" class="btn">Button</button></p>
    </div>

</div>

<!-- Warning Button -->
<div class="alert alert-warning" role="alert">
    <div class="dso-rich-content">
        <p>Dit is een waarschuwingsmelding. Deze wordt gebruikt voor waarschuwingen.</p>
        <p><button type="button" class="btn">Zoekopdracht afbreken</button></p>
    </div>

</div>

<!-- Info Button -->
<div class="alert alert-info" role="alert">
    <div class="dso-rich-content">
        <p>Dit is een informatiemelding. Deze wordt gebruikt voor aanvullende informatie of tips.</p>
        <p><button type="button" class="btn">Button</button></p>
    </div>

</div>

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


/* Danger */
modifier: danger
message: >-
  Dit is een <a href="#">foutmelding</a>. Deze wordt getoond als er iets is
  misgegaan.


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


/* Info */
modifier: info
message: >-
  Dit is een informatiemelding. Deze wordt gebruikt voor <a
  href="#">aanvullende</a> informatie of tips.


/* Success Button */
modifier: success
message: |
  <div class="dso-rich-content">
    <p>Dit is een succesmelding. Deze wordt getoond als een proces succesvol is afgerond.</p>
    <p><button type="button" class="btn">Button</button></p>
  </div>


/* Danger Button */
modifier: danger
message: |
  <div class="dso-rich-content">
    <p>Dit is een foutmelding. Deze wordt getoond als er iets is misgegaan.</p>
    <p><button type="button" class="btn">Button</button></p>
  </div>


/* Warning Button */
modifier: warning
message: |
  <div class="dso-rich-content">
    <p>Dit is een waarschuwingsmelding. Deze wordt gebruikt voor waarschuwingen.</p>
    <p><button type="button" class="btn">Zoekopdracht afbreken</button></p>
  </div>


/* Info Button */
modifier: info
message: |
  <div class="dso-rich-content">
    <p>Dit is een informatiemelding. Deze wordt gebruikt voor aanvullende informatie of tips.</p>
    <p><button type="button" class="btn">Button</button></p>
  </div>


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

Bij voorkeur de inhoud van .alert in een .dso-rich-content plaatsen. Als er buttons nodig zijn, deze in een p plaatsen. Zie de laatste voorbeelden.