Gå til sidens indhold

Design

Hjørner, streger, skygger

Hjørner

Firkantede hjørner (0px)

Bruges til elementer, som man ikke kan interagere med.

border-radius: 0;

Runde hjørner (4px)

Bruges til interaktive elementer, fx input-felter og knapper.

border-radius: 4px

Implementering

Statiske hjørner

  • Statiske hjørner er lige og har en border-radius: 0px;
  • For at få lige hjørner skal du bruge variablen $static-border-radius
Eksempel:
border-radius: $static-border-radius;

Interaktive hjørner

  • Interaktive hjørner er runde og har en border-radius: 4px;
  • For at få runde hjørner skal du bruge variablen $interactive-border-radius
  • Interaktive hjørner bør kun bruges til håndtering af interaktive elementer, da det er meningen at differentiere indhold fra aktion.
Eksempel:
border-radius: $interactive-border-radius;

Streger

Ydre-streger

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

border: 1px solid #747474;

Indre-streger

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

border: 1px solid #BFBFBF

Indre-indre-streger

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

border: 1px solid #DCDCDC

Knap-streger

Specifik streg til knapper.

Virk tema:

border: 2px solid #004993

Borger.dk tema:

border: 2px solid #3C5C22

Horisontal ruler

hr elementet har samme farve som den Indre streg


border-top: 1px solid #BFBFBF

Implementering

Ydre streger

  • Ydre streger er 1px bredde og er mørkegrå. Brug variablen $outer-border for at opsætte ydre kanter.
  • Bruges som ydre streger på komponenter, til at adskille dem fra hinanden.
Eksempel:
border: $outer-border;

Indre streger

  • Indre streger er 1px bredde og er lysegrå. For at bruge indre borders bruges variablen $inner-border
  • Anvendes som indvendige streger i komponenter, der kræver separering af elementer.
Eksempel:
border: $inner-border;

Knap borders

  • Borders på knapper er 2px bredde og farven afhænger af elementet. For at bruge borders til knapper bruges variablen $button-border
  • Har ekstra border bredde, som bruges på knapper
Eksempel:
border: $button-border;

Skygger

Modalvindue

Skygge, der bruges på modalvinduer.

box-shadow: 0 8px 16px 0 rgba(#000, 0.3);

Overflow menu

Skygge, der bruges på overflow menuer

box-shadow: 0 4px 8px 0 rgba(#000, 0.3);

Cards

Skygge, der bruges på cards

box-shadow: 0 2px 4px 0 rgba(#000, 0.3);

Implementering

Modalvindue

Modalvinduer har en sort skygge på 0 8px 16px 0 og har variablen $box-shadow-heavy

Eksempel
box-shadow: $box-shadow-heavy;

Overflow menu

Overflow menu har en sort skygge på 0 4px 16px 0 og har variablen $box-shadow-moderately

Eksempel:
box-shadow: $box-shadow-moderately;

Cards

Cards har en sort skygge på 0 2px 16px 0 og har variablen $box-shadow-slightly

Eksempel:
box-shadow: $box-shadow-slightly;