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.

Exempel på hur du kan skriva

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.

Notiser

Notiser kan vara vita eller grå beroende på färgen på den bakomliggande sidan.

HTML
<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">
         <button class="c-banner__actionlink"> Läs mer om stöd och ersättning </button>
         <a class="c-banner__actionlink" href="#banners">Stäng</a>
         </div>
      </div>
   </div>
</div>

Varningsmeddelande

HTML
<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"><b>SAM Internet är stängt den 19 mars.</b> 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">
                <button class="c-banner__actionlink">Läs om SAM Internet</button>
                <a class="c-banner__actionlink" href="#banners">Stäng</a>
            </div>
        </div>
    </div>
</div>

Krismeddelande

HTML
<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"><b>SAM Internet är stängt.</b> 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">
                <button class="c-banner__actionlink">Läs om SAM Internet</button>
                <a class="c-banner__actionlink" href="#banners">Stäng</a>
            </div>
        </div>
    </div>
</div>

Positivt meddelande

HTML
<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"><b>SAM Internet har öppnat.</b> Nu är SAM Internet öppen och du kan använda tjänsten. </p>
            <div class="c-banner__actionlink-container">
                <button class="c-banner__actionlink">SAM Internet</button>
                <a class="c-banner__actionlink" href="#banners">Stäng</a>
            </div>
        </div>
    </div>
</div>

Senast publicerad

Sidansvarig för sidan är Styleguide