Sidhuvudets delar

Sidhuvudet ligger överst på webbplatsens samtliga sidor och består av tre huvudsakliga komponenter: hemknapp, megameny och sekundärmeny. Nedan kan du läsa mer om samtliga delar och element relaterade till sidhuvudet.

 


Sidhuvudet har en specifik färgplatta i en ljusgrå färg med (hex: F9FAF9) och ett mörkgrått streck med (hex: dbdbdb) används som avskiljare mellan megamenyn och sekundärmenyn.

 


Sidhuvudet har en annan layout för mobilenheter/surfplattor.

 

Hemknapp


Max-bredd för logo: 90px
Max-höjd för logo: 29px 

Hemknappen återfinns till vänster i sidhuvudet och har SCAs trefärgade logga som grafiskt tillhörande element. Knappens funktion är att ta användaren tillbaka till startsidan. Hemknappen är oavsett enhet och skärmupplösning alltid placerad på samma plats. Vid lägre upplösning blir hemknappen mindre för att anpassas till övrig layout.

 

Megamenyn i desktop

Megamenyn är webbplatsens övergripande navigation och innehåller en sökfunktion. Läs mer om sökfunktionen på sidan Funktioner.

 


Bilden visar en del av megamenyn då den är utfälld.

 

Designelement

Megamenyn har flertalet designelement och nedan följer en beskrivning av varje elements formatering.

 


Textfärg: B1
Hex: 00205b
Typsnitt: HelveticaNeue
Typsnittsvikt: 200
Teckenstorlek: 1rem
Radavstånd: 1rem

 


Textfärg: Vit
Hex: FFFFFF
Typsnitt: HelveticaNeue
Typsnittsvikt: 200
Teckenstorlek: 1.125rem
Radavstånd: 1.4375rem
Placering: Vänsterställd
Färgplatta: B1
Hex: 00205B

 


Textfärg: B1
Hex: 00205B
Typsnitt: HelveticaNeue
Typsnittsvikt: 700
Teckenstorlek: 1.125rem
Radavstånd: 1.4375rem
Placering: Vänsterställd

 


Textfärg: B1
Hex: 00205B
Typsnitt: HelveticaNeue
Typsnittsvikt: 200
Teckenstorlek: 1.125rem
Radavstånd: 1.4375rem
Placering: Vänsterställd

 


Textfärg: B1
Hex: 00205B
Typsnitt: Scaicons
Typsnittsvikt: 400
Teckenstorlek: 32px
Radavstånd: 1

 

Specifik formatering för länken till Mitt SCA i megamenyn.


Textfärg: G3
Hex:44986B
Typsnitt: HelveticaNeue
Typsnittsvikt: 200
Teckenstorlek: 1rem
Radavstånd: 1rem

 

Animering

Det finns en typ av animering som används på samtliga länkar i hela megamenyn. Nedan följer en beskrivning av hur den fungerar.

 


Då användaren för muspekaren över länken aktiveras en animering där ett streck tonas in samtidigt som det trycks nedåt för att sedan placera sig under länken. 

 

Megameny i mobil/surfplatta

För mobilenheter/surfplattor antar megamenyn ett annat utseende som är mer anpassat för dessa typer av enheter. 

 


Megamenyn fälls ut genom att klicka på ikonen längst till höger i bilden.


I mobilläget arrangeras innehållet i en lång vertikal lista där olika användaren kan fälla ut innehåll med hjälp av en plusknapp och fälla in samma innehåll med en minusknapp.

 

 

Designelement

 


Textfärg: B1
Hex: 00205B
Typsnitt: HelveticaNeue
Typsnittsvikt: 700
Teckenstorlek: 1.125rem
Radavstånd: 1.25rem
Placering: Vänsterställd

 


Textfärg: B1
Hex: 00205B
Typsnitt: HelveticaNeue
Typsnittsvikt: 200
Teckenstorlek: 1.125rem
Radavstånd: 1.625rem
Placering: Vänsterställd

 


Textfärg: G3
Hex: 44986B
Typsnitt: HelveticaNeue
Typsnittsvikt: 400
Teckenstorlek: 1.125rem
Radavstånd: 1.625rem
Placering: Vänsterställd

 


Ikonfärg: B1
Hex: 00205B
Typsnitt: Icomoon
Typsnittsvikt: 400
Teckenstorlek: 20px
Radavstånd: 50px

 

Sekundärmenyn i desktop

Sekundärmenyn återfinns ovanför megamenyn och innehåller fyra länkar till specifikt utvalda områden på webbplatsen samt funktionen att välja språk på siten. Områdena hållbarhet, investerare och media återfinns även i megamenyn. 

 

Designelement

 


Textfärg: Mörkgrå
Hex: 6A6A6A
Typsnitt: HelveticaNeue
Typsnittsvikt: 200
Teckenstorlek: 14px
Radavstånd: 18px
Placering: Vänsterställd

 


Textfärg: Mörkgrå
Hex: 6A6A6A
Typsnitt: HelveticaNeue
Typsnittsvikt: 200
Teckenstorlek: 14px
Radavstånd: 18px
Placering: Vänsterställd

 


Max-bredd: 18px
Max-höjd: 18px
Ikonfärg: N2
Hex: 696969

 

Animering

För att välja språk på webbplatsen klickar användaren på knappen som ser ut som en jordglob. Denna knapp ligger placerad överst i det högra hörnet på siten. Knappen fäller horisontellt ut en meny med de olika alternativen av språk som webbplatsen finns på.

 


Jordgloben klickas för att visa vilka språkalternativ som finns.

 


Språkvalen glider ut ifrån jordgloben, från höger till vänster. Därefter ersätts jordgloben med en kryssikon som stänger ned menyn om inget språk väljs. Språkvalen glider tillbaka in mot jorgloben, från väsnter till höger, när denna sektion stängs.

 

Sekundärmenyn i mobil/surfplatta

Sekundärmenyn ändrar position och utseende då webbplatsen besöks från en mobilenhet eller surfplatta. Sekundärmenyn flyttas från att ligga ovanför megamenyn till att återfinnas under själva megamenyn.

 

 

Sektionen om språk har en plusknapp för att fälla ut alla alternativ. Menyn fälls sedan in genom att trycka på minusknappen, se bild nedan:

 

Sektionen för de fyra specifikt utvalda områdena återfinns längst ned i menyn och har tillhörande grafiska element i form av pilar.

Vid klick på någon av länkarna för de fyra specifikt utvalda områden aktiveras en animation. Pilen tillhörandes den klickade länken förlängs och sträcks utåt, i riktning mot höger. Se exempel nedan:

 

Designelement

 


Textfärg: B1
Hex: 00205B
Typsnitt: HelveticaNeue
Typsnittsvikt: 200
Teckenstorlek: 1.25rem
Radavstånd: 1.625rem
Placering: Vänsterställd

 


Textfärg: B1
Hex: 00205B
Typsnitt: HelveticaNeue
Typsnittsvikt: 200
Teckenstorlek: 1rem
Radavstånd: 1.25rem
Placering: Vänsterställd

 


Max-bredd: 24px
Max-höjd: 24px
Ikonfärg: N2
Hex: 696969