Styleguide

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.

Notis

HTML 
<div class="c-banner c-banner--notis " role="banner">
  <div class="c-banner__content">
  <span class="c-banner-icon sjv-i-info"></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 href="#banner" class="c-link c-link--dark">Läs mer om stöd och ersättning</a>
          <button class="c-btn c-btn--dark c-btn--compact" type="button">Stäng</button>
       </div>
    </div>
  </div>
</div>

Varningsmeddelande

HTML 
<div class="c-banner c-banner--warning " role="banner">
  <div class="c-banner__content">
  <span class="c-banner-icon sjv-i-varning"></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 c-link--dark" href="#banner">Läs om SAM Internet</a>
    <button class="c-btn c-btn--compact c-btn--dark" type="button">Stäng</button>
  </div>
    </div>
  </div>
</div>

Krismeddelande

HTML 
<div class="c-banner c-banner--error " role="banner">
  <div class="c-banner__content">
  <span class="c-banner-icon sjv-i-fel"></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 c-link--dark" href="#banner">Läs om SAM Internet</a>
    <button class="c-btn c-btn--dark c-btn--compact" type="button">Stäng</button>
  </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"></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 type="button" class="c-btn c-btn--dark c-btn--compact">SAM Internet</button>
      <button class="c-btn c-btn--dark c-btn--compact" type="button">Stäng</button>
    </div>
    </div>
  </div>
</div>

Senast publicerad

Sidansvarig för sidan är Styleguide