Marginaler och avstånd

Här visas hur marginaler och avstånd har strukturerats i designskisserna. Tänk på att det kan skilja mot hur det har utvecklats samt vad som ligger live.

Innehållsförteckning


Komponentkällor


Resursfilen i Figma innehåller en komponent för spacing som kan användas i skisser.

Designspecifikation


Denna sida är framtagen för att visa hur marginaler och avstånd mellan element kan appliceras på en sida. Marginaler och avstånd utgår från en 8-baserad skala.

Tanken med att visa exempel är att ge en utgångspunkt för hur element ska förhålla sig till varandra i de skisser som tas fram.
Förståelse finns såklart för att varje tjänst eller skiss kan ha sina unika förutsättningar, därför är det som visas här endast exempel. Ibland kanske du själv ser att något behöver flyttas för att skapa en bättre harmoni, och kan fritt göra det.

Exempel på avstånd och marginaler

Marginaler och avstånd utgår från en 8-baserad skala.

Typ av innehåll

Mobil (värde i px)

Dator (värde i px)

Typ av innehåll

Mobil (värde i px)

Dator (värde i px)

Sidhuvud till brödsmula

20

20

Brödsmula till H1

8

48

Mellan sektioner

32

40

Marginal till H3/H4/block

20

32

Marginal mellan content och sidfot

96

152

Marginal mellan content och sidans kant

20

90

 

Visuella exempel

image-20240125-105123.png
Desktop

 

 

Feedback


Hjälp oss att förbättra den här informationen genom att ge feedback, ställa frågor och lämna andra kommentarer på Inera UX Slacken i kanalen #komponenter_design eller #komponenter_kod alternativt kan du använda vårt formulär.

Publicerad

Jan 18, 2020

Senast uppdaterad

Jan 25, 2024