Informationsmeddelande
Informationsmeddelanden används för att informera många användare under en begränsad tid.
Design och språk
Informationsmeddelandet ska
- ha full bredd men texten ska ha samma bredd som innehållet på sidan
- placeras under huvudet
- inte täcka någon annan information utan trycka ner övrig information
- innehålla åtgärden stäng
- dyka upp vid varje ny session.
Vi ska bara använda ett infomationsmeddelande åt gången. Om användaren inte stänger meddelandet ligger det kvar och syns på varje sida i systemet.
Textprinciper i meddelanden
Texten ska vara kort och språket aktivt. Om användaren ska göra något ska vi beskriva det tydligt och enkelt. Meddelanden ska förmedla trygghet till användaren.
Skriv | Skriv inte |
|---|---|
Vi håller på att uppdatera System X. Du kan därför inte använda tjänsten. Vi räknar med att öppna igen den 20 mars klockan 8.00. | System X ligger nere. |
Vi kommer att uppdatera System X den 19 mars mellan klockan 8 och 12. Under den perioden kan du inte använda System X. | System X uppdateras den 19 mars. |
När du ska använda informationsmeddelanden
Du kan använda meddelanden för information som ska visas under en begränsad tid.
- Notiser: För information som berör många.
- Varningsmeddelande: För varningar som berör många.
- Krismeddelande: Används sparsamt för mycket viktig information.
- Positivt meddelande: Används till exempel efter ett krismeddelande.
Alternativ till informationsmeddelanden
Komponent och kod
Komponenten driftsattes första gången i version 4.0.4.
Notis
<div class="c-banner c-banner--notis" role="banner">
<div class="c-banner__content">
<span class="c-banner-icon sjv-i-info" tabindex="-1"></span>
<div class="c-banner__text">
<p class="c-banner-p">Påverkades du av torkan i sommar? Då kan du ha rätt till stöd och ersättning.</p>
<div class="c-banner__actionlink-container">
<a class="c-link__dark" href="#banner">Läs mer om stöd och ersättning</a>
<button class="c-btn--compact c-btn--dark" type="button">Stäng</button>
</div>
</div>
</div>
</div>Varningsmeddelande
<div class="c-banner c-banner--warning" role="alert">
<div class="c-banner__content">
<span class="c-banner-icon sjv-i-varning" tabindex="-1"></span>
<div class="c-banner__text">
<p class="c-banner-p">
SAM Internet är stängt den 19 mars. Vi uppdaterar SAM Internet den 19 mars mellan klockan 8 och 12.
Under den perioden kan du inte använda SAM Internet.
</p>
<div class="c-banner__actionlink-container">
<a class="c-link__dark" href="#banner">Läs om SAM Internet</a>
<button class="c-btn--compact c-btn--dark" type="button">Stäng</button>
</div>
</div>
</div>
</div>
Krismeddelande
<div class="c-banner c-banner--error" role="alert">
<div class="c-banner__content">
<span class="c-banner-icon sjv-i-fel" tabindex="-1"></span>
<div class="c-banner__text">
<p class="c-banner-p">
SAM Internet är stängt. Vi håller på att uppdatera SAM Internet. Du kan därför inte använda
tjänsten. Vi räknar med att öppna igen den 20 mars klockan 8.00.
</p>
<div class="c-banner__actionlink-container">
<a class="c-link__dark" href="#banner">Läs om SAM Internet</a>
<button class="c-btn--compact c-btn--dark" type="button">Stäng</button>
</div>
</div>
</div>
</div>Positivt meddelande
<div class="c-banner c-banner--success" role="banner">
<div class="c-banner__content">
<span class="c-banner-icon sjv-i-framgang" tabindex="-1"></span>
<div class="c-banner__text">
<p class="c-banner-p">SAM Internet har öppnat. Nu är SAM Internet öppen och du kan använda tjänsten.</p>
<div class="c-banner__actionlink-container">
<button class="c-btn--compact c-btn--dark">SAM Internet</button>
<button class="c-btn--compact c-btn--dark" type="button">Stäng</button>
</div>
</div>
</div>
</div>Senast publicerad
Sidansvarig för sidan är Styleguide