Notifactie op een paragraaf

Introductie

Voor het weergeven van notificatie op paragrafen.

Snelstart

SCSS importeren:

    
    @use "@minvws/manon/components/notification";

Voorbeelden

paragraaf

Foutmelding: Lorem ipsum dolor sit.

HTML-Voorbeeld:

      
<p class="error">
  <span class="notification-type">
    <span class="icon icon-error" aria-hidden="true"></span>
    Foutmelding:
  </span>
  Lorem ipsum dolor sit.
</p>

Foutmelding: Lorem ipsum dolor sit.

HTML-Voorbeeld:

      
<p class="explanation">
  <span class="notification-type">
    <span class="icon icon-informative" aria-hidden="true"></span>
    Foutmelding:
  </span>
  Lorem ipsum dolor sit.
</p>

Foutmelding: Lorem ipsum dolor sit.

HTML-Voorbeeld:

      
<p class="warning">
  <span class="notification-type">
    <span class="icon icon-warning" aria-hidden="true"></span>
    Foutmelding:
  </span>
  Lorem ipsum dolor sit.
</p>

Foutmelding: Lorem ipsum dolor sit.

HTML-Voorbeeld:

      
<p class="confirmation">
  <span class="notification-type">
    <span class="icon icon-check" aria-hidden="true"></span>
    Foutmelding:
  </span>
  Lorem ipsum dolor sit.
</p>

Foutmelding: Lorem ipsum dolor sit.

HTML-Voorbeeld:

      
<p class="system">
  <span class="notification-type">
    <span class="icon icon-warning" aria-hidden="true"></span>
    Foutmelding:
  </span>
  Lorem ipsum dolor sit.
</p>

span

Foutmelding: Lorem ipsum dolor sit.

HTML-Voorbeeld:

      
<span class="error">
  <span class="notification-type">
    <span class="icon icon-error" aria-hidden="true"></span>
    Foutmelding:
  </span>
  Lorem ipsum dolor sit.
</span>
Foutmelding: Lorem ipsum dolor sit.

HTML-Voorbeeld:

      
<span class="explanation">
  <span class="notification-type">
    <span class="icon icon-informative" aria-hidden="true"></span>
    Foutmelding:
  </span>
  Lorem ipsum dolor sit.
</span>
Foutmelding: Lorem ipsum dolor sit.

HTML-Voorbeeld:

      
<span class="warning">
  <span class="notification-type">
    <span class="icon icon-warning" aria-hidden="true"></span>
    Foutmelding:
  </span>
  Lorem ipsum dolor sit.
</span>
Foutmelding: Lorem ipsum dolor sit.

HTML-Voorbeeld:

      
<span class="confirmation">
  <span class="notification-type">
    <span class="icon icon-check" aria-hidden="true"></span>
    Foutmelding:
  </span>
  Lorem ipsum dolor sit.
</span>
Foutmelding: Lorem ipsum dolor sit.

HTML-Voorbeeld:

      
<span class="system">
  <span class="notification-type">
    <span class="icon icon-warning" aria-hidden="true"></span>
    Foutmelding:
  </span>
  Lorem ipsum dolor sit.
</span>