Farver

Her er en oversigt over tilgængelige CSS-variable for farver i designsystem:

  /* Greyscale colors (incl. black and white) */
  --grey1: hsl(0, 0%, 100%); /* Hvid */
  --grey2: hsl(60, 7%, 95%);
  --grey3: hsl(60, 7%, 90%); /* KEFM Light beige */
  --grey4: hsl(60, 7%, 80%); /* A greyer version of KEFM Dark beige */
  --grey5: hsl(55, 7%, 70%);
  --grey6: hsl(50, 7%, 53%);
  --grey7: hsl(45, 7%, 33%);
  --grey8: hsl(45, 15%, 20%);
  --grey9: hsl(45, 15%, 10%);
  --grey10: hsl(0, 0%, 0%); /* Sort */
  
  /* Primary "blue" colors */
  --c1: hsl(198, 100%, 90%);
  --c2: hsl(198, 100%, 80%);
  --c3: hsl(198, 100%, 70%); 
  --c4: hsl(198, 100%, 60%);
  --c5: hsl(198, 100%, 50%);
  --c6: hsl(198, 100%, 40%); /* Hover blå */
  --c7: hsl(198, 100%, 30%); /* Primær blå */
  --c8: hsl(198, 100%, 22%);
  --c9: hsl(198, 100%, 14%);
  --c10: hsl(198, 100%, 6%);

  /* "Blue-green" colors */
  --g1: hsl(186,100%,90%);
  --g2: hsl(186,100%,80%);
  --g3: hsl(186,100%,70%);
  --g4: hsl(186,100%,60%);
  --g5: hsl(186,100%,54%); /* Aktion */
  --g6: hsl(186,100%,33%); /* KEFM Light green */
  --g7: hsl(186,79%,29%); /* KEFM Medium green */
  --g8: hsl(186,92%,21%); /* KEFM Dark green */
  --g9: hsl(186,92%,10%);

  /* "Red" colors */
  --r1: hsl(350,80%,90%);
  --r2: hsl(350,80%,80%);
  --r3: hsl(350,80%,70%);
  --r4: hsl(351,82%,60%); /* KEFM pink */
  --r5: hsl(355,75%,50%);
  --r6: hsl(359,69%,40%); /* KEFM Dark pink / Advarsel / Text-attention */
  --r7: hsl(359,69%,30%);
  --r8: hsl(359,69%,20%);
  --r9: hsl(359,69%,10%);

  /* "Yellow" colors */
  --y1: hsl(50, 100%, 90%);
  --y2: hsl(50, 100%, 80%);
  --y3: hsl(50, 100%, 70%);
  --y4: hsl(50, 100%, 60%); /* KEFM Light yellow / Text-attention yellow */
  --y5: hsl(47, 80%, 52%); /* KEFM Dark yellow */
  --y6: hsl(47, 80%, 45%);
  --y7: hsl(47, 80%, 40%); /* Darker yellow */
  --y8: hsl(47, 80%, 30%);
  --y9: hsl(47, 80%, 15%);

  /* "Orange" colors */
  --o1: hsl(25,95%,90%);
  --o2: hsl(25,95%,80%);
  --o3: hsl(25,95%,70%);
  --o4: hsl(25,95%,60%); /* KEFM Light orange / Highligt */
  --o5: hsl(20,80%,50%); 
  --o6: hsl(16,65%,43%); /* KEFM Dark orange */
  --o7: hsl(16,65%,35%);
  --o8: hsl(16,65%,25%);
  --o9: hsl(16,65%,15%);

  /* Color shorthands */
  --yellow: var(--y4);
  --orange: var(--o4);
  --red: var(--r6);
  --green: var(--g7);
  --blue: var(--c7); 
  --black: var(--grey10);
  --white: var(--grey1);
  --highlight: var(--o4);
  --warning: var(--r6);

  --primary: var(--c7);
  --primary-hover: var(--c6);
  --primary-focus: var(--04);
  

Formularer og inputfelter

Inputfelter til formularer er allerede stylet for dig. Du skal ikke gøre noget særligt ud over at bruge korrekt HTML.

Layout

Herunder kan du finde flere detaljer om, hvordan du nemt laver layouts i Klimadatastyrelsen-stil.

Vi har lavet nogle eksempler, hvor du kan se forskellige layout-teknikker i praksis.

Eksempler på brug af grid og layout

Kolonner og grids

Lav et simpelt kolonne-layout ved at tilføje ds-grid class til det element, der indeholder de elementer, som skal vises i kolonner.

Fleksible kolonner

Hvis boksene gerne må bruge den plads, der er til rådighed, så kan du bruge ds-flexgrid class i stedet.

Primære/sekundære kolonner

Brug class .ds-grid-2-1 på elementet udenom, når du vil vise to elementer som hhv. primær og sekundær kolonne.

Brug class .ds-grid-1-2 hvis rækkefølgen skal være omvendt.

Indholds-containere

Hvis du skal vise noget indhold i én kolonne midt i skærmen, så sæt ds-container class på elementet. Indholdet i denne tekst er centreret med class ds-container

Simpel rækkevisning

Brug class ds-flex-row, hvis du blot vil vise to elementer ved siden af hinanden, og de skal være centreret i højden.
F.eks.:

Simpel kolonnevisning

Brug class ds-flex-column, hvis du blot vil vise nogle elementer over/under hinanden, og de skal adskilles af samme afstand.
F.eks.:

Indvendig afstand / padding

Du kan sætte standard padding ved at bruge class="ds-p" i et HTML-element.

<div class="ds-p"> ... </div>

Indhold med ds-padding omkring sig.

Specielle paddings

Du kan sætte en class med en specifik padding til særlige indrykninger o.l.

Du kan bygge en specifik class ved at kombinere:

1. ds-pt, ds-pb, ds-pl, ds-pr for hhv. padding-top, padding-bottom, padding-left og padding-right
2. -xxs, -xs, -sm, -md, -lg, -xl, -xxl for den størrelse padding, du ønsker

En class ds-pb-sm vil således give en padding-bottom: 0.5rem

Det samme resultat kan opnås ved at bruge CSS custom properties: style="padding-bottom: var(--space-sm);"

Udvendig afstand / margin

Du kan sætte en class med en specifik margin til særlige indrykninger o.l.

Du kan bygge en specifik class ved at kombinere:

1. ds-mt, ds-mb, ds-ml, ds-mr for hhv. margin-top, margin-bottom, margin-left og margin-right
2. -xxs, -xs, -sm, -md, -lg, -xl, -xxl for den størrelse margin, du ønsker

En class ds-mr-lg vil således give en margin-right: 2rem

Det samme resultat kan opnås ved at bruge CSS custom properties: style="margin-right: var(--space-lg);"

Navigationselementer

Navigationselementer laves med <nav> elementet.

Se demoside her.

Produktkort/cards

Produktkort og cards laves nemt ved at sætte class ds-card på et element. Det første <img> element i et ds-card bliver altid vist som hovedbilledet.

Produktkort titel

Dette er et produktkort/card.

Produktkort titel

Dette er et produktkort/card.

Billeder og figurer

Billeder indsættes med img-elementet.

Man kan vise et billede som figur med beskrivelse ved at bruge figure og figcaption sammen med billeder.

Tabeller

Tabeller kræver intet særligt, da de allerede er stylet som default. Du skal blot bruge korrekt HTML.

Lister

Definition list

Collapsible (disclosure element)