menu

Linjer

LLinjerna hjälper till att strukturera innehållet och är en viktig identitetsbärare. De horisontella linjerna finns i varianterna tunn och tjock. Placera alltid en linje exakt mittemellan innehållet före och efter.

Grundregler

Tunn eller tjock linje?

Vi skiljer på användandet mellan tunna och tjocka linjer.

Tunn linje...

  • i samband med underrubriker.
  • som avdelare före eller efter innehåll.
  • flera gånger på en sida/vy om det behövs.
  • är placerad exakt mittemellan innehållet den ska avdela.
  • är svart, vit eller grå.
  • i samband med fliknavigation.

Tjock linje...

  • endast i sid- och sektionsheader.
  • max en gång per sida/vy.
  • är placerad exakt mellan rubrik/ingress och brödtext.
  • är svart eller vit.
  • som markör i flik.

Marginaler

Avståndet före och efter en linje ska vara runt ¾ av huvudrubrikens höjd. Exempel: är rubriken 40 px hög så ska marginalen över och under linjen vara 30 px.

Storleksförhållande tjock linje/rubrik

Se till att den tjocka linjen har rätt proportioner i förhållande till rubriken den tillhör. Det är särskilt viktigt i en responsiv miljö. Några riktlinjer:

Rubrikstorlek Linjetjocklek
60px 10px
48px 8px
36px 6px
30px 4px

Färger

Precis som med text så är linjerna svarta som standard, alternativt vita mot färgad bakgrund. Undantaget är den tunna linjen som kan vara i gråskala enligt komplementfärgerna.

Användningsområden

Linjer i pageheader

Det finns två varianter beroende på om sidan har en ingress eller inte. Ordningen uppifrån och ner är alltid tunn linje, rubrik, ingress, tjocklinje och brödtext/bild.

Se Pageheader för mer information och exempel.

Linjer vid flikar

Använd en tunn linje (1 px) som baslinje, med en tjock linje (4 px) som markör.

Se Flikar för mer information och exempel.

Linjer i tabeller och listor

Använd en tunn linje (1 px) som avdelare i tabeller och listor, samt en tjockare start- och slutlinje (2 px).

Se Tabeller och Listor för mer information och exempel.