Gå til sidens indhold

Vælg et tema

Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.


Styleguide

Hjørner, streger, skygger

Hjørner

Eksempel

Firkantede hjørner (0px)

Bruges til elementer, som man ikke kan interagere med.

Runde hjørner (4px)

Bruges kun til håndtering af interaktive elementer, da det er meningen at differentiere indhold fra aktion.

Designværdier

Navn Border radius
Statiske hjørner 0px
Interaktive hjørner 4px

Streger

Eksempel

Fokusstreg

Bruges til at fremhæve det interaktive element, som har fokus.

Ydre-streger

Bruges til de yderste streger i et element, se fx tabeller.

Indre-streger

Bruges til indre streger i et element, se fx tabeller.

Indre-indre-streger

Bruges til indre streger i et element, som allerede er omkranset af indre steger, se fx venstremenu.

Knap-streger

Specifik streg til knapper.

Horisontal ruler

hr elementet har samme farve som den Indre streg.


Fejl ved felt

Bruges i venstre side af et felt, når der er fejl i feltet.

Streg ved åben detalje-komponent

Bruges i venstre side af en åben detalje-komponent.

Streg ved aktivt menupunkt i venstremenuen

Bruges i venstre side af et aktivt menupunkt i venstremenuen.

Streg under aktivt menupunkt i header navigation

Bruges under et aktivt menupunkt i navigationen i headeren.

Facitstreg

Bruges under et tal for at indikere et resultat.

10.884,50

Designværdier

Navn Farve Tykkelse Type
Fokusstreg #747474 4px solid
Ydre streger #747474 1px solid
Indre streger #BFBFBF 1px solid
Indre-indre streger #DCDCDC 1px solid
Knap kant streger #3C5C22 (Borger.dk)
#004993 (Virk)
2px solid
Horisontal ruler #BFBFBF 1px solid
Fejl ved felt #CC0000 4px solid
Streg ved åben detalje-komponent #BFBFBF 4px solid
Streg ved aktivt menupunkt i venstremenu #44831E (Borger.dk)
#0059B3 (Virk)
4px solid
Streg ved aktivt menupunkt i venstremenu #44831E (Borger.dk)
#0059B3 (Virk)
7px solid
Facitstreg #747474 4px double

Skygger

Eksempel

Modalvindue

Skygge, der bruges på modalvinduer.

Overflow menu

Skygge, der bruges på overflow menuer

Cards

Skygge, der bruges på cards

Designværdier

Navn Skygge Skyggefarve Gennemsigtighed
Modal 0 8px 16px 0 #000000 30%
Overflow menu 0 4px 8px 0 #000000 30%
Cards 0 2px 4px 0 #000000 30%