Lerna versionbump [ci skip]

- @navikt/ds-css@0.6.3 - @navikt/ds-react@0.6.3 - @navikt/ds-tokens@0.4.3 - nav-frontend-ikonknapper@2.0.2 - nav-frontend-knapper-style@2.0.2 - nav-frontend-knapper@3.0.2 - nav-frontend-tabell-style@2.0.2 - nav-frontend-toggle-style@2.0.2 - nav-frontend-toggle@2.0.2
Button styling + oppdatert styling for ds-react komponenter (#1134 )
2026-10-15 18:22:02 +00:00 · 2021-07-02 15:03:44 +00:00 · 2021-07-02 16:50:09 +02:00 · 2021-06-24 09:02:56 +02:00 · 2021-06-23 13:53:34 +00:00 · 2021-06-23 15:41:56 +02:00
114 changed files with 3000 additions and 573 deletions
@@ -8,6 +8,7 @@ on:
    branches: [master]
  pull_request:
    branches: [master]
+  workflow_dispatch:

 jobs:
  build:
@@ -28,11 +29,15 @@ jobs:
          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
      - name: Install deps
        if: steps.node-cache.outputs.cache-hit != 'true'
-        run: yarn install --frozen-lockfile
+        run: yarn install
      - name: Gulp-build
        run: yarn boot
      - name: Eslint and Stylelint
        run: yarn lint
+      - name: add access token to .env
+        run: echo "ACCESS_TOKEN=${{ secrets.VERKTOYKASSE_INNHOLD_TOKEN }}" >> website/.env
+      - name: add branch token to .env
+        run: echo "BRANCH=HEAD" >> website/.env
      - name: Test gatsby-build
        run: yarn build:gatsby
      - name: Test chromatic
@@ -96,11 +101,13 @@ jobs:
          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
      - name: Install deps
        if: steps.node-cache.outputs.cache-hit != 'true'
-        run: yarn install --frozen-lockfile
+        run: yarn install
      - name: Gulp-build
        run: yarn boot
-      - name: add CNAME to website
-        run: echo "design.nav.no" >> website/static/CNAME
+      - name: add access token to .env
+        run: echo "ACCESS_TOKEN=${{ secrets.VERKTOYKASSE_INNHOLD_TOKEN }}" >> website/.env
+      - name: add branch token to .env
+        run: echo "BRANCH=HEAD" >> website/.env
      - name: Building Gatsby
        run: yarn build:gatsby
      - name: Building Storybook
@@ -1,4 +1,3 @@
-
 name: Publish verktøykasse-innhold to dev

 on:
@@ -6,9 +5,8 @@ on:
    branches: verktoykasse-prototype
  repository_dispatch:
    types: [new-content]
-  workflow_dispatch: 
+  workflow_dispatch:

-    
 jobs:
  build:
    runs-on: ubuntu-latest
@@ -33,8 +31,10 @@ jobs:
        run: yarn boot
      - name: Eslint and Stylelint
        run: yarn lint
-      - name: add .env to website
+      - name: add access token to .env
        run: echo "ACCESS_TOKEN=${{ secrets.VERKTOYKASSE_INNHOLD_TOKEN }}" >> website/.env
+      - name: add branch token to .env
+        run: echo "BRANCH=dev" >> website/.env
      - name: Gatsby-build
        run: yarn build:gatsby
      - name: Deploy to dev gh-pages
@@ -45,4 +45,3 @@ jobs:
          publish_dir: website/public
          user_name: "github-actions[bot]"
          user_email: "github-actions[bot]@users.noreply.github.com"
-          
@@ -5,14 +5,12 @@
 .navds-accordion {
  position: relative;
  background: var(--navds-color-background);
-  border: var(--navds-border-default);
-  border-radius: 4px;
+  border-bottom: 2px solid #c9c9c9;
 }

 .navds-accordion:hover {
-  box-shadow: var(--navds-color-hover);
-  border: var(--navds-panel-hover);
-  color: black;
+  /* color: black; */
+  border-bottom: 2px solid var(--navds-color-blue-50);
 }

 .navds-accordion:focus,
@@ -39,16 +37,16 @@

 .navds-accordion__button {
  padding: var(--navds-spacing-4);
-  border-radius: 4px;
  background: transparent;
-  border: 0;
  text-align: left;
+  border: none;
  width: 100%;
  margin-bottom: 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
+  color: var(--navds-color-text-link);
 }

 .navds-accordion__button:hover .navds-accordion__heading {
@@ -69,3 +67,16 @@
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
 }
+
+.navds-accordion__chevron--filled {
+  display: none;
+}
+
+.navds-accordion__button:hover
+  > .navds-accordion__chevron.navds-accordion__chevron--filled {
+  display: inherit;
+}
+
+.navds-accordion__button:hover > .navds-accordion__chevron {
+  display: none;
+}
@@ -2,20 +2,20 @@
  border-radius: 4px;
  border: var(--navds-border-default);

-  /* Padding calculated based on 16px font for 64px tall alert */
-  padding: 1.1875rem var(--navds-spacing-4);
+  /* Padding calculated based on 18px font for 64px tall alert */
+  padding: 1.0625rem var(--navds-spacing-4);
  display: grid;
  grid-auto-flow: column;
-  column-gap: 0.75rem;
  justify-content: start;
 }

-.navds-alert--small {
-  border-radius: 0;
-  padding: var(--navds-spacing-2) var(--navds-spacing-4);
+.navds-alert--s {
+  padding: 0.1875rem var(--navds-spacing-4);
 }

 .navds-alert > svg {
+  align-self: center;
+  margin-right: var(--navds-spacing-3);
  font-size: 1.5rem;
  background: radial-gradient(
    circle,
@@ -12,12 +12,12 @@
  border-width: 2px;

  /* Padding calculated based on 18px font for 44px tall button */
-  padding: calc(0.625rem - 2px) calc(var(--navds-spacing-8) - 2px);
+  padding: 0.65625rem var(--navds-spacing-3);
 }

-.navds-button--small {
+.navds-button--s {
  /* Padding calculated based on 16px font for 32px tall button */
-  padding: calc(0.3125rem - 2px) calc(var(--navds-spacing-4) - 2px);
+  padding: 0.25rem calc(var(--navds-spacing-4) - 2px);
 }

 .navds-button:focus {
@@ -33,16 +33,16 @@
 .navds-button--primary:active {
  color: var(--navds-color-text-inverse);
  background-color: var(--navds-color-action-hover);
-  border-width: 0;
+  border-color: transparent;

  /* Padding calculated based on 18px font for 44px tall button */
-  padding: 0.625rem var(--navds-spacing-8);
+  padding: 0.53125rem var(--navds-spacing-3);
 }

-.navds-button--primary:hover.navds-button--small,
-.navds-button--primary:active.navds-button--small {
+.navds-button--primary:hover.navds-button--s,
+.navds-button--primary:active.navds-button--s {
  /* Padding calculated based on 16px font for 32px tall button */
-  padding: 0.3125rem var(--navds-spacing-4);
+  padding: 0.25rem calc(var(--navds-spacing-4) - 2px);
 }

 .navds-button--primary:active {
@@ -86,42 +86,18 @@

 .navds-button--action,
 .navds-button--danger {
-  /* Padding calculated based on 18px font for 44px tall button */
-  padding: 0.625rem var(--navds-spacing-8);
-  border-width: 0;
-  transform: translateY(calc(-1 * 2px));
-  position: relative;
-  color: var(--navds-color-text-inverse);
-}
-
-.navds-button--action.navds-button--small,
-.navds-button--danger.navds-button--small {
-  /* Padding calculated based on 16px font for 32px tall button */
-  padding: 0.3125rem var(--navds-spacing-4);
-}
-
-.navds-button--action:not(:focus),
-.navds-button--danger:not(:focus) {
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 2px 0 rgba(0, 0, 0, 0.25);
+  color: white;
+  border-width: 1px;
 }

 .navds-button--action:hover {
  background-color: var(--navds-color-action-hover);
+  border-color: var(--navds-color-action-hover);
 }

 .navds-button--danger:hover {
  background-color: var(--navds-color-danger-hover);
-}
-
-.navds-button--danger:hover,
-.navds-button--action:hover {
-  transform: translateY(calc(-1 * 3px));
-  position: relative;
-}
-
-.navds-button--action:hover:not(:focus),
-.navds-button--danger:hover:not(:focus) {
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 3px 0 rgba(0, 0, 0, 0.25);
+  border-color: var(--navds-color-danger-hover);
 }

 .navds-button--action:active {
@@ -132,131 +108,9 @@
  background-color: var(--navds-color-danger-active);
 }

-.navds-button--action:active,
-.navds-button--danger:active {
-  transform: translateY(0);
-  position: relative;
-}
-
-.navds-button--action:active:not(:focus),
-.navds-button--danger:active:not(:focus) {
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 0 0 rgba(0, 0, 0, 0.25);
-}
-
-.navds-button--action:focus {
-  color: var(--navds-color-action-default);
-  background-color: var(--navds-color-background);
-}
-
+.navds-button--action:focus,
 .navds-button--danger:focus {
-  color: var(--navds-color-danger-default);
-  background-color: var(--navds-color-background);
-}
-
-.navds-button--danger:focus,
-.navds-button--action:focus {
-  /* Padding calculated based on 18px font for 44px tall button */
-  padding: calc(0.625rem - 2px) calc(var(--navds-spacing-8) - 2px);
-  transform: translateY(calc(-1 * 2px));
-  position: relative;
-  border-width: 2px;
-}
-
-.navds-button--action:focus.navds-button--small,
-.navds-button--danger:focus.navds-button--small {
-  /* Padding calculated based on 16px font for 32px tall button */
-  padding: calc(0.3125rem - 2px) calc(var(--navds-spacing-4) - 2px);
-}
-
-.navds-button--action:hover:focus {
-  background-color: var(--navds-color-action-hover);
-}
-
-.navds-button--danger:hover:focus {
-  background-color: var(--navds-color-danger-hover);
-}
-
-.navds-button--action:hover:focus,
-.navds-button--danger:hover:focus {
-  /* Padding calculated based on 18px font for 44px tall button */
-  padding: 0.625rem var(--navds-spacing-8);
-  border-width: 0;
-  color: var(--navds-color-text-inverse);
-}
-
-.navds-button--action:hover:focus.navds-button--small,
-.navds-button--danger:hover:focus.navds-button--small {
-  /* Padding calculated based on 16px font for 32px tall button */
-  padding: 0.3125rem var(--navds-spacing-4);
-}
-
-.navds-button--action:active:focus {
-  color: var(--navds-color-action-active);
-  border-color: var(--navds-color-action-active);
-}
-
-.navds-button--danger:active:focus {
-  color: var(--navds-color-danger-active);
-  border-color: var(--navds-color-danger-active);
-}
-
-.navds-button--action:active:focus,
-.navds-button--danger:active:focus {
-  /* Padding calculated based on 18px font for 44px tall button */
-  padding: calc(0.625rem - 2px) calc(var(--navds-spacing-8) - 2px);
-  transform: translateY(0);
-  position: relative;
-  border-width: 2px;
-  background-color: var(--navds-color-background);
-}
-
-.navds-button--action:active:focus.navds-button--small,
-.navds-button--danger:active:focus.navds-button--small {
-  /* Padding calculated based on 16px font for 32px tall button */
-  padding: calc(0.3125rem - 2px) calc(var(--navds-spacing-4) - 2px);
-}
-
-.navds-button--action:hover:focus:active {
-  color: var(--navds-color-text-inverse);
-  background-color: var(--navds-color-action-active);
-}
-
-.navds-button--danger:hover:focus:active {
-  color: var(--navds-color-text-inverse);
-  background-color: var(--navds-color-danger-active);
-}
-
-/**************************
- * ::before *
- **************************/
-
-.navds-button--action::before,
-.navds-button--danger::before {
-  bottom: calc(-1 * 2px);
-  height: 2px;
-  content: "";
-  display: block;
-  position: absolute;
-  left: 0;
-  right: 0;
-}
-
-.navds-button--action:hover::before,
-.navds-button--danger:hover::before {
-  bottom: calc(-1 * 3px);
-  height: 3px;
-}
-
-.navds-button--action:focus::before,
-.navds-button--danger:focus::before {
-  bottom: calc(-1 * 2px);
-  height: 2px;
-}
-
-.navds-button--action:active::before,
-.navds-button--danger:active::before {
-  bottom: 0;
-  height: 0;
+  border-color: white;
 }

 /**************************
@@ -274,7 +128,7 @@
  transform: none;
 }

-.navds-button:disabled:disabled.navds-button--small {
+.navds-button:disabled:disabled.navds-button--s {
  /* Padding calculated based on 16px font for 32px tall button */
  padding: 0.3125rem var(--navds-spacing-4);
 }
@@ -0,0 +1,31 @@
+/*
+  MicroCard
+*/
+
+.navds-card__micro {
+  border-radius: 1rem;
+  color: var(--navds-color-text-primary);
+  display: inline-flex;
+  padding: var(--navds-spacing-1) var(--navds-spacing-2);
+  text-decoration: none;
+  background-color: var(--navds-color-orange-20);
+  border: 1px solid transparent;
+}
+
+.navds-card__micro:hover {
+  background-color: var(--navds-color-white);
+  border-color: var(--navds-color-blue-50);
+  color: var(--navds-color-blue-50);
+}
+
+.navds-card__micro:focus {
+  background-color: var(--navds-color-white);
+  color: var(--navds-color-blue-50);
+  outline: none;
+  box-shadow: var(--navds-shadow-focus);
+}
+
+.navds-card__micro:active {
+  background-color: var(--navds-color-blue-70);
+  color: var(--navds-color-white);
+}
@@ -0,0 +1,63 @@
+.navds-header {
+  display: flex;
+  justify-content: center;
+  background-color: var(--navds-color-background);
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+  padding-left: calc((100vw - 100%) / 2);
+  padding-right: calc((100vw - 100%) / 2);
+  margin-left: calc((100vw - 100%) / -2);
+  margin-right: calc((100vw - 100%) / -2);
+}
+
+.navds-header__wrapper {
+  width: 100%;
+  max-width: 56.5rem;
+  text-align: start;
+}
+
+.navds-header__title {
+  display: flex;
+  margin: 0 auto;
+  width: 100%;
+  position: relative;
+  flex-direction: column;
+}
+
+.navds-header--left > .navds-header__wrapper {
+  text-align: start;
+}
+
+.navds-header--center > .navds-header__wrapper {
+  text-align: center;
+}
+
+.navds-header__illustration {
+  margin-right: 1.5rem;
+  pointer-events: none;
+}
+
+.navds-header__illustration > svg {
+  width: 5rem;
+  height: 5rem;
+}
+
+.navds-header--situation {
+  box-shadow: 0 -4px 0 var(--navds-color-orange-40) inset;
+}
+.navds-header--product {
+  box-shadow: 0 -4px 0 var(--navds-color-green-40) inset;
+}
+.navds-header--guide {
+  box-shadow: 0 -4px 0 var(--navds-color-deepblue-40) inset;
+}
+
+@media (max-width: 649px) {
+  .navds-header__illustration > svg {
+    width: 3rem;
+    height: 3rem;
+  }
+  .navds-header__title {
+    font-size: var(--navds-font-size-title-xl);
+  }
+}
@@ -8,8 +8,10 @@
@import "accordion-menu.css";
@import "alert.css";
@import "button.css";
+@import "card.css";
@import "content-container.css";
@import "copy-to-clipboard.css";
+@import "header.css";
@import "internal-header.css";
@import "link.css";
@import "modal.css";
@@ -2,7 +2,7 @@
 * .navds-header *
 **************************/

-.navds-header {
+.navds-interal-header {
  display: flex;
  align-items: center;
  background: var(--navds-color-darkgray);
@@ -11,16 +11,16 @@
  min-height: 50px;
 }

-.navds-header__column {
+.navds-interal-header__column {
  display: flex;
  align-items: center;
 }

 /**************************
-  * .navds-header__title *
+  * .navds-interal-header__title *
  **************************/

-.navds-header__title {
+.navds-interal-header__title {
  padding: 0 var(--navds-spacing-6);
  border-right: 1px solid var(--navds-color-gray-40);
  display: flex;
@@ -31,21 +31,21 @@
  color: var(--navds-color-text-inverse);
 }

-.navds-header__title > span > a {
+.navds-interal-header__title > span > a {
  text-decoration: none;
  color: inherit;
 }

-.navds-header__title > span > a:focus {
+.navds-interal-header__title > span > a:focus {
  box-shadow: var(--navds-shadow-focus-on-dark);
  outline: none;
 }

 /**************************
-  * .navds-header__user *
+  * .navds-interal-header__user *
  **************************/

-.navds-header__user {
+.navds-interal-header__user {
  color: var(--navds-color-text-inverse);
  padding: 0 var(--navds-spacing-6);
  margin-left: auto;
@@ -55,6 +55,6 @@
  align-items: center;
 }

-.navds-header__name.navds-body-short {
+.navds-interal-header__name.navds-body-short {
  margin-right: var(--navds-spacing-4);
 }
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "0.5.4",
+  "version": "0.6.3",
  "private": false,
  "description": "Css for NAV Designsystem components",
  "author": "NAV Designsystem team",
@@ -21,7 +21,7 @@
    "watch-css": "postcss -w --use postcss-import -o dist/index.css index.css"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^0.3.2",
+    "@navikt/ds-tokens": "^0.4.3",
    "normalize.css": "^8.0.1",
    "postcss": "^8.2.7",
    "postcss-cli": "^8.3.1",
@@ -7,7 +7,7 @@
 .navds-title--2xl {
  font-size: var(--navds-font-size-title-2xl);
  letter-spacing: -0.01em;
-  line-height: var(--navds-font-line-height-2xl);
+  line-height: var(--navds-font-line-height-s);
 }

 .navds-title--2xl.navds-typo--spacing {
@@ -17,7 +17,7 @@
 .navds-title--xl {
  font-size: var(--navds-font-size-title-xl);
  letter-spacing: -0.008em;
-  line-height: var(--navds-font-line-height-xl);
+  line-height: var(--navds-font-line-height-s);
 }

 .navds-title--xl.navds-typo--spacing {
@@ -27,7 +27,7 @@
 .navds-title--l {
  font-size: var(--navds-font-size-title-l);
  letter-spacing: -0.004em;
-  line-height: var(--navds-font-line-height-l);
+  line-height: var(--navds-font-line-height-s);
 }

 .navds-title--l.navds-typo--spacing {
@@ -37,7 +37,7 @@
 .navds-title--m {
  font-size: var(--navds-font-size-title-m);
  letter-spacing: -0.002em;
-  line-height: var(--navds-font-line-height-m);
+  line-height: var(--navds-font-line-height-s);
 }

 .navds-title--m.navds-typo--spacing {
@@ -58,7 +58,7 @@
 .navds-ingress {
  font-size: var(--navds-font-size-xl);
  letter-spacing: -0.001em;
-  line-height: var(--navds-font-line-height-s);
+  line-height: var(--navds-font-line-height-m);
  margin: 0;
 }

@@ -70,14 +70,14 @@
 .navds-body-long {
  font-size: var(--navds-font-size-l);
  letter-spacing: 0;
-  line-height: var(--navds-font-line-height-s);
+  line-height: var(--navds-font-line-height-m);
  margin: 0;
 }

 .navds-body-short {
  font-size: var(--navds-font-size-l);
  letter-spacing: 0;
-  line-height: var(--navds-font-line-height-xs);
+  line-height: var(--navds-font-line-height-s);
  margin: 0;
 }

@@ -92,7 +92,7 @@
 .navds-body--s {
  font-size: var(--navds-font-size-m);
  letter-spacing: 0.002em;
-  line-height: var(--navds-font-line-height-xs);
+  line-height: var(--navds-font-line-height-s);
 }

 .navds-body-long.navds-body--s.navds-typo--spacing {
@@ -107,7 +107,7 @@
 .navds-label {
  font-size: var(--navds-font-size-l);
  letter-spacing: 0;
-  line-height: var(--navds-font-line-height-xs);
+  line-height: var(--navds-font-line-height-s);
  font-weight: var(--navds-font-weight-bold);
  margin: 0;
 }
@@ -119,7 +119,7 @@
 .navds-label--s {
  font-size: var(--navds-font-size-m);
  letter-spacing: 0.002em;
-  line-height: var(--navds-font-line-height-2xs);
+  line-height: var(--navds-font-line-height-s);
 }

 .navds-label--s.navds-typo--spacing {
@@ -130,7 +130,7 @@
 .navds-detail {
  font-size: var(--navds-font-size-s);
  letter-spacing: 0.004em;
-  line-height: var(--navds-font-line-height-2xs);
+  line-height: var(--navds-font-line-height-s);
  font-weight: var(--navds-font-weight-bold);
  margin: 0;
 }
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "0.5.4",
+  "version": "0.6.3",
  "private": false,
  "description": "NAV designsystem react components",
  "author": "NAV Designsystem team",
@@ -1,7 +1,7 @@
-import React, { forwardRef, useEffect, useRef, useState } from "react";
+import React, { forwardRef, useEffect, useState } from "react";
 import cl from "classnames";
 import { UnmountClosed, Collapse } from "react-collapse";
-import { Expand } from "@navikt/ds-icons";
+import { Expand, ExpandFilled } from "@navikt/ds-icons";
 import { v4 as uuidv4 } from "uuid";

 export interface AccordionProps
@@ -37,7 +37,7 @@ export interface AccordionProps
  renderContentWhenClosed?: boolean;
 }

-const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
+const Accordion = forwardRef<HTMLButtonElement, AccordionProps>(
  (
    {
      children,
@@ -50,10 +50,16 @@ const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
    },
    ref
  ) => {
-    const contentId = useRef(uuidv4());
-    const buttonId = useRef(uuidv4());
+    const [contentId, setContentId] = useState("");
+    const [buttonId, setButtonId] = useState("");
    const [internalOpen, setInternalOpen] = useState<boolean>(open);

+    // Forsøk på å fikse Nextjs SSR server/client clock problem
+    useEffect(() => {
+      setContentId(() => uuidv4());
+      setButtonId(() => uuidv4());
+    }, []);
+
    useEffect(() => {
      setInternalOpen(open);
    }, [open]);
@@ -64,17 +70,17 @@ const Accordion = forwardRef<HTMLDivElement, AccordionProps>(

    return (
      <div
-        ref={ref}
        className={cl("navds-accordion", className, {
          "navds-accordion--open": internalOpen,
          "navds-accordion--closed": !internalOpen,
        })}
      >
        <button
-          id={buttonId.current}
+          ref={ref}
+          id={buttonId}
          className="navds-accordion__button"
          aria-expanded={open}
-          aria-controls={contentId.current}
+          aria-controls={contentId}
          onClick={onClick ? onClick : () => setInternalOpen((open) => !open)}
          {...rest}
        >
@@ -87,12 +93,15 @@ const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
              `navds-accordion__chevron--${internalOpen ? "up" : "down"}`
            )}
          />
+          <ExpandFilled
+            className={cl(
+              "navds-accordion__chevron",
+              "navds-accordion__chevron--filled",
+              `navds-accordion__chevron--${internalOpen ? "up" : "down"}`
+            )}
+          />
        </button>
-        <div
-          id={contentId.current}
-          role="region"
-          aria-labelledby={buttonId.current}
-        >
+        <div id={contentId} role="region" aria-labelledby={buttonId}>
          <CollapseComponent isOpened={internalOpen}>
            <div className="navds-accordion__content">{children}</div>
          </CollapseComponent>
@@ -24,7 +24,7 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
   * Reduces padding on component
   * @default "medium"
   */
-  size?: "medium" | "small";
+  size?: "m" | "s";
 }

 const Icon = ({ variant }) => {
@@ -43,7 +43,7 @@ const Icon = ({ variant }) => {
 };

 const Alert = forwardRef<HTMLDivElement, AlertProps>(
-  ({ variant, children, className, size = "medium", ...rest }, ref) => (
+  ({ variant, children, className, size = "m", ...rest }, ref) => (
    <div
      ref={ref}
      className={cl(
@@ -52,7 +52,7 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(
        `navds-alert--${variant}`,
        `navds-alert--${size}`,
        "navds-body-long",
-        "navds-body--s"
+        { "navds-body--s": size === "s" }
      )}
      {...rest}
    >
@@ -25,7 +25,7 @@ export const All = () => {
      <h2>Small</h2>
      <div>
        {variants.map((variant) => (
-          <Alert key={variant} variant={variant} size="small">
+          <Alert key={variant} variant={variant} size="s">
            {Array(8).fill(`${variant} content`).join(" ")}
          </Alert>
        ))}
@@ -19,7 +19,7 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
   * Reduces internal padding for component
   * @default "medium"
   */
-  size?: "medium" | "small";
+  size?: "m" | "s";
  /**
   * Prevent the user from interacting with the button: it cannot be pressed or focused.
   * @default false
@@ -28,7 +28,7 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
 }

 const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ variant = "primary", className, size = "medium", ...rest }, ref) => (
+  ({ variant = "primary", className, size = "m", ...rest }, ref) => (
    <button
      ref={ref}
      className={cl(
@@ -36,7 +36,8 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
        "navds-button",
        `navds-button--${variant}`,
        `navds-button--${size}`,
-        "navds-body-short"
+        "navds-body-short",
+        { "navds-body--s": size === "s" }
      )}
      {...rest}
    />
@@ -52,7 +52,7 @@ export const All = () => {
        {variants.map((variant) => (
          <a
            key={variant}
-            className={`navds-button navds-button--${variant}`}
+            className={`navds-button navds-button--${variant} navds-body-short`}
            href="the-link"
          >
            {variant}
@@ -62,7 +62,7 @@ export const All = () => {
      <h2>Small</h2>
      <Section>
        {variants.map((variant) => (
-          <Button key={variant} variant={variant} size="small">
+          <Button key={variant} variant={variant} size="s">
            {variant}
          </Button>
        ))}
@@ -0,0 +1,34 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+import { OverridableComponent } from "../util";
+
+export interface MicroCardProps {
+  props: {
+    children: string;
+    /**
+     * @ignore
+     */
+    className?: string;
+  } & React.HTMLAttributes<HTMLAnchorElement>;
+  defaultComponent: "a";
+}
+
+export const MicroCard: OverridableComponent<MicroCardProps> = forwardRef(
+  ({ className, component: Component = "a", children, ...rest }, ref) => (
+    <Component
+      ref={ref}
+      className={cl(
+        "navds-card__micro",
+        "navds-detail",
+        "navds-detail--s",
+        className
+      )}
+      title={children}
+      {...rest}
+    >
+      {children}
+    </Component>
+  )
+);
+
+export default MicroCard;
@@ -0,0 +1,2 @@
+export { default as MicroCard } from "./MicroCard";
+export * from "./MicroCard";
@@ -0,0 +1,21 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+
+<Meta title="ds-react/card/intro" />
+
+# Hvordan ta i bruk card
+
+## MicroCard
+
+Kan brukes som en vanlig lenke direkte:
+
+```
+<MicroCard href="/lenke/til/side">Lenketekst</MicroCard>
+```
+
+Hvis man ønsker å ta i bruk nextjs sin `Link`-komponent:
+
+```
+<Link href="/lenke/til/side" passHref>
+  <MicroCard>Lenketekst</MicroCard>
+</Link>
+```
@@ -0,0 +1,16 @@
+import React from "react";
+import { MicroCard } from "../index";
+import { Meta } from "@storybook/react/types-6-0";
+export default {
+  title: "ds-react/card",
+  component: MicroCard,
+} as Meta;
+
+export const All = () => {
+  return (
+    <div>
+      <h2>MicroCard</h2>
+      <MicroCard href="#">Sit laborum aliqua.</MicroCard>
+    </div>
+  );
+};
@@ -0,0 +1,73 @@
+import React, { forwardRef, HTMLAttributes } from "react";
+import cl from "classnames";
+
+export interface HeaderProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Header title
+   */
+  children: string;
+  /**
+   * @ignore
+   */
+  className?: string;
+  /**
+   * Pictogram placed in header
+   */
+  illustration?: React.ReactNode;
+  /**
+   * Short text placed under title
+   */
+  description?: string;
+  /**
+   * Decides how to align content
+   * @default "left"
+   */
+  variant?: "left" | "center";
+  /**
+   * Predefined theming for header
+   * @default "guide"
+   */
+  theme?: "situation" | "product" | "guide";
+}
+
+const Header = forwardRef<HTMLDivElement, HeaderProps>(
+  (
+    {
+      children,
+      className,
+      illustration,
+      description,
+      theme = "guide",
+      variant = "left",
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cl(
+          "navds-header",
+          className,
+          `navds-header--${theme}`,
+          `navds-header--${variant}`
+        )}
+        {...rest}
+      >
+        {illustration && (
+          <div className="navds-header__illustration">{illustration}</div>
+        )}
+        <div className="navds-header__wrapper">
+          <h1 className="navds-header__title navds-title navds-title--2xl">
+            {children}
+          </h1>
+          {description && (
+            <p className="navds-body-short navds-body--s">{description}</p>
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+
+export default Header;
@@ -0,0 +1,2 @@
+export { default as Header } from "./Header";
+export * from "./Header";
@@ -0,0 +1,74 @@
+import React from "react";
+import { Header } from "../index";
+import { Meta } from "@storybook/react/types-6-0";
+export default {
+  title: "ds-react/header",
+  component: Header,
+} as Meta;
+
+export const All = () => {
+  return (
+    <div>
+      <h2>Header</h2>
+      <Header description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE.">
+        AUTE OFFICIA SINT SUNT FUGIAT
+      </Header>
+      <br />
+      <h2>Header m/illustration</h2>
+      <Header
+        illustration={illustrationPictogram}
+        description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
+      >
+        AUTE OFFICIA SINT SUNT FUGIAT
+      </Header>
+      <h2>Header center</h2>
+      <Header
+        description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
+        variant="center"
+      >
+        AUTE OFFICIA SINT SUNT FUGIAT
+      </Header>
+      <h2>Header center m/illustration</h2>
+      <Header
+        illustration={illustrationPictogram}
+        description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
+        variant="center"
+      >
+        AUTE OFFICIA SINT SUNT FUGIAT
+      </Header>
+      <h2>Header variants</h2>
+      <Header
+        description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
+        theme="guide"
+      >
+        AUTE OFFICIA SINT SUNT FUGIAT
+      </Header>
+      <Header
+        description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
+        theme="product"
+      >
+        AUTE OFFICIA SINT SUNT FUGIAT
+      </Header>
+      <Header
+        description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
+        theme="situation"
+      >
+        AUTE OFFICIA SINT SUNT FUGIAT
+      </Header>
+    </div>
+  );
+};
+
+/* prettier-ignore */
+const illustrationPictogram = <svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M37.6697 60.6469L9 31.9772L30.9772 10L59.6469 38.6697L72.1116 26.205L81 82L25.205 73.1116L37.6697 60.6469Z" fill="#FFECCC"/>
+<path d="M94.5 64.0584C94.5 72.104 88.003 78.6169 80 78.6169C71.997 78.6169 65.5 72.104 65.5 64.0584C65.5 56.0129 71.997 49.5 80 49.5C88.003 49.5 94.5 56.0129 94.5 64.0584Z" stroke="#262626" stroke-width="3"/>
+<path d="M91.9999 95.9999V95.9999C91.9999 89.3725 86.6274 83.9561 79.9999 83.9561V83.9561C73.3725 83.9561 67.9999 89.3725 67.9999 95.9999V95.9999" stroke="#262626" stroke-width="3"/>
+<ellipse cx="76.0001" cy="63.5566" rx="2" ry="2.00731" fill="#262626"/>
+<ellipse cx="84" cy="63.5566" rx="2" ry="2.00731" fill="#262626"/>
+<path d="M29 29.488V30C29 25.0515 25.866 22 22 22C18.134 22 15 25.0515 15 30V29.488" stroke="#262626" stroke-width="3"/>
+<circle cx="22" cy="15" r="5.5" stroke="#262626" stroke-width="3"/>
+<rect x="1.5" y="1.5" width="41" height="56" stroke="#262626" stroke-width="3"/>
+<path d="M10 37H27" stroke="#262626" stroke-width="3"/>
+<path d="M10 47H18.5" stroke="#262626" stroke-width="3"/>
+</svg>
@@ -25,6 +25,7 @@ export {
  InternalHeaderUser,
  InternalHeaderUserProps,
 } from "./internal-header/index";
+export { Header, HeaderProps } from "./header/index";
 export {
  ProductPageLayout,
  ProductPagePanel,
@@ -36,6 +37,7 @@ export { Popover, PopoverProps } from "./popover/index";
 export { Tag, TagProps } from "./tag/index";
 export { LinkPanel, LinkPanelProps, LinkPanelTitle } from "./link-panel/index";
 export { Panel, PanelProps } from "./panel/index";
+export { MicroCard, MicroCardProps } from "./card/index";
 export {
  Title,
  Ingress,
@@ -14,7 +14,11 @@ export interface InternalHeaderProps extends HTMLAttributes<HTMLElement> {

 const InternalHeader = forwardRef<HTMLElement, InternalHeaderProps>(
  ({ children, className, ...rest }, ref) => (
-    <header ref={ref} className={cl("navds-header", className)} {...rest}>
+    <header
+      ref={ref}
+      className={cl("navds-interal-header", className)}
+      {...rest}
+    >
      {children}
    </header>
  )
@@ -22,7 +22,7 @@ const InternalHeaderTitle = forwardRef<HTMLElement, InternalHeaderTitleProps>(
    createElement(element, {
      ...rest,
      ref,
-      className: cl("navds-header__title", "navds-label", className),
+      className: cl("navds-interal-header__title", "navds-label", className),
      children: <span>{children}</span>,
    })
 );
@@ -19,8 +19,12 @@ export interface InternalHeaderUserProps

 const InternalHeaderUser = forwardRef<HTMLDivElement, InternalHeaderUserProps>(
  ({ className, name, ident, ...rest }, ref) => (
-    <div ref={ref} className={cl("navds-header__user", className)} {...rest}>
-      <span className="navds-header__name navds-body-short navds-body--s">
+    <div
+      ref={ref}
+      className={cl("navds-interal-header__user", className)}
+      {...rest}
+    >
+      <span className="navds-interal-header__name navds-body-short navds-body--s">
        {name}
      </span>
      <span className="navds-detail navds-detail--s">{ident}</span>
@@ -80,7 +80,7 @@ const Modal: ModalLifecycle &
          className={cl("navds-modal__button", {
            "navds-modal__button--shake": shouldCloseOnOverlayClick,
          })}
-          size="small"
+          size="s"
          variant="secondary"
          ref={buttonRef}
          aria-label="lukk modalvindu"
@@ -7,7 +7,7 @@ export interface TitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
    /**
     * Heading level
     */
-    level: 1 | 2 | 3 | 4 | 5;
+    level: 1 | 2 | 3 | 4 | 5 | "1" | "2" | "3" | "4" | "5";
    /**
     * Sizes from largest "2xl" to smallest "s"
     */
@@ -0,0 +1,39 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+
+<Meta title="ds-react/Typography/intro" />
+
+# Hvordan ta i bruk typografien
+
+Typografien kan tas i bruk som React komponenter eller ved å ta i bruk css-stilene.
+Se eksemplene under ds-react tabben her i storybook for å se hvordan man tar i bruk både react og stilpakken for dette oppsettet.
+
+Oppsettet er forbedret med blandt annet letter-spacing og line-height.
+I tillegg kan man nå sette `spacing` proppen og man får da automatisk margin-bottom på typo-elementet.
+Da kan man lett sikre riktig spacing mellom tekst i en artikkel.
+
+Font-size er skrevet med REM, men basert på 16px root font size.
+Dette vil si at de som har forstørret font-size på root vil ende opp med større font enn forventet.
+For de som har satt root font size til 18px (1.125rem) kan da "fikse" dette ved å endre tilbake til 16px,
+da det nye typo-oppsettet fikser større font, eller man ta i bruk css-en under.
+
+Denne stylingen vil overskrive default variablene og tilpasse font-size.
+
+```css
+/* autogenerated fix for 18px root-font-size*/
+:root {
+  --navds-font-size-title-2xl: 2.2222222222222223rem;
+  --navds-font-size-title-xl: 1.7777777777777777rem;
+  --navds-font-size-title-l: 1.5555555555555556rem;
+  --navds-font-size-title-m: 1.3333333333333333rem;
+  --navds-font-size-title-s: 1.1111111111111112rem;
+  --navds-font-size-xl: 1.1111111111111112rem;
+  --navds-font-size-l: 1rem;
+  --navds-font-size-m: 0.8888888888888888rem;
+  --navds-font-size-s: 0.7777777777777778rem;
+}
+```
+
+Vi anbefaler å før eller siden endre tilbake til default root font size da designsystemet sine nye
+komponenter og design-tokens er basert på dette. Endringen til 18px root font size var i grunn for å teste en løsning for å
+forstørre font, noe som er fikset ved nye typo-løsningen. Vi vil derfor unngå å måtte ha midlertidge patcher/fikser
+for å tilpasse systemet for alle de forskjellige variantene av font size på root.
@@ -7,73 +7,64 @@ export default {
  component: BodyLong,
 };

-export const TypoMedSpacing = () => <TypoMal spacing={true} />;
-export const TypoUtenSpacing = () => <TypoMal spacing={false} />;
+const lorem = () => (
+  <>
+    Veniam consequat cillum pariatur officia duis aute labore anim labore.
+    Pariatur ad duis do nulla.
+  </>
+);

-const TypoMal = ({ ...rest }) => {
-  const lorem = (text) => (
-    <>
-      {text} <br /> Veniam consequat cillum pariatur officia duis aute labore
-      anim labore. Pariatur ad duis do nulla.
-    </>
-  );
-  return (
-    <div
-      className="typo-story"
-      style={{
-        display: "flex",
-        flexDirection: "column",
-      }}
-    >
-      <div>
-        <Title {...rest} level={1} size="2xl">
-          {lorem("Title 2xl")}
-        </Title>
-        <Title {...rest} level={2} size="xl">
-          {lorem("Title xl")}
-        </Title>
-        <Title {...rest} level={3} size="l">
-          {lorem("Title l")}
-        </Title>
-        <Title {...rest} level={4} size="m">
-          {lorem("Title m")}
-        </Title>
-        <Title {...rest} level={5} size="s">
-          {lorem("Title s")}
-        </Title>
-      </div>
-      <div>
-        <Ingress {...rest}>{lorem("Ingress")}</Ingress>
-      </div>
-      <div>
-        <BodyLong {...rest}>{lorem("BodyLong")}</BodyLong>
-        <BodyLong {...rest} size="s">
-          {lorem("BodyLong small")}
-        </BodyLong>
-      </div>
-      <div>
-        <BodyShort component="span" {...rest} {...rest}>
-          {lorem("BodyShort")}
-        </BodyShort>
-        <BodyShort {...rest} size="s">
-          {lorem("BodyShort small")}
-        </BodyShort>
-      </div>
-      <div>
-        <Label {...rest}>{lorem("Label")}</Label>
-        <Label {...rest} size="s">
-          {lorem("Label small")}
-        </Label>
-      </div>
-      <div>
-        <Detail {...rest}>{lorem("Detail")}</Detail>
-        <Detail {...rest} size="s">
-          {lorem("Detail small")}
-        </Detail>
-      </div>
-    </div>
-  );
-};
+const TitleTemplate = ({ level, size, spacing }) => (
+  <Title spacing={spacing} size={size} level={level}>
+    {lorem()}
+  </Title>
+);
+
+export const TitleStory = TitleTemplate.bind({});
+TitleStory.args = { level: 1, size: "2xl", spacing: false };
+
+const IngressTemplate = ({ spacing }) => (
+  <Ingress spacing={spacing}>{lorem()}</Ingress>
+);
+
+export const IngressStory = IngressTemplate.bind({});
+IngressStory.args = { spacing: false };
+
+const BodyLongTemplate = ({ spacing, size }) => (
+  <BodyLong size={size} spacing={spacing}>
+    {lorem()}
+  </BodyLong>
+);
+
+export const BodyLongStory = BodyLongTemplate.bind({});
+BodyLongStory.args = { spacing: false, size: "m" };
+
+const BodyShortTemplate = ({ spacing, size }) => (
+  <BodyShort size={size} spacing={spacing}>
+    {lorem()}
+  </BodyShort>
+);
+
+export const BodyShortStory = BodyShortTemplate.bind({});
+BodyShortStory.args = { spacing: false, size: "m" };
+
+const LabelTemplate = ({ spacing, size }) => (
+  <Label size={size} spacing={spacing}>
+    {lorem()}
+  </Label>
+);
+
+export const LabelStory = LabelTemplate.bind({});
+LabelStory.args = { spacing: false, size: "m" };
+
+const DetailTemplate = ({ spacing, size }) => (
+  <Detail size={size} spacing={spacing}>
+    {lorem()}
+  </Detail>
+);
+
+export const DetailStory = DetailTemplate.bind({});
+DetailStory.args = { spacing: false, size: "m" };

 export const SideInnholdEksempel = () => {
  return (
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "0.3.2",
+  "version": "0.4.3",
  "private": false,
  "description": "Auto-generated design-tokens for NAV design-systems framework",
  "author": "NAV Designsystem team",
@@ -68,12 +68,12 @@ module.exports = {
      disabled: { value: "{navds.color.gray.40.value}" },
      action: {
        default: { value: "{navds.color.blue.50.value}" },
-        hover: { value: Color(baseColors.blue).lighten(0.1) },
+        hover: { value: "{navds.color.blue.60.value}" },
        active: { value: "{navds.color.deepblue.50.value}" },
      },
      danger: {
        default: { value: "{navds.color.red.50.value}" },
-        hover: { value: Color(baseColors.red).lighten(0.1) },
+        hover: { value: "{navds.color.red.60.value}" },
        active: { value: "{navds.color.red.70.value}" },
      },
      error: {
@@ -95,7 +95,7 @@ module.exports = {
      border: { value: "{navds.color.gray.40.value}" },
      background: { value: "{navds.color.white.value}" },
      text: {
-        primary: { value: "{navds.color.gray.90}" },
+        primary: { value: "{navds.color.gray.90.value}" },
        inverse: { value: "{navds.color.white.value}" },
        disabled: { value: "{navds.color.gray.60.value}" },
        link: { value: "{navds.color.blue.50.value}" },
@@ -139,13 +139,8 @@ module.exports = {
      family: { value: '"Source Sans Pro", Arial, sans-serif' },
      line: {
        height: {
-          "2xl": { value: getFontSize(52) },
-          xl: { value: getFontSize(40) },
-          l: { value: getFontSize(36) },
-          m: { value: getFontSize(32) },
-          s: { value: getFontSize(28) },
-          xs: { value: getFontSize(24) },
-          "2xs": { value: getFontSize(20) },
+          m: { value: 1.5 },
+          s: { value: 1.3 },
        },
      },
      size: {
@@ -11,7 +11,7 @@
      <a href="https://github.com/navikt/nav-frontend-moduler/pulls">
          <img src="https://img.shields.io/badge/PRs-welcome-green.svg" />
      </a>
-                  <img src="https://github.com/navikt/nav-frontend-moduler/workflows/Build,%20test%20and%20maybe%20publish/badge.svg" />
+         <img src="https://github.com/navikt/nav-frontend-moduler/workflows/Build,%20test%20and%20maybe%20publish/badge.svg" />
    </p>
    <h4><a href="https://design.nav.no">Nettside</a> | <a href="https://github.com/navikt/nav-frontend-moduler/blob/master/CONTRIBUTING.md">Bidra</a> | <a href="https://github.com/navikt/nav-frontend-moduler/issues">Bug-rapport</a>
 </div>
@@ -220,7 +220,7 @@ const IconPage = () => {
            onClick={() => setListView(0)}
            variant={!listView ? "primary" : "secondary"}
            aria-label="Vis ikoner med kategorier"
-            size="small"
+            size="s"
            className="iconPage__viewSelectButton"
          >
            <List />
@@ -229,7 +229,7 @@ const IconPage = () => {
            onClick={() => setListView(1)}
            variant={!listView ? "secondary" : "primary"}
            aria-label="Vis ikoner uten kategorier"
-            size="small"
+            size="s"
            className="iconPage__viewSelectButton"
          >
            <System />
@@ -257,7 +257,7 @@ const IconPage = () => {
                <p className="iconPage__modalTitle navds-label">Last ned</p>
                <div className="iconPage__modalButton--wrapper">
                  <Button
-                    size="small"
+                    size="s"
                    variant="action"
                    onClick={() => downloadSvg()}
                    className="iconPage__modalButton"
@@ -267,7 +267,7 @@ const IconPage = () => {
                    SVG
                  </Button>
                  <Button
-                    size="small"
+                    size="s"
                    variant="action"
                    onClick={() => downloadPng()}
                    className="iconPage__modalButton"
@@ -38,7 +38,8 @@
    "@navikt/ds-css/*",
    "@navikt/ds-react",
    "@navikt/ds-icons",
-    "@navikt/ds-tokens"
+    "@navikt/ds-tokens",
+    "utilities/build/from-git-fix"
  ],
  "prettier": {},
  "eslintConfig": {
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-ikonknapper",
-  "version": "2.0.1",
+  "version": "2.0.2",
  "main": "lib/index.js",
  "types": "lib/index.d.ts",
  "license": "MIT",
@@ -25,7 +25,7 @@
  "devDependencies": {
    "nav-frontend-chevron": "^1.0.30",
    "nav-frontend-ikoner-assets": "^3.0.1",
-    "nav-frontend-knapper": "^3.0.1",
+    "nav-frontend-knapper": "^3.0.2",
    "react": "^16.8.0 || ^17.0.0"
  }
 }
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-knapper-style",
-  "version": "2.0.1",
+  "version": "2.0.2",
  "main": "src/index.less",
  "license": "MIT",
  "files": [
@@ -12,11 +12,11 @@
 }

 .knapp--hoved {
-  .knappfylt-mixin(@navBla, @white, @navDypBla, lighten(@navBla, 5%));
+  .knappefylt-cta-mixin(@navBla, @navBlaDarken20, @navDypBla);
 }

 .knapp--fare {
-  .knappfylt-mixin(@redError, @white, darken(@redError, 5%), lighten(@redError, 5%));
+  .knappefylt-cta-mixin(@redError, @redErrorDarken20, @redErrorDarken40);
 }

 .knapp--flat {
@@ -64,6 +64,44 @@
  }
 }

+.knappefylt-cta-mixin(@bgColor, @hoverColor, @activeColor) {
+  color: white;
+  border-color: @bgColor;
+  background-color: @bgColor;
+  position: relative;
+  border-width: 1px;
+
+  &:hover {
+    background-color: @hoverColor;
+    border-color: @hoverColor;
+  }
+
+  &:hover&:focus {
+    background-color: @hoverColor;
+    border-color: @hoverColor;
+    border-color: white;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: white;
+    box-shadow: 0 0 0 3px @fokusFarge;
+  }
+
+  &:active {
+    background-color: @activeColor;
+    border-color: transparent;
+    border-color: white;
+  }
+
+  &:hover&:focus&:active {
+    background-color: @activeColor;
+    border-color: @activeColor;
+    border-color: white;
+  }
+}
+
+/* Beholdes i kode for å unngå breaking change */
 .knappfylt-mixin(@bgColor, @textColor, @activeColor, @highlighColor) {
  .knapptaktil-mixin();

@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-knapper",
-  "version": "3.0.1",
+  "version": "3.0.2",
  "main": "lib/index.js",
  "types": "lib/index.d.ts",
  "license": "MIT",
@@ -28,7 +28,7 @@
    "@types/react": "15.0.23 || ^16.0.0",
    "classnames": "^2.2.5",
    "nav-frontend-js-utils": "^1.0.19",
-    "nav-frontend-knapper-style": "^2.0.1",
+    "nav-frontend-knapper-style": "^2.0.2",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0"
  },
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-tabell-style",
-  "version": "2.0.1",
+  "version": "2.0.2",
  "main": "src/index.less",
  "license": "MIT",
  "files": [
@@ -21,7 +21,7 @@
  },
  "devDependencies": {
    "nav-frontend-core": "^6.0.1",
-    "nav-frontend-knapper-style": "^2.0.1",
+    "nav-frontend-knapper-style": "^2.0.2",
    "nav-frontend-typografi-style": "^2.0.1"
  }
 }
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-toggle-style",
-  "version": "2.0.1",
+  "version": "2.0.2",
  "main": "src/toggle-style.less",
  "license": "MIT",
  "files": [
@@ -17,7 +17,7 @@
  },
  "devDependencies": {
    "nav-frontend-core": "^6.0.1",
-    "nav-frontend-knapper-style": "^2.0.1",
+    "nav-frontend-knapper-style": "^2.0.2",
    "nav-frontend-typografi-style": "^2.0.1"
  }
 }
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-toggle",
-  "version": "2.0.1",
+  "version": "2.0.2",
  "main": "lib/index.js",
  "types": "lib/index.d.ts",
  "license": "MIT",
@@ -22,7 +22,7 @@
  "devDependencies": {
    "classnames": "^2.2.5",
    "nav-frontend-js-utils": "^1.0.19",
-    "nav-frontend-toggle-style": "^2.0.1",
+    "nav-frontend-toggle-style": "^2.0.2",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0"
  }
@@ -14,6 +14,22 @@ import {
  Undertekst,
  UndertekstBold,
 } from "./../";
+import Lenkepanel from "nav-frontend-lenkepanel";
+
+## Nytt typografi-oppsett (beta)
+
+Vi har nå en ny og forbedret typografi-løsning for både react og css i beta. Vi anbefaler
+alle å ta en titt på dette og ta den i bruk hvis ønskelig.
+
+For nå kan man finne dokumentasjon om hvordan man tar denne i bruk her:
+
+<Lenkepanel
+  href="https://navikt.github.io/Designsystemet/?path=/story/ds-react-typography-intro--page"
+  className="resource-link"
+  border
+>
+  Typografi storybook
+</Lenkepanel>

 ## Bruk av Typografi i prosjekter

@@ -0,0 +1,13 @@
+{
+  "plugins": ["transform-object-rest-spread"],
+  "presets": [
+    [
+      "env",
+      {
+        "targets": {
+          "node": 6
+        }
+      }
+    ]
+  ]
+}
@@ -0,0 +1,81 @@
+# gatsby-source-github
+
+Source plugin for pulling data into Gatsby from Github repositories.
+Works with gatsby-transform-remark if you like to pull markdown files from your repository.
+
+## Supports
+
+- Pulling trees / files from Github repositories
+- Pulling release information from Github repositories
+
+## How to use
+
+### NPM package
+
+This package is available on npm as "@mosch/gatsby-source-github".
+
+`yarn add @mosch/gatsby-source-github`
+
+### Gatsby Configuration
+
+```javascript
+// In your gatsby-config.js
+module.exports = {
+  plugins: [
+    {
+      resolve: `@mosch/gatsby-source-github`,
+      options: {
+        repository: "YOUR_REPOSITORY",
+        tree: true,
+        releases: true,
+        user: "YOUR_USER",
+        secrets: {
+          token: "YOUR_API_TOKEN",
+        },
+      },
+    },
+  ],
+};
+```
+
+### Plugin options
+
+- **tree**: Pulls in the Github tree (all files) as GithubFiles _(default false)_
+- **releases**: Pulls in the Github releases as GithubReleases _(default false)_
+
+### How to query Files using GraphQL
+
+A a sample query for fetching all File nodes.
+
+```graphql
+query GithubFileQuery {
+  allGithubFile {
+    edges {
+      node {
+        repository
+        user
+        path
+      }
+    }
+  }
+}
+```
+
+### How to query Releases using GraphQL
+
+A a sample query for fetching all Release nodes.
+
+```graphql
+query GithubReleasesQuery {
+  allGithubReleases {
+    edges {
+      node {
+        user
+        repository
+        version
+        description
+      }
+    }
+  }
+}
+```
@@ -0,0 +1,165 @@
+var _extends =
+  Object.assign ||
+  function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+
+function _asyncToGenerator(fn) {
+  return function () {
+    var gen = fn.apply(this, arguments);
+    return new Promise(function (resolve, reject) {
+      function step(key, arg) {
+        try {
+          var info = gen[key](arg);
+          var value = info.value;
+        } catch (error) {
+          reject(error);
+          return;
+        }
+        if (info.done) {
+          resolve(value);
+        } else {
+          return Promise.resolve(value).then(
+            function (value) {
+              step("next", value);
+            },
+            function (err) {
+              step("throw", err);
+            }
+          );
+        }
+      }
+      return step("next");
+    });
+  };
+}
+
+const Octokat = require("octokat");
+const crypto = require("crypto");
+const fileType = require("file-type");
+const mime = require("mime-types");
+const path = require("path");
+const minimatch = require("minimatch");
+
+exports.sourceNodes = (() => {
+  var _ref = _asyncToGenerator(function* (
+    { boundActionCreators },
+    { user, repository, tree = false, releases = false, branch, secrets = {} }
+  ) {
+    if (!user || !repository) {
+      throw new Error(
+        "You need to define user & repository for gatsby-source-github to work"
+      );
+    }
+
+    const octo = new Octokat(secrets);
+    const createNode = boundActionCreators.createNode;
+
+    console.time(`fetch Github data`);
+    secrets.token && console.log("Using Github Token");
+    console.log(
+      `starting to fetch data from the Github API. Warning: This may take a long time.`
+    );
+
+    const repo = octo.repos(user, repository);
+
+    if (tree) {
+      const patternFilter = function patternFilter(file) {
+        return minimatch(file.path, (tree && tree.pattern) || "**");
+      };
+      const data = yield repo.git
+        .trees(branch ? branch : "HEAD")
+        .fetch({ recursive: 1 });
+
+      const files = yield Promise.all(
+        data.tree
+          .filter(function (file) {
+            return file.type !== "tree";
+          })
+          .filter(patternFilter)
+          .map(function (file) {
+            return octo
+              .fromUrl(file.url)
+              .fetch()
+              .then(function (result) {
+                const buffer = Buffer.from(result.content, "base64");
+                const type = fileType(buffer);
+                const mimeType = type
+                  ? type.mime
+                  : mime.lookup(file.path) || "plaintext";
+
+                return {
+                  user: user,
+                  repository: repository,
+                  path: file.path,
+                  fileAbsolutePath: file.url,
+                  relativePath: file.path,
+                  base: path.basename(file.path),
+                  relativeDirectory: path.dirname(file.path),
+                  url: file.url,
+                  type: file.type,
+                  mime: mimeType,
+                  sha: file.sha,
+                  content: buffer.toString("utf8"),
+                };
+              });
+          })
+      );
+
+      files.forEach(function (file) {
+        return createNode(
+          _extends({}, file, {
+            id: file.url,
+            parent: `__SOURCE__`,
+            children: [],
+            internal: {
+              mediaType: file.mime,
+              type: "GithubFile",
+              contentDigest: crypto
+                .createHash(`md5`)
+                .update(file.content)
+                .digest(`hex`),
+            },
+          })
+        );
+      });
+    }
+
+    if (releases) {
+      const data = yield repo.releases.fetch();
+
+      data.items.forEach(function (item) {
+        createNode(
+          _extends({}, item, {
+            id: item.url,
+            parent: null,
+            children: [],
+            internal: {
+              type: "GithubRelease",
+              contentDigest: crypto
+                .createHash(`md5`)
+                .update(JSON.stringify(item))
+                .digest(`hex`),
+            },
+          })
+        );
+      });
+    }
+
+    console.timeEnd(`fetch Github data`);
+
+    return;
+  });
+
+  return function (_x, _x2) {
+    return _ref.apply(this, arguments);
+  };
+})();
@@ -0,0 +1 @@
+exports.loadNodeContent = (node) => Promise.resolve(node.content);
@@ -0,0 +1,26 @@
+{
+  "name": "from-git-fix",
+  "private": true,
+  "version": "0.5.0",
+  "homepage": "https://github.com/mosch/gatsby-source-github",
+  "scripts": {
+    "build": "babel src --out-dir .",
+    "watch": "babel src --watch --out-dir ."
+  },
+  "keywords": [
+    "gatsby",
+    "gatsby-plugin",
+    "gatsby-source-plugin"
+  ],
+  "dependencies": {
+    "file-type": "^7.2.0",
+    "mime-types": "^2.1.17",
+    "minimatch": "^3.0.4",
+    "octokat": "^0.9.2"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-preset-env": "^1.6.0"
+  }
+}
@@ -0,0 +1,3 @@
+{
+  "extends": ["config:base"]
+}
@@ -0,0 +1,108 @@
+const Octokat = require("octokat");
+const crypto = require("crypto");
+const fileType = require("file-type");
+const mime = require("mime-types");
+const path = require("path");
+const minimatch = require("minimatch");
+
+exports.sourceNodes = async (
+  { boundActionCreators },
+  { user, repository, tree = false, releases = false, secrets = {} }
+) => {
+  if (!user || !repository) {
+    throw new Error(
+      "You need to define user & repository for gatsby-source-github to work"
+    );
+  }
+
+  const octo = new Octokat(secrets);
+  const { createNode } = boundActionCreators;
+
+  console.time(`fetch Github data`);
+  secrets.token && console.log("Using Github Token");
+  console.log(
+    `starting to fetch data from the Github API. Warning: This may take a long time.`
+  );
+
+  const repo = octo.repos(user, repository);
+
+  if (tree) {
+    const patternFilter = (file) =>
+      minimatch(file.path, (tree && tree.pattern) || "**");
+    const data = await repo.git.trees("HEAD").fetch({ recursive: 1 });
+
+    const files = await Promise.all(
+      data.tree
+        .filter((file) => file.type !== "tree")
+        .filter(patternFilter)
+        .map((file) => {
+          return octo
+            .fromUrl(file.url)
+            .fetch()
+            .then((result) => {
+              const buffer = Buffer.from(result.content, "base64");
+              const type = fileType(buffer);
+              const mimeType = type
+                ? type.mime
+                : mime.lookup(file.path) || "plaintext";
+
+              return {
+                user: user,
+                repository: repository,
+                path: file.path,
+                fileAbsolutePath: file.url,
+                relativePath: file.path,
+                base: path.basename(file.path),
+                relativeDirectory: path.dirname(file.path),
+                url: file.url,
+                type: file.type,
+                mime: mimeType,
+                sha: file.sha,
+                content: buffer.toString("utf8"),
+              };
+            });
+        })
+    );
+
+    files.forEach((file) =>
+      createNode({
+        ...file,
+        id: file.url,
+        parent: `__SOURCE__`,
+        children: [],
+        internal: {
+          mediaType: file.mime,
+          type: "GithubFile",
+          contentDigest: crypto
+            .createHash(`md5`)
+            .update(file.content)
+            .digest(`hex`),
+        },
+      })
+    );
+  }
+
+  if (releases) {
+    const data = await repo.releases.fetch();
+
+    data.items.forEach((item) => {
+      createNode({
+        ...item,
+        id: item.url,
+        parent: null,
+        children: [],
+        internal: {
+          type: "GithubRelease",
+          contentDigest: crypto
+            .createHash(`md5`)
+            .update(JSON.stringify(item))
+            .digest(`hex`),
+        },
+      });
+    });
+  }
+
+  console.timeEnd(`fetch Github data`);
+
+  return;
+};
@@ -1,11 +1,16 @@
+require("dotenv").config({
+  path: ".env",
+});
+
 module.exports = {
  siteMetadata: {
-    title: `Designsystemet NAV`,
+    title: `Verktøykassen NAV`,
    description: ``,
    author: `@navikt`,
    siteUrl: "https://design.nav.no/",
  },
  plugins: [
+    `gatsby-plugin-client-side-redirect`,
    "gatsby-plugin-robots-txt",
    `gatsby-plugin-sitemap`,
    `gatsby-plugin-react-helmet`,
@@ -28,17 +33,6 @@ module.exports = {
        ],
      },
    },
-    {
-      resolve: `gatsby-plugin-manifest`,
-      options: {
-        name: `NAV Designsystem`,
-        short_name: `NAV DS`,
-        start_url: `/`,
-        background_color: `#fff`,
-        theme_color: `#fff`,
-        icon: `src/components/assets/images/favicon.png`,
-      },
-    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
@@ -102,23 +96,32 @@ module.exports = {
      },
    },
    {
-      resolve: `gatsby-plugin-amplitude-analytics`,
+      resolve: `from-git-fix`,
      options: {
-        apiKey: "default",
-        respectDNT: true,
-        eventTypes: {
-          pageView: "sidevisning",
-        },
-        amplitudeConfig: {
-          apiEndpoint: "amplitude.nav.no/collect-auto",
-          saveEvents: false,
-          includeUtm: true,
-          includeReferrer: true,
-          platform: "https://design.nav.no/",
+        repository: "verktoykasse-innhold",
+        tree: true,
+        releases: false,
+        user: "navikt",
+        branch: process.env.BRANCH,
+        secrets: {
+          token: process.env.ACCESS_TOKEN,
        },
      },
    },
-
+    {
+      resolve: `gatsby-plugin-manifest`,
+      options: {
+        name: `NAV Designsystem`,
+        short_name: `NAV DS`,
+        start_url: `/`,
+        background_color: `#fff`,
+        theme_color: `#fff`,
+        icon: `src/components/assets/images/favicon.png`,
+      },
+    },
+    {
+      resolve: `gatsby-transformer-remark`,
+    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
@@ -1,4 +1,7 @@
+const path = require(`path`);
+const redirects = require("./redirects");
 let packages = {};
+const dsUrl = "/designsystem";

 const getDependencyEdgesFromPackages = () =>
  Object.keys(packages)
@@ -76,10 +79,13 @@ exports.onCreatePage = ({ page, actions }) => {
    deletePage(page);
  };
  if (compOverview !== null) {
-    makePage(`/components/${compOverview[2].toLowerCase()}`, compOverview[2]);
+    makePage(
+      `${dsUrl}/components/${compOverview[2].toLowerCase()}`,
+      compOverview[2]
+    );

    makePage(
-      `/components/${compOverview[2].toLowerCase()}/overview`,
+      `${dsUrl}/components/${compOverview[2].toLowerCase()}/overview`,
      "Oversikt",
      0
    );
@@ -91,7 +97,7 @@ exports.onCreatePage = ({ page, actions }) => {
    scan(`nav-frontend-${source}`);

    createPage({
-      path: `/components/${compOverview[2].toLowerCase()}/technical`,
+      path: `${dsUrl}/components/${compOverview[2].toLowerCase()}/technical`,
      context: {
        frontmatter: { title: "Teknisk", rank: 1 },
        source: page.path,
@@ -112,7 +118,7 @@ exports.onCreatePage = ({ page, actions }) => {
  }
  if (compAcce !== null) {
    makePage(
-      `/components/${compAcce[2].toLowerCase()}/accessibility`,
+      `${dsUrl}/components/${compAcce[2].toLowerCase()}/accessibility`,
      "Tilgjengelighet",
      2
    );
@@ -120,9 +126,75 @@ exports.onCreatePage = ({ page, actions }) => {

  if (compIngress !== null) {
    makePage(
-      `/components/${compIngress[2].toLowerCase()}/ingress`,
+      `${dsUrl}/components/${compIngress[2].toLowerCase()}/ingress`,
      "Ingress",
      3
    );
  }
 };
+
+exports.createPages = async ({ graphql, actions, reporter }) => {
+  const { createPage, createRedirect } = actions;
+
+  redirects.forEach((path) => {
+    createRedirect({
+      fromPath: `${path}`,
+      toPath: `/designsystem${path}`,
+      isPermanent: true,
+    });
+  });
+
+  const result = await graphql(`
+    {
+      allGithubFile(filter: { relativeDirectory: { nin: "." } }) {
+        edges {
+          node {
+            base
+            path
+            relativeDirectory
+            childMdx {
+              tableOfContents(maxDepth: 3)
+              excerpt
+            }
+            childMarkdownRemark {
+              htmlAst
+              frontmatter {
+                title
+              }
+            }
+          }
+        }
+      }
+    }
+  `);
+  result.data.allGithubFile.edges
+    .filter(({ node }) => node.path.endsWith(".md"))
+    .forEach(({ node }) => {
+      const parsedPath = `/${node.path.replace(".md", "").replace(" ", "-")}`
+        .toLowerCase()
+        .replace("readme", "");
+      console.log(parsedPath);
+
+      createPage({
+        path: parsedPath,
+        component: path.resolve(
+          `./src/components/layout/templates/verktoykasseArticle.jsx`
+        ),
+        context: {
+          parentDir: node.relativeDirectory,
+          htmlAst: node.childMarkdownRemark.htmlAst,
+          frontmatter: {
+            ...node.childMarkdownRemark.frontmatter,
+            ingress: node.childMdx?.excerpt || null,
+          },
+          toc: node.childMdx?.tableOfContents || null,
+        },
+      });
+    });
+};
+
+exports.onPostBuild = ({ store, reporter }) => {
+  const { redirects } = store.getState();
+  reporter.info("Finished building site, here are all the redirects: ");
+  console.log(redirects);
+};
@@ -28,7 +28,7 @@
    "gatsby-remark-autolink-headers": "^2.3.15",
    "gatsby-remark-prismjs": "^3.5.16",
    "gatsby-source-filesystem": "^2.3.31",
-    "gatsby-transformer-remark": "^2.8.38",
+    "gatsby-transformer-remark": "^2.8.28",
    "gatsby-transformer-sharp": "^2.5.16",
    "mdx-utils": "^0.2.0",
    "object-path-immutable": "^4.1.0",
@@ -45,7 +45,17 @@
    "rehype-toc": "^3.0.2",
    "@navikt/ds-css": "*",
    "@navikt/ds-react": "*",
-    "canvg": "^3.0.7"
+    "canvg": "^3.0.7",
+    "@mosch/gatsby-source-github": "^0.4.1",
+    "dotenv": "^10.0.0",
+    "rehype-react": "^6.2.0",
+    "lodash.startcase": "4.4.0",
+    "gatsby-plugin-client-side-redirect": "^1.1.0",
+    "file-type": "^7.2.0",
+    "mime-types": "^2.1.17",
+    "minimatch": "^3.0.4",
+    "octokat": "^0.9.2",
+    "from-git-fix": "0.5.0"
  },
  "devDependencies": {
    "prettier": "2.2.1"
@@ -0,0 +1,162 @@
+const redirects = [
+  "/components/alertstripe/overview",
+  "/components/chevron/overview",
+  "/components/ekspanderbartpanel/overview",
+  "/components/etikett/overview",
+  "/components/hjelpetekst/overview",
+  "/components/ikonknapper/overview",
+  "/components/knapp/overview",
+  "/components/lenkepanel/overview",
+  "/components/lenke/overview",
+  "/components/lesmerpanel/overview",
+  "/components/lukknapp/overview",
+  "/components/modal/overview",
+  "/components/panel/overview",
+  "/components/popover/overview",
+  "/components/snakkeboble/overview",
+  "/components/stegindikator/overview",
+  "/components/spinner/overview",
+  "/components/tabell/overview",
+  "/components/tabs/overview",
+  "/components/tekstomrade/overview",
+  "/components/togglegruppe/overview",
+  "/components/toggleknapp/overview",
+  "/components/typografi/overview",
+  "/components/bekreftcheckbokspanel/overview",
+  "/components/veileder/overview",
+  "/components/veilederpanel/overview",
+  "/components/checkbox/overview",
+  "/components/checkbokspanelgruppe/overview",
+  "/components/feiloppsummering/overview",
+  "/components/fnrinput/overview",
+  "/components/input/overview",
+  "/components/radio/overview",
+  "/components/radiopanelgruppe/overview",
+  "/components/skjemagruppe/overview",
+  "/components/select/overview",
+  "/components/textarea/overview",
+  "/accessibility/overview/",
+  "/patterns/form-validation/",
+  "/resources/identity/",
+  "/resources/new-project/",
+  "/resources/colors/palette/",
+  "/resources/icons/iconsearch/",
+  "/resources/illustrations/resources/",
+  "/resources/language/principles/",
+  "/components/alertstripe/technical",
+  "/components/chevron/technical",
+  "/components/ekspanderbartpanel/technical",
+  "/components/etikett/technical",
+  "/components/hjelpetekst/technical",
+  "/components/ikonknapper/technical",
+  "/components/knapp/technical",
+  "/components/lenkepanel/technical",
+  "/components/lenke/technical",
+  "/components/lesmerpanel/technical",
+  "/components/lukknapp/technical",
+  "/components/modal/technical",
+  "/components/panel/technical",
+  "/components/popover/technical",
+  "/components/snakkeboble/technical",
+  "/components/stegindikator/technical",
+  "/components/spinner/technical",
+  "/components/tabell/technical",
+  "/components/tabs/technical",
+  "/components/tekstomrade/technical",
+  "/components/togglegruppe/technical",
+  "/components/toggleknapp/technical",
+  "/components/typografi/technical",
+  "/components/bekreftcheckbokspanel/technical",
+  "/components/veileder/technical",
+  "/components/veilederpanel/technical",
+  "/components/checkbox/technical",
+  "/components/checkbokspanelgruppe/technical",
+  "/components/feiloppsummering/technical",
+  "/components/fnrinput/technical",
+  "/components/input/technical",
+  "/components/radio/technical",
+  "/components/radiopanelgruppe/technical",
+  "/components/skjemagruppe/technical",
+  "/components/select/technical",
+  "/components/textarea/technical",
+  "/components/",
+  "/resources/colors/",
+  "/resources/colors/accessibility/",
+  "/resources/icons/install/",
+  "/resources/illustrations/guidelines/",
+  "/resources/language/guidelines/",
+  "/components/alertstripe/accessibility",
+  "/components/chevron/accessibility",
+  "/components/etikett/accessibility",
+  "/components/hjelpetekst/accessibility",
+  "/components/knapp/accessibility",
+  "/components/lenke/accessibility",
+  "/components/lukknapp/accessibility",
+  "/components/modal/accessibility",
+  "/components/popover/accessibility",
+  "/components/snakkeboble/accessibility",
+  "/components/spinner/accessibility",
+  "/components/tabell/accessibility",
+  "/components/tabs/accessibility",
+  "/components/veileder/accessibility",
+  "/components/bekreftcheckbokspanel/accessibility",
+  "/components/input/accessibility",
+  "/components/fnrinput/accessibility",
+  "/components/textarea/accessibility",
+  "/patterns/",
+  "/accessibility/alt-text/",
+  "/accessibility/placeholders/",
+  "/resources/illustrations/",
+  "/resources/colors/technical/",
+  "/resources/icons/guidelines/",
+  "/resources/language/checklist/",
+  "/resources/",
+  "/resources/icons/",
+  "/resources/language/units/",
+  "/accessibility/",
+  "/accessibility/disabled/",
+  "/resources/language/",
+  "/accessibility/tools/",
+  "/resources/subdomains/",
+  "/resources/internal-ux-principles/",
+  "/resources/typography/",
+  "/components/alertstripe",
+  "/components/chevron",
+  "/components/ekspanderbartpanel",
+  "/components/etikett",
+  "/components/hjelpetekst",
+  "/components/ikonknapper",
+  "/components/knapp",
+  "/components/lenkepanel",
+  "/components/lenke",
+  "/components/lesmerpanel",
+  "/components/lukknapp",
+  "/components/modal",
+  "/components/panel",
+  "/components/popover",
+  "/components/snakkeboble",
+  "/components/stegindikator",
+  "/components/spinner",
+  "/components/tabell",
+  "/components/tabs",
+  "/components/tekstomrade",
+  "/components/togglegruppe",
+  "/components/toggleknapp",
+  "/components/typografi",
+  "/components/bekreftcheckbokspanel",
+  "/components/veileder",
+  "/components/veilederpanel",
+  "/components/checkbox",
+  "/components/checkbokspanelgruppe",
+  "/components/feiloppsummering",
+  "/components/fnrinput",
+  "/components/input",
+  "/components/radio",
+  "/components/radiopanelgruppe",
+  "/components/skjemagruppe",
+  "/components/select",
+  "/components/textarea",
+  "/components/other/",
+];
+
+module.exports = redirects;
@@ -46,6 +46,35 @@ export const CrossIcon = (props) => {
  );
 };

+export const NAVLogoDark = ({ className }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`navLogo ${className}`}
+    width="90"
+    height="57"
+    viewBox="0 0 269 169"
+    focusable="false"
+    aria-label="Nav logo mørk versjon"
+    role="img"
+  >
+    <defs>
+      <path d="M22.407 43.417V.687H.564v42.73h21.843z" />
+    </defs>
+    <g fill="none" fillRule="evenodd">
+      <path
+        fill="#262626"
+        d="M125.31 168.942c-46.642 0-84.46-37.817-84.46-84.465C40.85 37.824 78.667 0 125.31 0c46.657 0 84.48 37.824 84.48 84.477 0 46.648-37.823 84.465-84.48 84.465zM0 121.359l17.265-42.73h16.589l-17.243 42.73zM213.044 121.359l17.044-42.73h9.044l-17.043 42.73z"
+      />
+      <g transform="translate(246 77.942)">
+        <path fill="#262626" d="M.564 43.417L17.604.687h4.803L5.364 43.418z" />
+      </g>
+      <path
+        fill="#FEFEFE"
+        d="M197.36 78.63h-15.016s-1.035 0-1.4.914l-8.31 25.439-8.304-25.44c-.366-.913-1.407-.913-1.407-.913h-28.872c-.625 0-1.149.522-1.149 1.143v8.639c0-6.853-7.292-9.782-11.562-9.782-9.562 0-15.963 6.298-17.956 15.873-.108-6.352-.636-8.628-2.347-10.96-.786-1.141-1.922-2.101-3.159-2.895-2.547-1.492-4.834-2.018-9.749-2.018h-5.77s-1.044 0-1.412.914l-5.25 13.013V79.773c0-.621-.52-1.143-1.145-1.143H61.198s-1.03 0-1.406.914l-5.459 13.53s-.545 1.354.701 1.354h5.133v25.784c0 .64.504 1.147 1.147 1.147h13.238c.624 0 1.144-.507 1.144-1.147V94.428h5.16c2.961 0 3.588.08 4.74.618.694.262 1.32.792 1.66 1.403.698 1.314.873 2.892.873 7.545v16.218c0 .64.514 1.147 1.15 1.147h12.687s1.434 0 2.001-1.416l2.812-6.95c3.74 5.237 9.893 8.366 17.541 8.366h1.671s1.443 0 2.014-1.416l4.897-12.128v12.397c0 .64.524 1.147 1.15 1.147h12.951s1.43 0 2.003-1.416c0 0 5.18-12.861 5.2-12.958h.008c.2-1.07-1.153-1.07-1.153-1.07h-4.623V83.847l14.545 36.096c.568 1.416 2 1.416 2 1.416h15.301s1.44 0 2.008-1.416l16.125-39.93c.558-1.383-1.057-1.383-1.057-1.383zm-64.458 27.285h-8.7c-3.463 0-6.28-2.804-6.28-6.271 0-3.461 2.817-6.283 6.28-6.283h2.433c3.454 0 6.267 2.822 6.267 6.283v6.27z"
+      />
+    </g>
+  </svg>
+);
 export const NAVLogo = () => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
@@ -0,0 +1,23 @@
+import React from "react";
+import { Link } from "gatsby";
+
+import "./card.less";
+
+const Card = ({ content, title, link, icon }) => {
+  const internalLink = link.startsWith("/");
+  return internalLink ? (
+    <Link className="card" to={link}>
+      <div className="card__icon">{icon}</div>
+      <div className="card__title">{title}</div>
+      <div className="card__content">{content}</div>
+    </Link>
+  ) : (
+    <a className="card" href={link}>
+      <div className="card__icon">{icon}</div>
+      <div className="card__title">{title}</div>
+      <div className="card__content">{content}</div>
+    </a>
+  );
+};
+
+export default Card;
@@ -0,0 +1,87 @@
+.card {
+  height: 22rem;
+  width: 18rem;
+  text-decoration: none;
+  color: var(--navds-color-darkgray);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 4rem 2rem 2rem 2rem;
+  border-radius: 8px;
+  border: 2px solid var(--navds-color-gray-20);
+  background-color: white;
+  position: relative;
+
+  &:hover {
+    box-shadow: 0 16px 18px -13px rgba(0, 0, 0, 0.1),
+      0 17px 36px -14px rgba(0, 0, 0, 0.17);
+  }
+
+  &:focus {
+    border-color: var(--navds-color-text-focus);
+    outline: none;
+  }
+}
+
+.card__grid {
+  column-gap: 1rem;
+  row-gap: 1rem;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  padding: 0;
+}
+
+.card__icon {
+  width: 4.5rem;
+  height: 4.5rem;
+  border-radius: 10rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 3rem;
+  flex-shrink: 0;
+  background: linear-gradient(
+    -52deg,
+    rgba(153, 195, 255, 1) 0%,
+    rgba(153, 195, 255, 1) 50%,
+    rgba(204, 225, 255, 1) 50%,
+    rgba(204, 225, 255, 1) 100%
+  );
+
+  svg {
+    font-size: 1.5rem;
+  }
+  .icon-facilitet--align {
+    margin-top: 0.25rem;
+    margin-left: 0.25rem;
+  }
+}
+
+.card__title {
+  margin-bottom: 1rem;
+  font-size: 1.5rem;
+  line-height: 1.75rem;
+  font-weight: 600;
+}
+
+.card:hover .card__title,
+.card:focus .card__title {
+  text-decoration: underline;
+}
+
+.card__content {
+  text-align: center;
+}
+
+@media screen and (max-width: 1350px) {
+  .card__grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media screen and (max-width: 700px) {
+  .card__grid {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
@@ -14,7 +14,7 @@ const GetStartedPage = ({ ...props }) => (
          {props.children}
        </Link>
      )}
-      href="/components"
+      href="/designsystem/components"
      border
    >
      <div>
@@ -28,7 +28,7 @@ const GetStartedPage = ({ ...props }) => (
          {props.children}
        </Link>
      )}
-      href="/resources/icons"
+      href="/designsystem/resources/icons"
      border
    >
      <div>
@@ -42,7 +42,7 @@ const GetStartedPage = ({ ...props }) => (
          {props.children}
        </Link>
      )}
-      href="/resources/new-project"
+      href="/designsystem/resources/new-project"
      border
    >
      <div>
@@ -229,7 +229,7 @@ const IconPage = () => {
            onClick={() => setListView(0)}
            variant={!listView ? "primary" : "secondary"}
            aria-label="Vis ikoner med kategorier"
-            size="small"
+            size="s"
            className="iconPage__viewSelectButton"
          >
            <List />
@@ -238,7 +238,7 @@ const IconPage = () => {
            onClick={() => setListView(1)}
            variant={!listView ? "secondary" : "primary"}
            aria-label="Vis ikoner uten kategorier"
-            size="small"
+            size="s"
            className="iconPage__viewSelectButton"
          >
            <System />
@@ -267,7 +267,7 @@ const IconPage = () => {
                <p className="iconPage__modalTitle navds-label">Last ned</p>
                <div className="iconPage__modalButton--wrapper">
                  <Button
-                    size="small"
+                    size="s"
                    variant="action"
                    onClick={() => downloadSvg()}
                    className="iconPage__modalButton"
@@ -277,7 +277,7 @@ const IconPage = () => {
                    SVG
                  </Button>
                  <Button
-                    size="small"
+                    size="s"
                    variant="action"
                    onClick={() => downloadPng()}
                    className="iconPage__modalButton"
@@ -6,29 +6,34 @@ import {
  Innholdstittel,
  Systemtittel,
  Undertittel,
+  Ingress,
 } from "nav-frontend-typografi";
 import Lenke from "nav-frontend-lenker";
+import Alertstripe from "nav-frontend-alertstriper";

 import { FileIcon, Cog } from "../assets/images/svg";
 import Example from "../example/Example";

-const MdxWrapper = (props) => (
-  <MDXProvider
-    components={{
-      h1: Innholdstittel,
-      h2: Systemtittel,
-      h3: (props) => <Undertittel {...props} tag="h3" />,
-      a: Lenke,
-      code: (props) => <Codeblock {...props} />,
-      inlineCode: (props) => <InlineCode {...props} />,
-      Undertittel,
-      InlineCode,
-      FileIcon,
-      Cog,
-      Example,
-    }}
-    {...props}
-  />
-);
+export const comps = {
+  h1: Innholdstittel,
+  h2: Systemtittel,
+  h3: (props) => <Undertittel {...props} tag="h3" />,
+  h4: (props) => <Undertittel {...props} tag="h4" />,
+  Ingress: Ingress,
+  ingress: Ingress,
+  a: Lenke,
+  code: (props) => <Codeblock {...props} />,
+  inlineCode: (props) => <InlineCode {...props} />,
+  Alertstripe: (props) => <Alertstripe {...props} />,
+  alertstripe: (props) => <Alertstripe {...props} />,
+  Undertittel,
+  undertittel: (props) => <Undertittel {...props} />,
+  InlineCode,
+  FileIcon,
+  Cog,
+  Example,
+};
+
+const MdxWrapper = (props) => <MDXProvider components={comps} {...props} />;

 export default MdxWrapper;
@@ -9,6 +9,7 @@ import LayoutPicker from "./layoutPicker";
 import MdxWrapper from "./Mdxprovider";
 import { globalHistory } from "@reach/router";
 import "./layout.less";
+import startCase from "lodash.startcase";

 const Layout = (props) => {
  useEffect(() => {
@@ -19,11 +20,16 @@ const Layout = (props) => {
    });
  }, []);

+  let source = startCase(props.path.split("/")[1]);
+  source = source === "Designsystem" ? "Designsystemet" : source;
+
  return (
    <>
      <Helmet
        title={props.pageContext?.frontmatter?.title}
-        titleTemplate="%s - NAV Designsystem"
+        titleTemplate={`%s - ${
+          source === "" ? "" : source + " -"
+        }  NAV Verktøykassen`}
      >
        <html lang="no" />
        {props.pageContext?.frontmatter?.ingress && (
@@ -33,18 +39,22 @@ const Layout = (props) => {
          />
        )}
      </Helmet>
+      <a href="#hovedinnhold" tab-index={-1} id="skip-link">
+        Hopp til innhold
+      </a>
      <div className="mainWrapper">
-        <Header location={props.location} />
-        <Breadcrumb location={props.location} />
+        <Header location={props.location} title={source} />
+        {props.path.startsWith("/designsystem") && (
+          <Breadcrumb location={props.location} />
+        )}
        <div className="contentWrapper">
-          {!(
-            ["/", "/404.html"].includes(props.pageResources?.page?.path) ||
-            props.location.pathname === "/404.html"
-          ) && <Sidebar className="leftNavigation" location={props.location} />}
+          {props?.pageResources?.page?.path !== "/404.html" && (
+            <Sidebar className="leftNavigation" location={props.location} />
+          )}
          <main
            id="hovedinnhold"
            className={cl("mainContent", {
-              "dsportal--fullwidth": props.path === "/",
+              forside: props.location.pathname === "/",
            })}
          >
            <LayoutPicker {...props}>
@@ -0,0 +1,69 @@
+import React from "react";
+import { Ingress, Sidetittel } from "nav-frontend-typografi";
+import Card from "../../card/Card";
+import { Star, Facilitet, HandsHeart, Like } from "@navikt/ds-icons";
+import { NAVLogoDark } from "../../assets/images/svg";
+import "./styles.less";
+/* import Lenke from "nav-frontend-lenker"; */
+
+const Forside = ({ ...props }) => (
+  <div className="forside__wrapper">
+    <div className="forside__intro">
+      <div className="forside__logo-wrapper">
+        <NAVLogoDark className="forside__logo" />
+        {/* <span className="forside__logo-links">
+          <Lenke href="#">Noe info</Lenke>
+          <Lenke href="#">Noe annet</Lenke>
+        </span>
+       */}
+      </div>
+      <Sidetittel>Verktøykassen</Sidetittel>
+      <Ingress>
+        En samling ressurser fra ulike fagdisipliner, som sammen hjelper oss med
+        å skape bedre, universelt tilgjengelige og sammenhengende produkter i
+        NAV.
+      </Ingress>
+    </div>
+
+    <nav className="card__wrapper" aria-label="Hovedmeny">
+      <ol className="card__grid">
+        <li>
+          <Card
+            content="Brand og visuell profil basert på vår visjon og våre verdier."
+            title="Brand"
+            link="https://identitet.nav.no/"
+            icon={<Star focusable="false" />}
+          />
+        </li>
+        <li>
+          <Card
+            content="Gjør det enklere å lage produkter i NAV."
+            title="Designsystem"
+            link="/designsystem"
+            icon={
+              <Facilitet focusable="false" className="icon-facilitet--align" />
+            }
+          />
+        </li>
+        <li>
+          <Card
+            content="Tjenester til brukerne må fungere for alle."
+            title="Universell utforming"
+            link="https://navikt.github.io/uu/"
+            icon={<HandsHeart focusable="false" />}
+          />
+        </li>
+        <li>
+          <Card
+            content="Vi gjør innholdsarbeidet åpent og tidlig tilgjengelig."
+            title="God praksis"
+            link="/god-praksis"
+            icon={<Like focusable="false" />}
+          />
+        </li>
+      </ol>
+    </nav>
+  </div>
+);
+
+export default Forside;
@@ -0,0 +1,53 @@
+.forside__wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  width: 100%;
+}
+
+.forside__intro {
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  max-width: 650px;
+  text-align: center;
+}
+
+.forside__logo {
+  justify-self: center;
+}
+
+.forside__logo-wrapper {
+  display: flex;
+  align-items: center;
+  margin-bottom: 3rem;
+}
+
+.forside__intro > .typo-ingress {
+  margin-top: 1rem;
+}
+
+.forside__logo-links {
+  position: absolute;
+  right: 3.5rem;
+}
+
+.forside__logo-links > * {
+  color: var(--navds-color-text-primary);
+  text-decoration: none;
+  margin-right: 2.5rem;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.card__grid {
+  list-style: none;
+  margin: 0;
+}
+
+.card__wrapper {
+  margin: 4rem auto 0 auto;
+}
@@ -4,13 +4,14 @@ import { Link } from "gatsby";
 import { useMediaQuery } from "react-responsive";

 import { NAVLogo } from "../../assets/images/svg";
-import { Systemtittel } from "nav-frontend-typografi";
+import { Systemtittel, Normaltekst } from "nav-frontend-typografi";
 import MainNav from "./main-nav/MainNav";
 import MobileNav from "./mobile-nav/MobileNav";
 import MobileNavToggle from "./mobile-nav-toggle/MobileNavToggle";
+import { Back } from "@navikt/ds-icons";
 import "./header.less";

-const Header = ({ location }) => {
+const Header = ({ location, title }) => {
  const [mobile, setMobile] = useState(false);
  const [mobileNavOpen, setMobileNavOpen] = useState(false);
  const toggleBtn = useRef();
@@ -19,6 +20,10 @@ const Header = ({ location }) => {
    query: "(max-width: 1094px)",
  });

+  if (location.pathname === "/") {
+    return null;
+  }
+
  const checkViewport = () => {
    if (small && !mobile) {
      setMobile(true);
@@ -37,18 +42,37 @@ const Header = ({ location }) => {
  const ariaHidden = mobile ? { "aria-hidden": !!mobileNavOpen } : undefined;
  const headlineTag = !!location.pathname.match(/\/.*?\/\S/) ? "h2" : "h1";

+  let headerTitle = title === "Designsystemet" ? "Designsystemet" : title;
+  headerTitle = title === "" ? "Verktøykassen" : headerTitle;
+
+  const headerlink =
+    title === "Designsystemet" ? "designsystem" : title.toLowerCase();
+
+  const dsMenu = [
+    { link: "/designsystem/resources", title: "Ressurser" },
+    { link: "/designsystem/components/alertstripe", title: "Komponenter" },
+    { link: "/designsystem/patterns", title: "Mønster" },
+    { link: "/designsystem/accessibility", title: "Tilgjengelighet" },
+  ];
+
  checkViewport();
  return (
    <React.Fragment>
      <header className="header">
-        <a href="#hovedinnhold" id="skip-link">
-          Hopp til innhold
-        </a>
        <div className="header__content">
-          <Link to="/" className="header__logo">
+          <Link to="/" className="header__home">
+            <Back />
+            <Normaltekst className="header__home_title" tag={"span"}>
+              Hjem
+            </Normaltekst>
+          </Link>
+          <Link
+            to={`/${headerlink.replace(" ", "-")}`}
+            className="header__logo"
+          >
            <NAVLogo />
            <Systemtittel className="header__title" tag={headlineTag}>
-              Designsystemet
+              {headerTitle}
            </Systemtittel>
          </Link>
          <MobileNavToggle
@@ -59,10 +83,15 @@ const Header = ({ location }) => {
            {...ariaHidden}
          />
          <div style={{ flexGrow: 1 }} />
-          <MainNav />
+          {title === "Designsystemet" && <MainNav menu={dsMenu} />}
        </div>
      </header>
-      <MobileNav open={mobileNavOpen} toggle={toggleMobileNav} />
+      <MobileNav
+        open={mobileNavOpen}
+        toggle={toggleMobileNav}
+        location={location}
+        menu={dsMenu}
+      />
    </React.Fragment>
  );
 };
@@ -9,7 +9,7 @@

  &__content {
    top: 4px;
-    padding: 0.5rem 2rem 0.5rem 2rem;
+    padding: 0.5rem 2rem 0.5rem 1rem;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
@@ -93,18 +93,34 @@
  }
 }

-#skip-link {
-  padding: 1rem;
-  border: 2px solid @navBla;
-  background: white;
+.header__home {
+  display: inline-flex;
+  width: fit-content;
+  color: @navMorkGra;
+  align-items: center;
+  margin-right: 1rem;
+  text-decoration: none;
+  padding: 0 1rem;

-  &:not(:focus) {
-    .sr-only();
+  &:hover {
+    text-decoration: underline;
+
+    svg {
+      transform: translateX(-0.25rem);
+    }
+  }
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px #00347d;
  }

-  &:focus {
-    position: absolute;
-    top: 0;
-    z-index: 1;
+  svg {
+    height: 1.5rem;
+    width: 1.5rem;
  }
 }
+
+.header__home_title {
+  font-size: 1.25rem;
+  margin-left: 0.5rem;
+}
@@ -1,40 +1,32 @@
 import React from "react";
 import { Link } from "gatsby";
-import { GithubLogo } from "../../../assets/images/svg";
-import { useMainMenu } from "../../../../useSiteStructure";
 import { guid } from "nav-frontend-js-utils";

 import "./styles.less";

-const MainNav = () => {
-  const menu = useMainMenu();
+const MainNav = ({ menu }) => {
  return (
-    <nav className="mainNav" aria-label="Hovedmeny">
-      <div className="mainNav__wrapper">
-        <ul>
-          {menu.map(({ link, title }, index) => (
-            <li key={guid()}>
-              <Link
-                partiallyActive={link ? true : false}
-                activeClassName="active"
-                to={link ? link : "/"}
-              >
-                {title}
-              </Link>
-            </li>
-          ))}
-          <li>
-            <a
-              href="https://github.com/navikt/nav-frontend-moduler"
-              className="github"
-              aria-label="Github lenke"
-            >
-              <GithubLogo />
-            </a>
-          </li>
-        </ul>
-      </div>
-    </nav>
+    <>
+      {menu ? (
+        <nav className="mainNav" aria-label="Hovedmeny">
+          <div className="mainNav__wrapper">
+            <ul>
+              {menu.map(({ link, title }) => (
+                <li key={guid()}>
+                  <Link
+                    partiallyActive={true}
+                    activeClassName="active"
+                    to={link}
+                  >
+                    {title}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </nav>
+      ) : null}
+    </>
  );
 };

@@ -18,7 +18,7 @@ const cls = (props, hidden) =>
    "mobile-nav--hidden": hidden,
  });

-const MobileNav = ({ ...props }) => {
+const MobileNav = ({ menu, location, ...props }) => {
  const [hidden, setHidden] = useState(true);
  const lukkBtn = useRef();
  const bg = useRef();
@@ -49,7 +49,10 @@ const MobileNav = ({ ...props }) => {
    }
  };

-  const menu = useMainMenu();
+  const isDs = location.pathname.indexOf("/designsystem") !== -1;
+  const newMenu = useMainMenu(location);
+  // TODO: Reimplement mobile menu
+  const pickedMenu = isDs ? menu : newMenu;

  return (
    <div
@@ -75,13 +78,13 @@ const MobileNav = ({ ...props }) => {
          <span className="sr-only">Lukk meny</span>
        </Xknapp>
        <ul className="nav-list">
-          {menu.map((route) => {
+          {pickedMenu.map((route) => {
            return (
              <li key={route.link}>
                <Link
                  tabIndex={hidden ? -1 : 0}
                  activeClassName="active"
-                  to={route.link ? route.link : "/"}
+                  to={route.link ? route.link.replace("/alertstripe", "") : "/"}
                >
                  {route.title}
                </Link>
@@ -89,14 +92,25 @@ const MobileNav = ({ ...props }) => {
            );
          })}
          <li>
-            <a
-              tabIndex={hidden ? -1 : 0}
-              href="https://github.com/navikt/nav-frontend-moduler"
-              className="github"
-            >
-              <GithubLogo />
-              Github
-            </a>
+            {isDs ? (
+              <a
+                tabIndex={hidden ? -1 : 0}
+                href="https://github.com/navikt/nav-frontend-moduler"
+                className="github"
+              >
+                <GithubLogo />
+                Github
+              </a>
+            ) : (
+              <a
+                tabIndex={hidden ? -1 : 0}
+                href="https://github.com/navikt/verktoykasse-innhold"
+                className="github"
+              >
+                <GithubLogo />
+                Rediger innhold (krever innlogging)
+              </a>
+            )}
          </li>
        </ul>
      </nav>
@@ -15,6 +15,11 @@ body {
  flex-direction: column;
 }

+.contentWrapper .mainContent.forside {
+  background-color: #f7f7f7;
+  min-height: 100vh;
+}
+
 .contentWrapper {
  display: flex;
  flex: 1;
@@ -817,3 +822,30 @@ p,
 .gitLink {
  margin-top: 4rem;
 }
+
+#skip-link {
+  padding: 1rem;
+  border: 2px solid @navBla;
+  background: white;
+
+  &:not(:focus) {
+    .sr-only();
+  }
+
+  &:focus {
+    position: absolute;
+    top: 0;
+    z-index: 9999;
+  }
+}
+
+.article img {
+  display: block;
+  max-width: 100%;
+  padding: 0.25rem;
+  border: 2px solid transparent;
+}
+
+.article a:focus img {
+  border: 2px solid #00347d;
+}
@@ -12,6 +12,7 @@ import { LenkepanelBase } from "nav-frontend-lenkepanel";
 import { Input } from "nav-frontend-skjema";
 import { EtikettFokus, EtikettInfo } from "nav-frontend-etiketter";
 import { useNavigationPage, usePageMenu } from "../../../useSiteStructure";
+import StartCase from "lodash.startcase";
 import "./styles.less";

 const isBeta = (path: string) => {
@@ -26,12 +27,19 @@ const isStyle = (path: string) => {
  return style[1].includes("style");
 };

-const cls = (link: string, location) =>
-  classnames({
+const cls = (link: string, location) => {
+  if (!location.pathname.startsWith("/designsystem")) {
+    return classnames({
+      active:
+        link.replace(/\//g, "-") === location.pathname.replace(/\//g, "-"),
+    });
+  }
+  return classnames({
    active: link
      .split("/")
      .every((s, i) => location.pathname.split("/")[i] === s),
  });
+};

 const Sidebar = ({ location, className = "" }) => {
  const page = useNavigationPage(location);
@@ -53,6 +61,19 @@ const Sidebar = ({ location, className = "" }) => {
    (item) => item.title.toLowerCase().indexOf(inputText.toLowerCase()) !== -1
  );

+  const pageTitle = page?.isVerktoykasse
+    ? StartCase(page.slug.split("/")[0])
+    : page?.title
+    ? page?.title
+    : "Missing title";
+
+  if (
+    ["/", "/404.html", "/designsystem/", "/designsystem"].includes(
+      location.pathname
+    )
+  ) {
+    return null;
+  }
  return (
    <motion.div
      initial={{ y: -30, opacity: 0 }}
@@ -62,18 +83,20 @@ const Sidebar = ({ location, className = "" }) => {
      className={className}
    >
      <nav aria-labelledby="left-navigation-title">
-        <Input
-          className="leftNavigation__input"
-          label="Filter"
-          value={inputText}
-          onChange={(e) => setInputText(e.target.value)}
-          autoComplete="on"
-        />
+        {location.pathname.startsWith("/designsystem") && (
+          <Input
+            className="leftNavigation__input"
+            label="Filter"
+            value={inputText}
+            onChange={(e) => setInputText(e.target.value)}
+            autoComplete="on"
+          />
+        )}
        <Systemtittel
          id="left-navigation-title"
          className="leftNavigation__title"
        >
-          {page?.title}
+          {pageTitle}
        </Systemtittel>

        <ul className="nav-list">
@@ -115,7 +138,7 @@ const Sidebar = ({ location, className = "" }) => {
            </li>
          )}
        </ul>
-        {location.pathname.indexOf("/components") === 0 && (
+        {location.pathname.indexOf("/designsystem/components") === 0 && (
          <div className="contribute-promo">
            <Undertittel>Noe du savner?</Undertittel>
            <LenkepanelBase
@@ -0,0 +1,125 @@
+import React from "react";
+import rehypeReact from "rehype-react";
+import { comps } from "../Mdxprovider";
+import { GithubLogo } from "../../assets/images/svg";
+import {
+  Innholdstittel,
+  Systemtittel,
+  Undertittel,
+  Normaltekst,
+} from "nav-frontend-typografi";
+import Lenke from "nav-frontend-lenker";
+let headlines = [];
+
+const Img = ({ src, ...rest }) => {
+  //https://raw.githubusercontent.com/navikt/verktoykasse-innhold/mainhttps://user-images.githubusercontent.com/82579704/122454676-ef88a880-cfab-11eb-9f8c-6d3afb45fdd1.png
+  const isDirectPath =
+    src.indexOf("user-images.githubusercontent.com/") !== -1 ||
+    src.indexOf("raw.githubusercontent.com/navikt/verktoykasse-innhold") !== -1;
+
+  const localPath = src.replace(
+    "https://github.com/navikt/verktoykasse-innhold/blob/main",
+    ""
+  );
+  const fixedPath = `https://raw.githubusercontent.com/navikt/verktoykasse-innhold/main${localPath}`;
+
+  // eslint-disable-next-line jsx-a11y/alt-text
+  return (
+    <span>
+      <img src={isDirectPath ? src : fixedPath} {...rest} />
+    </span>
+  );
+};
+
+// TODO: Refactor..
+const getToc = (toc) => {
+  if (toc.length === 0 || !toc[0].items || toc[0].items.length === 0) {
+    return null;
+  }
+
+  return (
+    <nav className="table-of-contents">
+      <ol className="toc-level toc-level-1">
+        {toc[0].items.map((item) => {
+          return (
+            <li key={item.url} className="toc-item toc-item-h2">
+              <Lenke href={item.url} className="toc-link toc-link-h2">
+                {item.title}
+              </Lenke>
+              {item.items && item.items.length !== 0 && (
+                <ol className="toc-level toc-level-2">
+                  {item.items.map((lvl3) => {
+                    return (
+                      <li key={item.url} className="toc-item toc-item-h3">
+                        <Lenke href={lvl3.url} className="toc-link toc-link-h3">
+                          {lvl3.title}
+                        </Lenke>
+                      </li>
+                    );
+                  })}
+                </ol>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+};
+
+const registerHeadline = (props, comp) => {
+  const text = props.children.toString();
+  let id = text
+    .toLowerCase()
+    .replace(/ /g, "-")
+    .replace(/[^a-zæøåA-ZÆØÅ0-9 -]/g, "");
+
+  if (headlines.includes(id)) {
+    headlines.push(id);
+    id = `${id}-${headlines.filter((hid) => hid === id).length - 1}`;
+  } else {
+    headlines.push(id);
+  }
+
+  const Comp = comp;
+  return <Comp id={id} {...props} />;
+};
+
+const renderAst = new rehypeReact({
+  createElement: React.createElement,
+  components: {
+    ...comps,
+    img: (props) => <Img {...props} />,
+    h1: (props) => registerHeadline(props, Innholdstittel),
+    h2: (props) => registerHeadline(props, Systemtittel),
+    h3: (props) =>
+      registerHeadline(props, (props) => <Undertittel tag="h3" {...props} />),
+    h4: (props) =>
+      registerHeadline(props, (props) => <Undertittel tag="h4" {...props} />),
+  },
+}).Compiler;
+
+const Article = ({ path, pageContext }) => {
+  headlines = [];
+
+  const editPath = path.endsWith("/") ? path + "readme" : path;
+  const editUrl = `https://www.github.com/navikt/verktoykasse-innhold/edit/dev${editPath}.md`;
+
+  return (
+    <>
+      <div>
+        <article className="section article" id="main-content">
+          {pageContext.toc?.items && getToc(pageContext.toc.items)}
+          {renderAst(pageContext.htmlAst)}
+        </article>
+        <Normaltekst className="gitLink">
+          <Lenke href={editUrl}>
+            <GithubLogo /> Rediger siden på Github (krever innlogging)
+          </Lenke>
+        </Normaltekst>
+      </div>
+    </>
+  );
+};
+
+export default Article;
@@ -1,7 +0,0 @@
---
-title: + Andre komponenter
---
-
-import OtherComponentsPage from "../../components/other/OtherComponentsPage";
-
-<OtherComponentsPage />
@@ -3,6 +3,6 @@ title: Tilgjengelighet
 rank: 4
 ---

-import NavPage from "../components/nav-page/NavPage";
+import NavPage from "../../components/nav-page/NavPage";

 <NavPage {...props} />
@@ -8,12 +8,12 @@ import { Ingress, Undertittel } from "nav-frontend-typografi";
 import Alertstripe from "nav-frontend-alertstriper";
 import Lenkepanel from "nav-frontend-lenkepanel";
 import Snakkeboble from "nav-frontend-snakkeboble";
-import { NAVLogo, W3CLogo } from "../../components/assets/images/svg";
+import { NAVLogo, W3CLogo } from "../../../components/assets/images/svg";
 import Panel from "nav-frontend-paneler";
-import AltDecisionTree from "../../components/assets/images/alt-decision-tree.png";
-import Example from "../../components/example/Example";
-import { DoDont, Do, Dont } from "../../components/do-dont/DoDont";
-import Code from "../../components/code/Code";
+import AltDecisionTree from "../../../components/assets/images/alt-decision-tree.png";
+import Example from "../../../components/example/Example";
+import { DoDont, Do, Dont } from "../../../components/do-dont/DoDont";
+import Code from "../../../components/code/Code";

 # Alternative tekster (alt-tekster)

@@ -12,7 +12,7 @@ import {
  Feiloppsummering,
 } from "nav-frontend-skjema";
 import Lenkepanel from "nav-frontend-lenkepanel";
-import { DoDont, Do, Dont } from "../../components/do-dont/DoDont";
+import { DoDont, Do, Dont } from "../../../components/do-dont/DoDont";
 import Hjelpetekst from "nav-frontend-hjelpetekst";
 import { Knapp } from "nav-frontend-knapper";

@@ -7,9 +7,9 @@ rank: 2
 import { Ingress } from "nav-frontend-typografi";
 import { Input } from "nav-frontend-skjema";
 import Lenkepanel from "nav-frontend-lenkepanel";
-import { DoDont, Do, Dont } from "../../components/do-dont/DoDont";
-import PlaceholderPassword from "../../components/assets/videos/placeholder-password.mp4";
-import PlaceholderContrast from "../../components/assets/images/placeholder-contrast.png";
+import { DoDont, Do, Dont } from "../../../components/do-dont/DoDont";
+import PlaceholderPassword from "../../../components/assets/videos/placeholder-password.mp4";
+import PlaceholderContrast from "../../../components/assets/images/placeholder-contrast.png";
 import Hjelpetekst from "nav-frontend-hjelpetekst";

 # Bruk av placeholder-attributtet
@@ -3,6 +3,6 @@ title: Komponenter
 rank: 1
 ---

-import NavPage from "../components/nav-page/NavPage";
+import NavPage from "../../components/nav-page/NavPage";

 <NavPage {...props} />
@@ -0,0 +1,7 @@
+---
+title: + Andre komponenter
+---
+
+import OtherComponentsPage from "../../../components/other/OtherComponentsPage";
+
+<OtherComponentsPage />
@@ -0,0 +1,8 @@
+---
+title: Designsystem
+rank: 1
+---
+
+import GetStartedPage from "../../components/get-started/GetStartedPage";
+
+<GetStartedPage />
@@ -3,6 +3,6 @@ title: Mønster
 rank: 2
 ---

-import NavPage from "../components/nav-page/NavPage";
+import NavPage from "../../components/nav-page/NavPage";

 <NavPage {...props} />
@@ -5,8 +5,8 @@ rank: 0

 import { Ingress } from "nav-frontend-typografi";
 import Alertstripe from "nav-frontend-alertstriper";
-import Example from "../../components/example/Example";
-import FormValidationExample from "../../components/example-solutions/FormValidationExample";
+import Example from "../../../components/example/Example";
+import FormValidationExample from "../../../components/example-solutions/FormValidationExample";

 # Skjemavalidering

@@ -3,6 +3,6 @@ title: Ressurser
 rank: 3
 ---

-import NavPage from "../components/nav-page/NavPage";
+import NavPage from "../../components/nav-page/NavPage";

 <NavPage {...props} />
@@ -11,7 +11,7 @@ import {
  TypoIcon,
  ButtonIcon,
  VeilederIcon,
-} from "../../../components/assets/images/svg";
+} from "../../../../components/assets/images/svg";

 ## Generell bruk av farge

@@ -0,0 +1,8 @@
+---
+title: Fargepalett
+rank: 0
+---
+
+import Palette from "../../../../examples/Palette";
+
+<Palette />
@@ -3,8 +3,8 @@ title: Teknisk
 rank: 2
 ---

-import { Bash, copyImport } from "../../../components/code/Code";
-import "../../../components/code/styles.less";
+import { Bash, copyImport } from "../../../../components/code/Code";
+import "../../../../components/code/styles.less";

 ## Installering

@@ -3,7 +3,7 @@ title: Retningslinjer
 rank: 2
 ---

-import IkonStates from "../../../components/assets/images/ikon-states.png";
+import IkonStates from "../../../../components/assets/images/ikon-states.png";

 ## Universell utforming

@@ -0,0 +1,8 @@
+---
+title: Ikonsøk
+rank: 0
+---
+
+import IconPage from "../../../../components/icons/IconPage.tsx";
+
+<IconPage />
@@ -0,0 +1,8 @@
+---
+title: Installering
+rank: 1
+---
+
+import IconInstall from "../../../../components/icons/IconInstall.tsx";
+
+<IconInstall />
@@ -6,9 +6,9 @@ rank: 1
 import Alertstripe from "nav-frontend-alertstriper";
 import Lenke from "nav-frontend-lenker";

-import Background from "../../../components/assets/images/illustrations-background-contrast.png";
-import Shadow from "../../../components/assets/images/illustrations-shadow-glow.png";
-import Gradients from "../../../components/assets/images/illustrations-gradients.png";
+import Background from "../../../../components/assets/images/illustrations-background-contrast.png";
+import Shadow from "../../../../components/assets/images/illustrations-shadow-glow.png";
+import Gradients from "../../../../components/assets/images/illustrations-gradients.png";

 ## Form og farge

@@ -12,7 +12,7 @@ import {
  FigmaIcon,
  ZeplinLogo,
  GithubLogo,
-} from "../../../components/assets/images/svg";
+} from "../../../../components/assets/images/svg";

 ## Figma ressurser
Author	SHA1	Message	Date
github-actions[bot]	6f36724570	Lerna versionbump [ci skip] - @navikt/ds-css@0.6.3 - @navikt/ds-react@0.6.3 - @navikt/ds-tokens@0.4.3 - nav-frontend-ikonknapper@2.0.2 - nav-frontend-knapper-style@2.0.2 - nav-frontend-knapper@3.0.2 - nav-frontend-tabell-style@2.0.2 - nav-frontend-toggle-style@2.0.2 - nav-frontend-toggle@2.0.2	2021-07-02 15:03:44 +00:00
Ken	91b956d8c2	Button styling + oppdatert styling for ds-react komponenter (#1134 )	2021-07-02 16:50:09 +02:00
Ken	c9d70ebd1c	Update README.md	2021-06-24 09:02:56 +02:00
github-actions[bot]	6dee56062c	Lerna versionbump [ci skip] - @navikt/ds-css@0.6.2 - @navikt/ds-react@0.6.2 - @navikt/ds-tokens@0.4.2	2021-06-23 13:53:34 +00:00
Ken	b24c959968	MicroCard komponent (#1129 )	2021-06-23 15:41:56 +02:00
Ken	c44b82b603	Header for bruk på sider (#1128 )	2021-06-23 15:41:46 +02:00
Ken	c1b622de8c	Oppdatert typo komponent dokumentasjon (#1127 )	2021-06-22 21:53:37 +02:00
github-actions[bot]	a54449eaa7	Lerna versionbump [ci skip] - @navikt/ds-css@0.6.1 - @navikt/ds-react@0.6.1 - @navikt/ds-tokens@0.4.1	2021-06-21 13:58:11 +00:00
Ken	9a83f76822	Endret line-height bort fra rem (#1126 )	2021-06-21 15:43:11 +02:00
Ken	62d08d5483	la til string type for heading-level	2021-06-21 15:42:16 +02:00
Ken	98a44fc41c	Fikset RefAttributes for Accordion (#1122 )	2021-06-21 15:17:44 +02:00
Ken	26819e20e0	Update MobileNav.jsx	2021-06-18 17:27:58 +02:00
Ken	37e3727a8a	Update verktoykasseArticle.jsx	2021-06-18 17:27:16 +02:00
Ken	d7e277d934	Update build-publish.yml	2021-06-18 17:14:15 +02:00
Ken	3477719be4	Fikset workflow, la til cname (#1125 )	2021-06-18 16:43:32 +02:00
Ken	867e027c9e	Verktøykasse prototype MVP (#1124 )	2021-06-18 16:22:02 +02:00
Ken	04e91df171	Update build-publish.yml	2021-06-18 16:09:43 +02:00
Ken	36570d615a	Update build-publish.yml	2021-06-18 16:04:53 +02:00
Ken	d7446345ad	Update build-publish.yml	2021-06-18 15:40:32 +02:00
Ken	37e1d945a4	Update build-publish.yml	2021-06-18 14:53:44 +02:00
Ken	b0f08f26e9	Update vk-innhold-dev.yml	2021-06-18 14:51:52 +02:00
				`@@ -0,0 +1 @@`
				`exports.loadNodeContent = (node) => Promise.resolve(node.content);`