menu

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

Informationsmeddelande close
Succé! close
Varningsmeddelande close
Felmeddelande close
Informationsmeddelande close
Succé! close
Varningsmeddelande close
Felmeddelande close

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
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

account_circle

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.

account_circle

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.