User Manual

Feedback

Component used to provide feedback to the user. This feedback component is represented by a state that can for example be a mistake or a succesful one. This is mostly shown within an overlay component because it has a close button which closes the feedback and the overlay component.

Error


    
      

  

<div class="m-feedback is-error ">
  <div class="m-feedback__content">
    <span class="m-feedback__icon "></span>

    <h2 class="m-feedback__title">
      Oeps
    </h2>

    <p class="m-feedback__text">
      We hebben deze pagina niet gevonden
    </p>
    
      

<button
  class="a-button a-button--outline a-button--icon-after icon-chevron-right m-feedback__button "
  
>
  <span class="a-button__text">naar de homepagina</span>
</button>


    
  </div>
</div>

Success


    
      

  

<div class="m-feedback is-success ">
  <div class="m-feedback__content">
    <span class="m-feedback__icon "></span>

    <h2 class="m-feedback__title">
      Success
    </h2>

    <p class="m-feedback__text">
      Jouw overboeking werd goedgekeurd
    </p>
    
  </div>
</div>

Warning


    
      

  

<div class="m-feedback is-warning ">
  <div class="m-feedback__content">
    <span class="m-feedback__icon icon-smartphone"></span>

    <h2 class="m-feedback__title">
      Gelieve de transactie te bevestigen
    </h2>

    <p class="m-feedback__text">
      op jouw gsm heb je een bevestigingsmelding ontvangen, bij het bevestigen zal de transactie worden uitgevoerd.
    </p>
    
      

<button
  class="a-button a-button--outline a-button--icon-after icon-chevron-right m-feedback__button "
  
>
  <span class="a-button__text">geen melding ontvangen</span>
</button>


    
  </div>
</div>

States

  • is-success

    By applying this state you give the component a ui-color that represents a succesful action, by default this is green. It will generate the checkmark icon as well.

  • is-error

    By applying this state you give the component a ui-color that represents an error. It will add a warning icon and a button to redirect you to the homepage as well.

  • is-warning

    By applying this state you give the component a ui-color that represents a warning and add a warning icon