DSO Component Library

# Alert: Info

WIP

- HTML
- View
- Context
- Info
- Notes
- WCAG

`

    <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>

`
`

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

`

- Handle: @alert--info
- Variants (4): Default , Danger , Warning , Info
- Preview:
  - With layout
  - Component only
- Filesystem Path: components\04-indicators\alert\alert.hbs

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`