Meddelanden
Används för att visa olika typer av meddelanden. Dessa kan vara felmeddelanden, varningar, valideringsfel och informationsmeddelanden.
Standardmeddelanden
Dessa meddelanden kan max vara en rad lång och har per default en ljusblå bakgrundsfärg vilket indikerar att det är ett informationsmeddelande. Genom att lägga till css-klasser kan man ändra bakgrundsfärgen vilket indikerar olika typer av meddelanden (se tabell nedan).
| Namn | CSS-klass | Beskrivning |
|---|---|---|
| Information | .is-info |
Används för att visa meddelande av informationskaraktär, som te.x. "Webbplatsen kommer att ligga nere för planerat underhåll mellan kl 22.00 och 24:00 i natt. |
| Succé | .is-success |
Används för att visa att något har lyckats. T.ex. "Dina kontaktuppgifter har uppdaterats!" |
| Varning | .is-warning |
Används för att lämna en varning. T.ex. "Om du tar bort din epostadress kan vi inte meddela dig om ändringar i ditt konto." |
| Fel | .is-error |
Rena felmeddelanden som t.ex. "Ett fel uppstod och dina uppgifter kunde inte sparas." |
Exempel
Meddelande med flera rader
Ibland behövs ett meddelande med flera rader och då kan man lägga på klassen .is-multiline. Det är t.ex. lämpligt vid detaljerade valideringsmeddelanden.
Exempel
Information: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo unde corporis earum distinctio dolores voluptatibus voluptates beatae, cum, molestias tenetur fugiat voluptas ad deserunt perferendis, ipsum neque nulla qui recusandae.
close
Meddelande med HTML-innehåll
Ett meddelande kan även innehålla mer HTML-innehåll lägg då till klassen .is-rich. Det här gör bl.a. så att meddelandet får en större padding och ska därför enbart användas när det faktiskt finns mer innehåll en bara en text.
Exempel
Kraftig rökutveckling i Värö
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
close
Kraftig rökutveckling i Värö
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
close
Meddelande med call-to-action
Används med fördel inne i en artikel eller infosida för att lyfta fram funktionalitet för besökaren.
OBS! Knapparna måste placeras på samma rad i HTML-koden för att de inte ska riskera att hamna under varandra i brett skärmläge. Se exempelkod.
Exempel
Följ din avverkning
Som medlem i Södra får du tillgång till digitala verktyg som visar när ditt virke avverkats, hämtats, mätts in och vad utfallet blir.
Följ din avverkning
Som medlem i Södra får du tillgång till digitala verktyg som visar när ditt virke avverkats, hämtats, mätts in och vad utfallet blir.