Informationsmeddelanden används för att informera många användare under en begränsad tid.
Informationsmeddelandet ska
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.
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. |
Du kan använda meddelanden för information som ska visas under en begränsad tid.
Komponenten driftsattes första gången i version 4.0.4.
<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>
<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>
<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>
<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>