Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Hjørner, streger, skygger
Hjørner
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
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,50Designvæ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
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% |