Digital profil

Digital profil Komponenter

På denna sida ser du hur vi använder våra komponenter på webben och på intranätet. Se mer information om varje komponent genom att navigera via menyn.

Komponenter Rubriker

Tydliga skillnader i rubrikstorlekar gör det lättare för användare att förstå hierarkin i en text.

Vi har fem rubriknivåer som antar olika storlekar på olika enheter (rubriknivå H0 används enbart för huvudbudskapet i toppytan på startsidan). I rubriker använder vi en komprimerad variant av fet text (TradeGothic LT condensed bold)

Mått och beskrivning

Maxbredd för rubriker: 780px

Textfärg: #grey-10

  • Dator
  • Padda
  • Mobil
  • Dator

    Rubriknivå H0 68px

  • Padda

    Rubriknivå H0 68px

  • Mobil

    Rubriknivå H0 38px

  • Dator

    Rubriknivå H1 50px

  • Padda

    Rubriknivå H1 40px

  • Mobil

    Rubriknivå H1 32px

  • Dator

    Rubriknivå H2 38px

  • Padda

    Rubriknivå H2 32px

  • Mobil

    Rubriknivå H2 28px

  • Dator

    Rubriknivå H3 32px

  • Padda

    Rubriknivå H3 28px

  • Mobil

    Rubriknivå H3 24px

  • Dator

    Rubriknivå H4 28px

  • Padda

    Rubriknivå H4 26px

  • Mobil

    Rubriknivå H4 20px

  • Mobil
    Rubriknivå H5 24px
  • Dator
    Rubriknivå H5 22px
  • Padda
    Rubriknivå H5 18px

Avstånd och marginaler

Avstånden mellan två olika element ska vara det största av de två angivna avstånden, inte det sammanslagna avståndet för båda elementen. Exmpelvis, avståndet mellan en H1-rubrik och en H2-rubrik är 32 px, inte 32 px + 24 px.

  • Dator
  • Mobil
  • Dator

    Rubriknivå H1

    Marginal över: 40px

    Marginal under: 32px

  • Mobil

    Rubriknivå H1

    Marginal över: 32px

    Marginal under: 22px

  • Dator

    Rubriknivå H2

    Marginal över: 32px

    Marginal under: 24px

  • Mobil

    Rubriknivå H2

    Marginal över: 22px

    Marginal under: 18px

  • Dator

    Rubriknivå H3, h4, h5

    Marginal över: 24px

    Marginal under: 16px

  • Mobil

    Rubriknivå H3, h4, h5

    Marginal över: 18px

    Marginal under: 16px

Komponenter Innehåll

Typografiska skillnader i olika innehållselement gör en text mer varierad och inbjudande. För mycket variation kan distrahera och göra innehållet spretigt, men lagom mycket variation ger en bättre läsbarhet.

Ingress och brödtext

Ingress och brödtext är våra vanligaste innehållselement. Därför spelar de den viktigaste rollen i hur sidan upplevs.

Mått

  • Maxbredd för innehåll: 700 px
  • Radavstånd: 1,5 gånger textstorleken
  • Avstånd mellan ord: 0,12%
  • Antal tecken per rad: 80 för desktop, 30-40 för mobil
  • Textfärg: #grey-10
  • Dator
  • Padda
  • Mobil
  • Dator

    Ingress 22px

  • Padda

    Ingress 22px

  • Mobil

    Ingress 20px

  • Dator

    Brödtext 18px

  • Padda

    Brödtext 18px

  • Mobil

    Brödtext 16px

  • Dator

    Brödtext fet 18px

  • Padda

    Brödtext fet 18px

  • Mobil

    Brödtext fet 16px


Avstånd och marginaler

Avstånden mellan två olika element ska vara det största av de två angivna avstånden, inte en totalsumma av avstånden för båda elementen. Det vill säga, avståndet mellan ingress och brödtext är 32 px, inte 32 px +24 px.


Desktop

Ingress Amet leo posuere sed ullamcorper tortor diam vestibulum aliquet elementum lobortis tortor enim in nunc ultricies erat tempor arcu eu ullamcorper vel interdum a quis eget id eros mauris dolor

Brödtext Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation

Mobil

Ingress Amet leo posuere sed ullamcorper tortor diam vestibulum aliquet elementum lobortis tortor enim in nunc ultricies erat tempor arcu eu ullamcorper vel interdum a quis eget id eros mauris dolor

Brödtext Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation


Sekundärtext

Sekundärtext används till beskrivande information om innehållet, till exempel text som beskriver när innehållet publicerades eller vilken typ av innehåll det är. Textstorleken för sekundärtext är alltid fler storlekar mindre än brödtexten.

Exempel på sekundärtext är taggar och etiketter.

Mått

Textstorlek, taggar: 14 px

Textstorlek, etiketter: 16 px


Taggar

Genus och målfald

Etiketter för typ av innehåll


Nyhet

Etiketter för publiceringsdaturm


Publicerad 21 april 2020


Se avsnittet Taggar och etiketter för mer information


Markerad text


Markerad text används för att lyfta ett viktigt avsnitt i en text, till exempel ett citat eller en viktig slutsats. Det är särskilt användbart i innehåll med mycket text, som exempelvis artiklar.

Mått och beskrivning

Textstorlek: 18px dator/padda och 16px mobil

Typsnitt: Trade Gothic LT bold

Textfärg: #grey-10

Maxbredd för markerad text: 450 px

Radavstånd: 1,5 gånger textstorleken

Avstånd mellan ord: 0,12%

Linje färg: #gron-6

Linje längd: Dynamisk mot texten

Ett citat Amet leo posue re sed ullamcorper tortor diam vestibulum aliquet elementum lobortis tortor enimEtt citat Amet leo posuere sed ullamcorper tortor diam vestibulum aliquet elementum lobortis tortor enim


Punktlista


Vi använder punktlistor i brödtext för att strukturera information och göra den enklare att överblicka. Utöver det som nämns nedan följer punktlistor samma manér som brödtext.

Mått

Punktfärg: #purpur-6

Avstånd före punktrad: 16 px

Avstånd mellan punkt och text: 10 px

  • Lorem ipsum dolor sit amet, consectetur adipiscing 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.
  • In culpa qui officia deserunt mollit anim id est laborum.

Länktexter

Det ska vara tydligt att en text är en länk. Därför är det viktigt att länktexter skiljer sig från brödtext och skiftar utseende vid hover, tabb och fokus.

Mått

Brödtextlänkar har storlek 18px
Dokumentlänkar har storlek 18px

Se avsnittet Länkar för mer information


Knapptexter

Vi använder knappar för att ge användaren möjlighet att ändra eller manipulera information. Knapptexten ska vara ett kommando på 2-3 ord, inte en hel mening.


Textstorlek 16px


Se avsnittet Knappar för mer information

Komponenter Länkar

Vi använder länkar för att låta användaren navigera till annat innehåll, till exempel en annan sida, en del av en sida eller ett dokument. Om du vill att användaren ska ändra eller manipulera information, använd en knapp istället.

Det ska vara tydligt att en text är en länk och att den skiftar utseende vid hover och tab.

Vi rekommenderar att alla länkar öppnas i samma fönster, även länkar till externa sidor. På så sätt låter vi användaren själv bestämma om de vill öppna en länk i en ny flik eller ett nytt fönster. Detta är god praxis och rekommenderas av WCAG och webbriktlinjer.se

Rubriklänk

Rubriklänkar används till innehåll som vi vill uppmärksamma. Därför används de framförallt i puffar och enklare listor. Eftersom det finns många olika puffar och listor på vår webbplats, finns det behov av att ha flera olika storlekar på rubriklänkar.

Vid hoverläge blir alla rubriklänkar understrukna för att det ska vara tydligt att rubriken är en länk.

Mått

Avstånd till linje 2 px

Linje storlek:

Rubriklänk liten: 1 px

Rubriklänk medium: 1.5 px

Rubriklänk stor: 2 px

Brödtextlänkar

Brödtextlänkar tar mindre plats och uppmärksamhet än rubriklänkar.

De används framför allt i brödtexter där vi vill länka vidare till relaterat innehåll. Men vi använder dem också där vi vill ha ett diskretare länkmanér, till exempel i sidfoten, brödsmulan samt i vissa listor och tabeller.

Vi rekommenderar att en brödtextlänk är understruken från början för att det ska vara tydligt att det är en länk. Men vi kan göra undantag - till exempel i sidfoten där vi har många länkar på samma ställe.

I brödsmulan är alla länkar understrukna förutom den sista som visar vilken sida användaren befinner sig på. Brödsmulor visas inte alls i mobil av utrymmesskäl.

Textstorlek 18px

Länk med ikon

Vi använder ikoner i exempelvis dokumentlänkar.

Dokumentlänk(pdf, 350Kb)


Mått och beskrivning

Textfärg och ikonfärg: #Purpur-6

Typsnitt: 18px,Trade Gothic, Condensed Bold

Textfärg och typsnitt dokumentinfo: Trade Gothic, regular, #Grey-7

Storlek ikon: 24x24 px undantag för brödsmula.

Linje: #grey-4, 1px, 20px margin från text till linje

Exempel på länkar i ett kontaktblock



Länklista

Vi använder länklistor när vi behöver lista flera länkar eller dokument ihop. En länklista består antingen av brödtextlänkar, rubriklänkar eller länkar med ikon.


Mått och beskrivning

Textstorlek: 18 px

Avstånd mellan länkar: 10 px

Linje mellan länkar: #grey-4, 1 px, 20 px margin från text till linje

Undantag från reglerna

Vi gör ibland avsteg från profilen för att förbättra den sammantagna upplevelsen. Detta sker när kontexten är viktigare än ett konsekvent manér.

Till exempel kan vi behöva:

  • justera textstorlek eller textfärg för länktexten, så att den passar bättre in bland övrig text.
  • ta bort pilar eller understukning för att slippa störande moment om vi har många länkar på samma ställe.
Exempel på justerad textstorlek

Senast uppdaterad 10 juli 2020

Exempel på justerad textfärg

Framgång!Gravida euismod aliquam tellus sagittis enim.Feugiat ac id

Exempel på rubriklänk utan pil

Länkar i webbplatskartan

Finansiering

Komponenter Knappar

Knappar används i första hand för att användaren ska kunna ändra eller manipulera information, exempelvis Skicka ansökan eller Logga in.

Texten på en knapp ska vara ett kommando, inte en hel mening eller en titel. Ett tydligt angivet kommando gör att användare kan vara säkra på och känna sig trygga med vad som händer när de trycker på knappen.

Knappen ska därför innehålla minst ett ord (ett verb) men helst två ord (ett verb och ett substantiv). Texten bör inte överskrida tre ord eller innehålla fler än 32 tecken.

Primärknapp

Vi använder primärknappen när vi vill styra användaren till en viss prioriterad handling - till exempel Logga in, Ladda ner eller Visa fler inlägg. God praxis är att bara ha en primärknapp per sida.

Primärknappen kan användas både på ljus och mörk bakgrund.

#Gron-6

#Gron-7

#Gron-3

Textfärg #Gron-7
Ram 2px,
Avstånd till knapp 2px,
Border #Grön-6

Sekundärknapp

Sekundärknappen används tillsammans med primärknappen för att erbjuda ett andrahandsalternativ - till exempel alternativet Avbryt eller Gå tillbaka.

Sekundärknappen placeras oftast bredvid primärknappen. Den kan också finnas längre ned på samma sida om det till exempel handlar om att locka till sekundärt innehåll.

Sekundärknappens bakgrund är transparent.

#Gron-6

#Gron-7

#Gron-4

Textfärg #Gron-7
Ram 2px,
Avstånd till knapp 2px,
Border #Grön-6

Spökknapp

Spökknapp används när knappen inte får ta lika mycket uppmärksamhet som en primär- eller sekundärknapp - till exempel när det finns flera knappalternativ på sidan.

Spökknappens bakgrund är transparent.

#Grey-6

#Grey-8

#Grey-4

Textfärg #Grey-8
Ram 2px
Avstånd till knapp 2px,
Border #Grön-6

Inverterad sekundär- och spökknapp

Den inverterade sekundär- och spökknappen används när den ordinarie knappen inte uppnår tillräcklig konstrastnivå mot en mörkare bakgrund.

Knappens bakgrund är transparent.

#Grey-2

#777777

#Grey-4

Knappfärg #777777
Ram, tjocklek: 2px
Avstånd till knapp: 2px,
Border #Grön-6

Textknapp

Vi använder textknappar när knappen inte får ta lika mycket uppmärksamhet som en primär- eller sekundärknapp, men det blir för många knappar om vi använder en spökknapp.

Det kan till exempel handla om att Justera inställningar eller Låsa upp ansökan.

Textknappar placeras oftast ihop med primär- och sekundärknappar. Den ser mer ut som en länk än en knapp, men bör behandlas som en knapp.

Textknappar kan antingen följa det gröna eller det grå designmanéret för knappar.

#Gron-6

#Grony-7

#Gron-3

Textfärg #Gron-7
Ram 2px
Avstånd till knapp 2px,
Border #Grön-6

#Grey-6

#Grey-8

#Grey-4

Textfärg #Grey-8
Ram 2px
Avstånd till knapp 2px
Border #Grön-6

Inverterad textknapp

#Grey-2

#777777

#Grey-4

Knappfärg #777777
Ram, tjocklek: 2px
Avstånd till knapp: 2px
Border: #Grön-6

Specialknapp

I toppytan på startsidan finns varianter av primär- och sekundärknappen. Dessa knappar används endast i toppytan.

Knapp med ikon

Alla knappar kan användas tillsammans med en ikon. Ikonen tydliggör syftet med knappen, till exempel kan en dokumentikon förstärka att det är ett dokument som laddas ned.

Ikonen ska placeras till vänster om texten.

Primärknapp med ikon

Sekundärknapp med ikon

Spökknapp med ikon

Sorterings- och filtreringsknapp

Filterknappar och sorteringsknappar är toggle-knappar som användare väljer för att filtrera och sortera träffarna i olika sökfunktioner. Knapparna hjälper användarna att påverka hur sökträffarna sorteras eller presenteras.

Knapparna kan innehålla ikon eller illustration som placeras till vänster om texten.

Vilket designelement som är bäst lämpat för att sortera eller filtrera sökträffar beror på hur komplexa sorterings- och filtreringsalternativen är. Finns det många eller avancerade alternativ är det oftast bättre att använda dropdown-listor eller checkboxar än toggleknappar.

Sortering

Sortera efter:

Filtrering

Visa innehåll som:


Till toppen-knapp

Till toppen-knappen syfte är att användaren snabbt ska kunna ta sig till sidans topp. När användaren scrollar ner på sidan så dyker knappen automatiskt upp efter ett tag. Nedan syns knappen i vanligt läge (default), när användaren för muspekaren över (hover) samt vid fokuserat läge (tab).



Stängknapp

Stängknappen, eller kryssknappen, används för att stänga meddelanden eller popup-rutor.


Stängknapp i popup-rutor

  • Kryss: 32px
  • Kryssfärg: grey-7
  • Kryss linjeras med övrig text
Desktop

Systeminnovation för en hållbar framtid

Vinnovas underlag och förslag till regeringens forskningsproposition

Mobil

Systeminnovation för en hållbar framtid

Vinnovas underlag och förslag till regeringens forskningsproposition

Hover
  • Kryss ökar i storlek med 10%
  • Kryssfärg: Från grey-7 till grey-10
Tab
  • Ram: gron-7, 2px
  • Inre marginal: 10px

Stängknapp i meddelanden

  • Kryss: 24px
  • Padding till höger: 16px
  • Kryssets topp linjeras med övrig text

Info!Vulputate neque diam aliquet vel pellentesque.Rutrum id consectetur

Bakgrundsfärg: #Grey-2
Färg på text, ikon och kryss: #Grey-8


Fel!Odio in leo phasellus convallis nunc.Non sem ac

Bakgrundsfärg: #Rod-2
Färg på text, ikon och kryss: #Rod-8


Framgång!Fermentum mauris at fringilla egestas pellentesque.Quisque commodo in

Bakgrundsfärg: #Gron-2
Färg på text, ikon och kryss: #Gron-8


Varning!Feugiat pulvinar nunc etiam sed in.Id eu cursus

Bakgrundsfärg: #Marin-2
Färg på text, ikon och kryss: #Marin-8


Massa vestibulum platea quis ante in at massa tortor at tortor tellus ipsum dolor elit elementum massa vitae quis blandit diam nisl mi dui ornare ut.


Framgång!Pulvinar nunc fermentum ac senectus non.Quis consequat quam



Hover
  • Kryss ökar i storlek med 10%
  • Kryssfärg ökar två nyanser
Tab
  • Ram: grön-7, 2px
  • Inre marginal: 10px (kryss till ram)

Storlek och avstånd

Storleken på knappen är dynamisk, vilket innebär att den är beroende av knappens textlängd.

De flesta knappar har en standardhöjd, men höjden kan även minskas till medium och small.

Textstorlek: 16px
Horisontell padding: 32px
Vertikal padding: Beror på knappens textstorlek. En standardknapp med 16px-text ska även ha 16px i vertikal padding.
Hörnradie: 0
Mellanrum mellan knappar: 16px

Grid går före angivna mått

Höjd

Large: 48px

Medium: 40px

Small: 32px

Avstånd mellan knappar

16px mellan knapparna

Komponenter Inmatningsrutor2

Inmatningsrutor

Komponenter Kontroller

Switch-knappar

Swichknappar används när en besökare uppmanas att ta ställning till om en funktion ska vara av eller på. Vi tydliggör även i text om funktionen är av eller på.

  • Om aktiverad: Bakgrund: gron-4, Knapp: vit
  • Om avaktiverad: Bakgrund: vit, Knapp: grey-5
ALLTID PÅ




Checkboxar

Förutom checkboxen ska texten intill vara klickbar.



Radioknappar

Förutom radioknappen ska texten intill vara klickbar.

Finns det anmärkning i kreditupplysningen *

OBS. Scrollbars visas som bild.

Kan användas i steg i undantagsfall. Används i startrapporten i steg 3 Agenda 2030.

Komponenter Meddelanden

Framgång!Enim at aliquam maecenas id semper.Venenatis dictum consectetur


Fel!Sit sit ipsum turpis cursus nunc.Adipiscing placerat pulvinar


Varning!Id ac at mattis donec fermentum.Posuere ac id


Info!Massa augue pellentesque in odio sit.Convallis donec convallis

OBS. Autospar visas som bild.

Syftet är att användaren inte ska förlora inmatade data om den missat att spara eller tappar uppkopplingen. Autospar försöker spara ansökan/rapport en gång i minuten.

Autospar finns inte i Bedömningsportalen. Där sparas det när man lämnar ett fält.

Autospar sparar inte om något av följande pågår/inträffat:

  • en användarsparning pågår, dvs användaren har själv klickat på spara
  • samma ansökan eller rapport är öppen i en annan flik
  • webbfönstret/fliken har inte fokus. I Edge kan man vara tvungen att sätta markören i ett fält eller klicka någonstans på sidan för att ge sidan fokus igen

Det finns en varning om man har samma ansökan/rapport öppen i flera flikar för att undvika att flikarna sparar över varandra. Om man stänger flikar så att ansökan/rapporten endast är öppen i en flik så ska autospar börja spara igen så fort fliken får fokus.

Om autospar misslyckas meddelas inte användaren på något sätt om detta, men då uppdateras inte "senast sparad"-texten.

Autospar ska inte trigga valideringar

Autospar finns inte än på Begäran om ändring.

Komponenter Listor

OBS. Listor visas som bild.

Listor

Valbara rader görs med en checkbox. Här ska inte texten bredvid vara klickbar så att checkboxen bockas i, eftersom titeln är klickbar och går till bedömningen.

Komponenter Rullistor

Inget här ännu

Komponenter Taggar och etiketter

Taggar

Vi använder taggar för att märka upp innehåll med kategorier eller ämnesområden. Innehåll kan märkas med flera taggar samtidigt. Taggar används till exempel på publikationer, kalenderhändelser och nyheter.


Mått och beskrivning

Textstorlek: 14 px
Padding: 6 px
Avstånd mellan varje tagg: 6 px
Bakgrundsfärg: #grey-1

Genus och målfald
Hälsa
Informations- och kummunikationsteknik

Etiketter (label)

Vi använder etiketter för att:

  • tydliggöra vilken typ av innehåll vi visar, exempelvis med etiketten NYHET eller FINANSIERING.
  • prioritera ett särskilt innehåll bland andra, exempelvis med etiketten REKOMMENDERAD.
  • datummärka ett innehåll, exempelvis med tidsetiketten 1 januari eller 3 days ago.

Etiketter används på flera puffar, sökträffar och rapporter.

Textstorlek

Desktop: 16 px

Mobil: 14 px

Placering

Typ av innehåll: ovanför rubrik

Prioritering av innehåll: ovanför rubrik

Datumetikett: under rubrik

Exempel på etikett publiceringsdatum:

Innovationer inom medicinsk forskning

Publicerad 21 april 2020

Exempel på etikett nyhetspuff:

Nyhet

Systeminnovation

Exempel på etikett rekommenderad sökträff:

Rekommenderat

Systeminnovation för en hållbar framtid. Vinnovas underlag och förslag till regeringens forskningsproposition

Exempel på sökträff för publikation med både tagg och etikett:

Rekommenderat

Systeminnovation för en hållbar framtid. Vinnovas underlag och förslag till regeringens forskningsproposition

Vinnovas underlag och förslag till regeringens forskningsproposition

Utgiven: 2019-oktober

Genus och mångfald
Hälsa
Ledning och organisering
Material
Miljö och mångfald
Produktion
Tjänster
Transport
EU

Exempel på sökträff för globalsöket med etikett:

FINANSIERING

Produktion 2030 - utlysning 11

Finansierar forsknings- och innovationsprojekt som kan bidra till ökad hållbarhet och ökad konkurrenskraft i svensk tillverkningsindustri

Komponenter Steg och progress

Inget här ännu

Komponenter Sök och filtrering

Sökträffar

Träffar i globalsök innehåller information om vad det är för typ av sida, vad sidan innehåller och var besökaren kan hitta sidan. Rubriken samt brödsmulans alla steg är klickbara.

I mobil försvinner brödsmulan av utrymmesskäl.

FINANSIERING

Produktion 2030 - utlysning 11

Finansierar forsknings- och innovationsprojekt som kan bidra till ökad hållbarhet och ökad konkurrenskraft i svensk tillverkningsindustri

Evenemang

Hur kan offentlig sektor jobba mer systematiskt för att bli bättre på att leda för innovation?

Välkommen till ett seminarium som tar upp lärdomar från kommuners pågående arbete med innovationsprojekt, men också metodik som kan användas som stöd för att utveckla förmågan att leda för innovation.

FINANSIERING

Produktion 2030 - utlysning 11

Finansierar forsknings- och innovationsprojekt som kan bidra till ökad hållbarhet och ökad konkurrenskraft i svensk tillverkningsindustri

Storlekar och avstånd

Rubrik, textstorlek: 25 px

Brödtext, textstorlek: 16 px

Brödsmula, textstorlek: 16 px

Marginaler: 20 px (förutom efter etikett som är 10px)



Komponenter Bilder

Rekommenderade storlekar för bilder:

  • Toppgrafikbild 1800 x 500

Puffar

  • Puff fullbredd 1160 x 370

  • Puff ½ 565 x 370

  • Puff ¼ 268 x 370

  • Puff ¾ 863 x 370

Bildblock

  • Fullbredd - icke värdebärande 1800 x 500

  • Fullbredd - värdebärande 1800 x oändlig

  • Smalare format - icke värdebärande 850 x 500

  • Smalare format - värdebärande 850 x oändlig

  • Bildspel 850 x 500

Mobil

  • Fullbredd - icke värdebärande 600 x 400

  • Fullbredd - värdebärande 600 x oändlig

  • Smalare format - icke värdebärande 560 x 400

  • Smalare format - värdebärande 560 x oändlig

Nyhetsbilder

  • Bild nyhet - sida 850 x oändlig

  • Bild nyhet - puff 574 x 265

  • Bild nyhet - block (ZickZack) 511 x 265

  • Bild nyhet - lista 280 x 175

Komponenter Dekoration