Sektionsmeddelande

Sektionsmeddelanden används ofta för riktiad information till någon eller några användare eller framhäva information som behöver sticka ut.

Design och språk

Sektionsmeddelandet ska

  • placeras i en specifik del på en sida, till exempel i ett textstycke eller i ett kort
  • innehålla text men kan också innehålla till exempel en länk eller en knapp.

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. Meddelandet ska förmedla trygghet till användaren.

När du ska använda sektionsmeddelanden

Du ska använda sektionsmeddelanden för information som du villl göra användaren extra uppmärksam på. Meddelandet kan vara statiskt eller användas under en begränsad tid.

  • Notiser: För information som behöver sticka ut från övriga innehållet.
  • Varningsmeddelande: För varningar eller när du behöver upplysa användaren om någonting hen behöver göra.
  • Positivt meddelande: Används för att ge feedback när användaren har slutfört något som har gått bra.
  • Felmeddelande: Används för att visas systemfel som användaren inte kan göra någonting åt.

Alternativ till sektionsmeddelanden

Komponent och kod

Komponenten driftsattes första gången i version 17.0.44.

Paramterar på sektionsmeddelande

Egenskap

Attribut

Beskrivning

Typ

Förvalt värde

extraClass

extra-class

Lägg till extra klasser i parent elementet string t.ex. extra-class="classnamn1 classnamn2"

string

-

role

role

Sätts aria role, default role är "banner"

string

'banner'

type

type

Banner-typ 'notis' | 'warning' | 'error' | 'success'

"error" | "notice" | "success" | "warning"

'notice'

Notiser

Dina pengar kommer betalas ut till konto XXXX-XXX XXX XX.

HTML
<jv-section-banner type="notice" extra-class="an-extra-class" role="banner">
  <div class="c-section-banner__content--inline">
    <span class="c-section-banner-icon sjv-i-info" aria-hidden="true"></span>
    <p class="c-section-banner__text">Dina pengar kommer betalas ut till konto XXXX-XXX XXX XX.</p>
  </div>
</jv-section-banner>

Varningsmeddelande

Du har inte skickat in din SAM-ansökan.

HTML
<jv-section-banner type="warning">
  <div class="c-section-banner__content--inline">
    <span class="c-section-banner-icon sjv-i-varning" aria-hidden="true"></span>
    <p class="c-section-banner__text">Du har inte skickat in din SAM-ansökan.</p>
  </div>
</jv-section-banner>

Positivt meddelande

En ny fullmakt har delats ut.

HTML
<jv-section-banner type="success">
  <div class="c-section-banner__content--inline">
    <span class="c-section-banner-icon sjv-i-framgang" aria-hidden="true"></span>
    <p class="c-section-banner__text">En ny fullmakt har delats ut.</p>
  </div>
</jv-section-banner>

Felmeddelande

Dina stödrätter kan inte visas på grund av ett tekniskt fel.

HTML
<jv-section-banner type="error">
  <div class="c-section-banner__content--inline">
    <span class="c-section-banner-icon sjv-i-fel" aria-hidden="true"></span>
    <p class="c-section-banner__text">Dina stödrätter kan inte visas på grund av ett tekniskt fel.</p>
  </div>
</jv-section-banner>

Senast publicerad

Sidansvarig för sidan är Styleguide