Sektionsmeddelande
Sektionsmeddelanden används ofta för riktad information till någon eller några användare eller för att 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 visa 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.
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" |
|
Notiser
<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
<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
<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
<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