Event Messages in HTML

Event Messages

De naam Event Messages verzin ik, want er bestaat volgens mij nog geen term voor de berichten welke de gebruiker informeren tijdens het invullen van een formulier e.d.

Categoriën

De informatie heeft een bepaalde categorie, namelijk:

  • Fout;
  • Succesvol;
  • Informatie;
  • Waarschuwing;
  • Opmerking.
Kleuren

We ervaren rood als gevaar, en groen als veilig.

De keuze van de kleuren voor de Event Messages zijn dus belangrijk en zorgvuldig uitgekozen:

Categorie Kleur 1 Kleur 2
Fout #AE432E #F2D4CE
Succesvol #77AB13 #D9E6C3
Informatie #058DC7 #CEE6F2
Waarschuwing #E6C26E #FAF6D4
Opmerking #BFBFBF #F2F2F2
Iconen

Voor de icons maken we gebruik van famfamfam.com: Silk Icons.

Categorie Bestandsnaam Icon
Fout delete.png Fout
Succesvol tick.png Succesvol
Informatie information.png Informatie
Waarschuwing error.png Waarschuwing
Opmerking lightbulb.png Opmerking
HTML
<body>
    <div class="event-message event-message-error">
        <div class="icon icon-error"></div>
        <div class="header">Fout</div>
        <div class="text">Er is een fout opgetreden.</div>
    </div>
    <div class="event-message event-message-success">
        <div class="icon icon-success"></div>
        <div class="header">Succesvol</div>
        <div class="text">De wijzigingen zijn succesvol opgeslagen.</div>
    </div>
    <div class="event-message event-message-information">
        <div class="icon icon-information"></div>
        <div class="header">Informatie</div>
        <div class="text">Aan deze informatie kunnen geen rechten worden ontleend.</div>
    </div>
    <div class="event-message event-message-warning">
        <div class="icon icon-warning"></div>
        <div class="header">Waarschuwing</div>
        <div class="text">U dient akkoord te gaan met de algemene voorwaarden.</div>
    </div>
    <div class="event-message event-message-comment">
        <div class="icon icon-comment"></div>
        <div class="header">Opmerking</div>
        <div class="text">Alle genoemde prijzen zijn exclusief BTW (19%).</div>
    </div>
</body>
CSS
body {
    font-family: "Lucida Grande", "Lucida Sans Unicode";
}
/* Icons */
.icon {
    float: left;
    position: relative;
    top: 2px;
    margin-right: 5px;
    width: 16px;
    height: 16px;
}
.icon-error { background-image: url('icons/delete.png'); }
.icon-success { background-image: url('icons/tick.png'); }
.icon-information { background-image: url('icons/information.png'); }
.icon-warning { background-image: url('icons/error.png'); }
.icon-comment { background-image: url('icons/lightbulb.png'); }
/* Event Message */
.event-message {
    margin-bottom: 10px;
    padding: 5px;
}
.event-message .header {
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: bold;
}
.event-message .text {
    margin-left: 21px;
    font-size: 12px;
    color: #000;
}
/* Fout */
.event-message-error {
    background-color: #F2D4CE;
    border: 1px solid #AE432E;
}
.event-message-error .header {
    color: #AE432E;
}
/* Succesvol */
.event-message-success {
    background-color: #D9E6C3;
    border: 1px solid #77AB13;
}
.event-message-success .header {
    color: #77AB13;
}
/* Informatie */
.event-message-information {
    background-color: #CEE6F2;
    border: 1px solid #058DC7;
}
.event-message-information .header {
    color: #058DC7;
}
/* Waarschuwing */
.event-message-warning {
    background-color: #FAF6D4;
    border: 1px solid #E6C26E;
}
.event-message-warning .header {
    color: #E6C26E;
}
/* Opmerking */
.event-message-comment {
    background-color: #F2F2F2;
    border: 1px solid #BFBFBF;
}
.event-message-comment .header {
    color: #BFBFBF;
}