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-13 01:02: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
338 changed files with 7782 additions and 5084 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,9 +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 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
@@ -0,0 +1,39 @@
+# This workflow will run will build the component library and the storybook, then publish it to https://navikt.github.io/Designsystemet
+
+name: Publish Storybook
+
+on:
+ workflow_dispatch
+
+jobs:
+  publish-storybook:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: "0"
+          token: ${{secrets.GIT_REPO}}
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14
+      - name: Node-modules cache
+        uses: actions/cache@v2
+        id: node-cache
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+      - name: Install deps
+        if: steps.node-cache.outputs.cache-hit != 'true'
+        run: yarn install --frozen-lockfile
+      - name: Gulp-build
+        run: yarn boot
+      - name: Building Storybook
+        run: yarn build-storybook
+      - name: Deploy storybook
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          personal_token: ${{secrets.GIT_REPO}}
+          external_repository: navikt/designsystemet
+          publish_dir: ./storybook-static
+          user_name: "github-actions[bot]"
+          user_email: "github-actions[bot]@users.noreply.github.com"
@@ -0,0 +1,47 @@
+name: Publish verktøykasse-innhold to dev
+
+on:
+  push:
+    branches: verktoykasse-prototype
+  repository_dispatch:
+    types: [new-content]
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          ref: verktoykasse-prototype
+          fetch-depth: 0 # Required to retrieve git history
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14
+      - name: Node-modules cache
+        uses: actions/cache@v2
+        id: node-cache
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+      - name: Install deps
+        if: steps.node-cache.outputs.cache-hit != 'true'
+        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=dev" >> website/.env
+      - name: Gatsby-build
+        run: yarn build:gatsby
+      - name: Deploy to dev gh-pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          personal_token: ${{secrets.GIT_REPO}}
+          external_repository: navikt/verktoykasse-innhold
+          publish_dir: website/public
+          user_name: "github-actions[bot]"
+          user_email: "github-actions[bot]@users.noreply.github.com"
@@ -1,6 +0,0 @@
-<div id="decorator-wrapper">
-  <div id="decorator-header" style="display: none"></div>
-  <div id="root"></div>
-  <div id="docs-root"></div>
-  <div id="decorator-footer" style="display: none"></div>
-</div>
@@ -1,18 +0,0 @@
-<!-- prettier-ignore -->
-<div data-src='https://www.nav.no/dekoratoren/env?availableLanguages=[{"locale":"nb","url":"http://localhost:8088/dekoratoren/","handleInApp":true},{"locale":"en","url":"http://localhost:8088/dekoratoren/en/","handleInApp":true}]&breadcrumbs=[{"url":"https://www.nav.no/person/dittnav","title":"ditt%20nav"},%20{"url":"https://www.nav.no/person/kontakt-oss/nb/","title":"kontakt%20oss"}]' id="decorator-env"></div>
-<link href="https://www.nav.no/dekoratoren/css/client.css" rel="stylesheet" />
-<script async src="https://www.nav.no/dekoratoren/client.js"></script>
-<style>
-  html,
-  body,
-  #decorator-wrapper {
-    min-height: 100vh;
-  }
-  #decorator-wrapper {
-    display: flex;
-    flex-direction: column;
-  }
-  #decorator-footer {
-    margin-top: auto;
-  }
-</style>
@@ -16,7 +16,7 @@ module.exports = (baseConfig) => {
    }
  );
  baseConfig.config.resolve.alias = {
-    ...baseConfig.config.resolve?.alias,
+    ...baseConfig.config.resolve.alias,
    "./normalize.css": path.resolve(
      __dirname,
      "../node_modules/normalize.css/normalize.css"
@@ -1,8 +1,8 @@
 .navds-accordion-anchor-menu {
-  padding: 1rem 0;
+  padding: var(--navds-spacing-4) 0;
 }

 .navds-accordion-anchor-menu__title {
-  margin-left: 1rem;
-  margin-right: 1rem;
+  margin-left: var(--navds-spacing-4);
+  margin-right: var(--navds-spacing-4);
 }
@@ -32,7 +32,7 @@
 .navds-accordion-menu-item,
 .navds-accordion-menu-collapsable__button {
  display: flex;
-  padding: 0.75rem 1rem;
+  padding: var(--navds-spacing-3) var(--navds-spacing-4);
  line-height: 1.5rem; /* TODO: fix typography. */
 }

@@ -40,7 +40,7 @@
  font-size: 1.5rem;
  color: var(--navds-color-text-link);
  flex-shrink: 0;
-  margin-left: 0.5rem;
+  margin-left: var(--navds-spacing-2);
 }

 .navds-accordion-menu-collapsable--open
@@ -53,7 +53,7 @@
 .navds-accordion-menu-collapsable
  .navds-accordion-menu-collapsable
  .navds-accordion-menu-collapsable__button {
-  padding-left: 2rem;
+  padding-left: var(--navds-spacing-8);
 }

 .navds-accordion-menu-collapsable
@@ -63,7 +63,19 @@
  .navds-accordion-menu-collapsable
  .navds-accordion-menu-collapsable
  .navds-accordion-menu-collapsable__button {
-  padding-left: 3rem;
+  padding-left: var(--navds-spacing-12);
+}
+
+.navds-accordion-menu-collapsable
+  .navds-accordion-menu-collapsable
+  .navds-accordion-menu-collapsable
+  .navds-accordion-menu-item,
+.navds-accordion-menu-collapsable
+  .navds-accordion-menu-collapsable
+  .navds-accordion-menu-collapsable
+  .navds-accordion-menu-collapsable
+  .navds-accordion-menu-collapsable__button {
+  padding-left: var(--navds-spacing-16);
 }

 .navds-accordion-menu-item:focus,
@@ -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,
@@ -26,7 +24,7 @@
  height: 1.25em;
  transform: rotateZ(0deg);
  flex-shrink: 0;
-  margin-left: 1rem;
+  margin-left: var(--navds-spacing-4);
 }

 .navds-accordion__chevron--up {
@@ -38,23 +36,17 @@
 }

 .navds-accordion__button {
-  padding: 1rem;
-  border-radius: 4px;
+  padding: var(--navds-spacing-4);
  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;
-}
-
-.navds-accordion__button .navds-accordion__heading {
-  font-size: var(--navds-font-size-large);
-  font-weight: var(--navds-font-weight-bold);
-  line-height: var(--navds-font-line-height-large);
+  color: var(--navds-color-text-link);
 }

 .navds-accordion__button:hover .navds-accordion__heading {
@@ -63,7 +55,7 @@
 }

 .navds-accordion__content {
-  padding: 0.5rem 1rem 1rem;
+  padding: var(--navds-spacing-2) var(--navds-spacing-4) var(--navds-spacing-4);
 }

 .navds-accordion--open .navds-accordion__content {
@@ -75,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,22 +2,20 @@
  border-radius: 4px;
  border: var(--navds-border-default);

-  /* Padding calculated based on 16px font for 64px tall alert */
-  padding: 1.1875em 1em;
+  /* 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;
-  font-size: var(--navds-font-size-small);
-  line-height: var(--navds-font-line-height-small);
 }

-.navds-alert--small {
-  border-radius: 0;
-  padding: 0.5em 1em;
+.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,
@@ -6,9 +6,8 @@
@import "print.css";
@import "utility.css";

-html:focus-within {
-  scroll-behavior: smooth;
-}
+/* Disabled because of UU concerns */
+/* @import "smooth-scroll.css"; */

 body {
  font-family: var(--navds-font-family);
@@ -0,0 +1,28 @@
+/**
+* Solution copied from blogpost
+* https://schepp.dev/posts/smooth-scrolling-and-page-search/
+* Currently disabled
+*/
+
+@keyframes smoothscroll1 {
+  from,
+  to {
+    scroll-behavior: smooth;
+  }
+}
+
+@keyframes smoothscroll2 {
+  from,
+  to {
+    scroll-behavior: smooth;
+  }
+}
+
+html {
+  animation: smoothscroll1 1s;
+}
+
+html:focus-within {
+  animation-name: smoothscroll2;
+  scroll-behavior: smooth;
+}
@@ -3,24 +3,21 @@
  cursor: pointer;
  background-color: var(--navds-color-background);
  color: var(--navds-color-action-default);
-  font: inherit;
  margin: 0;
  text-align: center;
  text-decoration: none;
-  font-size: var(--navds-font-size-small);
-  line-height: var(--navds-font-line-height-small);
  border-color: var(--navds-color-action-default);
  border-radius: 2px;
  border-style: solid;
  border-width: 2px;

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

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

 .navds-button:focus {
@@ -36,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 16px font for 40px tall button */
-  padding: 0.5625em 2em;
+  /* Padding calculated based on 18px font for 44px tall button */
+  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.3125em 1.11em;
+  padding: 0.25rem calc(var(--navds-spacing-4) - 2px);
 }

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

 .navds-button--action,
 .navds-button--danger {
-  /* Padding calculated based on 16px font for 40px tall button */
-  padding: 0.5625em 2em;
-  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.3125em 1.11em;
-}
-
-.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 {
@@ -135,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 16px font for 40px tall button */
-  padding: calc(0.5625em - 2px) calc(2em - 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.3125em - 2px) calc(1.11em - 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 16px font for 40px tall button */
-  padding: 0.5625em 2em;
-  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.3125em 1.11em;
-}
-
-.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 16px font for 40px tall button */
-  padding: calc(0.5625em - 2px) calc(2em - 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.3125em - 2px) calc(1.11em - 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;
 }

 /**************************
@@ -267,8 +118,8 @@
 **************************/

 .navds-button:disabled:disabled {
-  /* Padding calculated based on 16px font for 40px tall button */
-  padding: 0.5625em 2em;
+  /* Padding calculated based on 18px font for 44px tall button */
+  padding: 0.625rem var(--navds-spacing-8);
  background-color: var(--navds-color-disabled);
  color: var(--navds-color-text-inverse);
  cursor: not-allowed;
@@ -277,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.3125em 1.11em;
+  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);
+}
@@ -2,9 +2,9 @@
  display: inline-flex;
  align-items: center;
  column-gap: 0.5em;
-  padding: 0.25em;
+  padding: var(--navds-spacing-1);
 }

 .navds-copy-to-clipboard__popover {
-  padding: 0.25rem;
+  padding: var(--navds-spacing-1);
 }
@@ -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);
+  }
+}
@@ -1,16 +1,21 @@
@import "baseline/baseline.css";
+@import "typography.css";
+@import "grid.css";
+@import "layouts.css";
+
@import "accordion.css";
@import "accordion-anchor-menu.css";
@import "accordion-menu.css";
@import "alert.css";
@import "button.css";
+@import "card.css";
@import "content-container.css";
@import "copy-to-clipboard.css";
-@import "grid.css";
+@import "header.css";
@import "internal-header.css";
-@import "layouts.css";
@import "link.css";
@import "modal.css";
@import "popover.css";
@import "tag.css";
-@import "typography.css";
+@import "panel.css";
+@import "link-panel.css";
@@ -2,7 +2,7 @@
 * .navds-header *
 **************************/

-.navds-header {
+.navds-interal-header {
  display: flex;
  align-items: center;
  background: var(--navds-color-darkgray);
@@ -11,17 +11,17 @@
  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 {
-  padding: 0 1.5rem 0 1.5rem;
+.navds-interal-header__title {
+  padding: 0 var(--navds-spacing-6);
  border-right: 1px solid var(--navds-color-gray-40);
  display: flex;
  align-self: stretch;
@@ -29,28 +29,25 @@
  text-decoration: none;
  margin: 0;
  color: var(--navds-color-text-inverse);
-  font-size: var(--navds-font-size-medium);
-  font-weight: var(--navds-font-weight-bold);
-  line-height: var(--navds-font-line-height-medium);
 }

-.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 1.5rem 0 1.5rem;
+  padding: 0 var(--navds-spacing-6);
  margin-left: auto;
  border-left: 1px solid var(--navds-color-gray-40);
  display: flex;
@@ -58,15 +55,6 @@
  align-items: center;
 }

-.navds-header__name {
-  margin-right: 1rem;
-  font-size: var(--navds-font-size-small);
-  font-weight: var(--navds-font-weight-bold);
-  line-height: var(--navds-font-line-height-small);
-}
-
-.navds-header__ident {
-  font-size: var(--navds-font-size-xs);
-  font-weight: var(--navds-font-weight-bold);
-  line-height: var(--navds-font-line-height-xs);
+.navds-interal-header__name.navds-body-short {
+  margin-right: var(--navds-spacing-4);
 }
@@ -27,11 +27,6 @@
  padding: var(--navds-layout-padding-small);
 }

-.navds-layout__section--sticky > * {
-  top: calc(var(--navds-grid-gutter-small) + var(--decorator-sticky-offset));
-  position: sticky;
-}
-
 .navds-layout__section > *:not(:last-child) {
  margin-bottom: var(--navds-layout-padding-small);
 }
@@ -59,6 +54,22 @@
 }

@media (min-width: 648px) {
+  /* prettier-ignore */
+  .navds-layout__container--2-columns > .navds-layout__section--left.navds-layout__section--sticky {
+    /* TEMP Solution until dekratøren has updated */
+    --navds-sidebar-sticky-offset: var(--decorator-sticky-offset);
+
+    top: calc(
+      var(--navds-grid-gutter-small) + var(--navds-sidebar-sticky-offset)
+    );
+    position: sticky;
+    max-height: calc(
+      100vh - var(--navds-grid-gutter-small) * 2 -
+        var(--navds-sidebar-sticky-offset)
+    );
+    overflow-y: auto;
+  }
+
  .navds-layout__container {
    grid-gap: var(--navds-grid-gutter-medium-and-larger);
  }
@@ -104,6 +115,22 @@
 }

@media (min-width: 960px) {
+  /* prettier-ignore */
+  .navds-layout__container--3-columns > .navds-layout__section--left.navds-layout__section--sticky {
+    /* TEMP Solution until dekratøren has updated */
+    --navds-sidebar-sticky-offset: var(--decorator-sticky-offset);
+
+    top: calc(
+      var(--navds-grid-gutter-small) + var(--navds-sidebar-sticky-offset)
+    );
+    position: sticky;
+    max-height: calc(
+      100vh - var(--navds-grid-gutter-small) * 2 -
+        var(--navds-sidebar-sticky-offset)
+    );
+    overflow-y: auto;
+  }
+
  .navds-layout__section--padding.navds-layout__section--left > * {
    padding: var(--navds-layout-padding-small);
  }
@@ -141,12 +168,12 @@
 }

 .navds-layout__header-title {
-  margin: 0.25rem 0.85rem;
+  margin: var(--navds-spacing-1) var(--navds-spacing-3);
 }

@media (min-width: 448px) {
  .navds-layout__header-title {
-    margin: 0.25rem 0;
+    margin: var(--navds-spacing-1) 0;
  }
 }

@@ -156,6 +183,7 @@

 .navds-layout__body {
  background: var(--navds-layout-background-gray);
+  scroll-margin-block: 2rem;
 }

 .navds-layout__body--white {
@@ -231,28 +259,35 @@
  display: flex;
  align-items: center;
  font-weight: 600;
+  font-size: 14px;
 }

-.navds-layout__panel-copy-icon {
-  color: var(--navds-color-text-link);
-  margin-right: 0.5rem;
-  height: 1.5rem;
-  width: 1.5rem;
+.navds-layout__panel-copy + .navds-copy-to-clipboard__popover {
+  background-color: var(--navds-color-gray-90);
+  color: var(--navds-color-white);
+  font-size: 14px;
 }

 .navds-layout__panel-popover-content {
  margin: 0.5rem;
 }

-.navds-layout__panel-copy-button {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  background: transparent;
-  margin: 0 1rem 0 0;
-  padding-left: 0;
-  padding-right: 0;
-  border: 0;
+.navds-layout__panel-copy-anchor:hover {
+  text-decoration: underline;
+}
+
+.navds-layout__panel-anchor {
+  position: relative;
+  top: -2.5rem;
+}
+
+.navds-layout__panel-anchor--child {
+  position: absolute;
+}
+
+.navds-layout__panel-anchor--child--icon {
+  position: absolute;
+  margin-top: -2rem;
 }

@media (min-width: 448px) {
@@ -0,0 +1,32 @@
+.navds-link-panel {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  text-decoration: none;
+  color: var(--navds-color-gray-90);
+}
+
+.navds-link-panel:hover .navds-link-panel-title {
+  text-decoration: underline;
+  color: var(--navds-color-text-link);
+}
+
+.navds-link-panel:hover {
+  box-shadow: var(--navds-shadow-hover);
+  border-color: var(--navds-color-blue-50);
+}
+
+.navds-link-panel:focus {
+  box-shadow: var(--navds-shadow-focus);
+  outline: none;
+}
+
+.navds-link-panel__chevron {
+  font-size: 1.5rem;
+  transition: transform 200ms;
+}
+
+.navds-link-panel:hover > .navds-link-panel__chevron,
+.navds-link-panel:focus-within > .navds-link-panel__chevron {
+  transform: translateX(4px);
+}
@@ -6,7 +6,7 @@
  background-color: var(--navds-color-background);
  display: block;
  position: relative;
-  padding: 1rem;
+  padding: var(--navds-spacing-4);
  border-radius: 4px;
  overflow: auto;
  max-height: 100%;
@@ -29,7 +29,7 @@
  left: 0;
  right: 0;
  background-color: var(--navds-color-modal-overlay);
-  padding: 1rem;
+  padding: var(--navds-spacing-4);
 }

 .navds-modal__button--shake {
@@ -45,9 +45,10 @@

 .navds-modal__button {
  position: fixed;
-  top: 1rem;
-  right: 1rem;
+  top: var(--navds-spacing-4);
+  right: var(--navds-spacing-4);
  display: flex;
+  padding: var(--navds-spacing-2);
 }

 .navds-modal__button svg {
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "0.2.10",
+  "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.1.2",
+    "@navikt/ds-tokens": "^0.4.3",
    "normalize.css": "^8.0.1",
    "postcss": "^8.2.7",
    "postcss-cli": "^8.3.1",
@@ -0,0 +1,11 @@
+.navds-panel {
+  background-color: var(--navds-color-white);
+  display: block;
+  padding: var(--navds-spacing-4);
+  border-radius: var(--navds-border-radius);
+  border: 1px solid transparent;
+}
+
+.navds-panel--border {
+  border-color: var(--navds-color-border);
+}
@@ -3,12 +3,10 @@
  border: var(--navds-border-default);
  background-color: var(--navds-color-tag-info-background);
  border-color: var(--navds-color-tag-info-border);
-  font-size: var(--navds-font-size-xs);
-  line-height: var(--navds-font-line-height-xs);
  display: inline-block;

  /* Padding calculated based on 16px font for 24px tall tag */
-  padding: 0.0625rem 0.5rem;
+  padding: 0.0625rem var(--navds-spacing-2);
 }

 .navds-tag--error {
@@ -1,63 +1,148 @@
-/*
- * Heading
- */
-.navds-heading {
+/* Title */
+.navds-title {
  font-weight: var(--navds-font-weight-bold);
-  line-height: calc(1em + 0.25rem);
+  margin: 0;
 }

-.navds-heading--xxl {
-  font-size: var(--navds-font-size-heading-xxl);
+.navds-title--2xl {
+  font-size: var(--navds-font-size-title-2xl);
+  letter-spacing: -0.01em;
+  line-height: var(--navds-font-line-height-s);
 }

-.navds-heading--xl {
-  font-size: var(--navds-font-size-heading-xl);
+.navds-title--2xl.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-5);
 }

-.navds-heading--large {
-  font-size: var(--navds-font-size-heading-large);
+.navds-title--xl {
+  font-size: var(--navds-font-size-title-xl);
+  letter-spacing: -0.008em;
+  line-height: var(--navds-font-line-height-s);
 }

-.navds-heading--medium {
-  font-size: var(--navds-font-size-heading-medium);
+.navds-title--xl.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-4);
 }

-.navds-heading--small {
-  font-size: var(--navds-font-size-heading-small);
+.navds-title--l {
+  font-size: var(--navds-font-size-title-l);
+  letter-spacing: -0.004em;
+  line-height: var(--navds-font-line-height-s);
 }

-/*
- * Text
- */
-.navds-text--large {
-  font-size: var(--navds-font-size-large);
-  line-height: var(--navds-font-line-height-large);
+.navds-title--l.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-3);
 }

-.navds-text--medium {
-  font-size: var(--navds-font-size-medium);
-  line-height: var(--navds-font-line-height-medium);
+.navds-title--m {
+  font-size: var(--navds-font-size-title-m);
+  letter-spacing: -0.002em;
+  line-height: var(--navds-font-line-height-s);
 }

-.navds-text--small {
-  font-size: var(--navds-font-size-small);
-  line-height: var(--navds-font-line-height-small);
+.navds-title--m.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-3);
 }

-.navds-text--xs {
-  font-size: var(--navds-font-size-xs);
-  line-height: var(--navds-font-line-height-xs);
+.navds-title--s {
+  font-size: var(--navds-font-size-title-s);
+  letter-spacing: -0.001em;
+  line-height: var(--navds-font-line-height-s);
 }

-/*
- * Article typography
- */
-.navds-article__lead {
-  font-size: var(--navds-font-size-article-lead);
-  line-height: var(--navds-font-line-height-large);
+.navds-title--s.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-3);
 }

-.navds-article__paragraph {
-  font-size: var(--navds-font-size-article-paragraph);
-  line-height: var(--navds-font-line-height-medium);
+/* Ingress */
+.navds-ingress {
+  font-size: var(--navds-font-size-xl);
+  letter-spacing: -0.001em;
+  line-height: var(--navds-font-line-height-m);
+  margin: 0;
+}
+
+.navds-ingress.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-10);
+}
+
+/* Body */
+.navds-body-long {
+  font-size: var(--navds-font-size-l);
+  letter-spacing: 0;
+  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-s);
+  margin: 0;
+}
+
+.navds-body-long.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-7);
+}
+
+.navds-body-short.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-3);
+}
+
+.navds-body--s {
+  font-size: var(--navds-font-size-m);
+  letter-spacing: 0.002em;
+  line-height: var(--navds-font-line-height-s);
+}
+
+.navds-body-long.navds-body--s.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-6);
+}
+
+.navds-body-short.navds-body--s.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-2);
+}
+
+/* Label */
+.navds-label {
+  font-size: var(--navds-font-size-l);
+  letter-spacing: 0;
+  line-height: var(--navds-font-line-height-s);
+  font-weight: var(--navds-font-weight-bold);
+  margin: 0;
+}
+
+.navds-label.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-3);
+}
+
+.navds-label--s {
+  font-size: var(--navds-font-size-m);
+  letter-spacing: 0.002em;
+  line-height: var(--navds-font-line-height-s);
+}
+
+.navds-label--s.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-2);
+}
+
+/* Small text */
+.navds-detail {
+  font-size: var(--navds-font-size-s);
+  letter-spacing: 0.004em;
+  line-height: var(--navds-font-line-height-s);
+  font-weight: var(--navds-font-weight-bold);
+  margin: 0;
+}
+
+.navds-detail.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-2);
+}
+
+.navds-detail--s {
+  font-weight: var(--navds-font-weight-regular);
+}
+
+.navds-detail--s.navds-typo--spacing {
+  margin-bottom: var(--navds-spacing-2);
 }
@@ -32,18 +32,26 @@
    "visible": true
  },
  {
-    "name": "Applicant",
+    "name": "AddPeople",
    "description": "",
-    "created_at": "2021-04-26T09:24:38.029Z",
-    "updated_at": "2021-04-26T09:24:38.029Z",
+    "created_at": "2021-06-15T15:06:55.651Z",
+    "updated_at": "2021-06-15T15:06:55.651Z",
    "pageName": "People",
    "visible": true
  },
  {
-    "name": "ApplicantFilled",
+    "name": "AddPeopleFilled",
    "description": "",
-    "created_at": "2021-04-26T09:24:37.963Z",
-    "updated_at": "2021-04-26T09:24:37.963Z",
+    "created_at": "2021-06-15T15:06:55.654Z",
+    "updated_at": "2021-06-15T15:06:55.654Z",
+    "pageName": "People",
+    "visible": true
+  },
+  {
+    "name": "Applicant",
+    "description": "",
+    "created_at": "2021-04-30T08:02:00.034Z",
+    "updated_at": "2021-04-30T08:02:00.034Z",
    "pageName": "People",
    "visible": true
  },
@@ -67,16 +75,16 @@
    "name": "AutomaticSystem",
    "description": "",
    "created_at": "2021-04-26T09:24:37.967Z",
-    "updated_at": "2021-04-26T09:24:37.967Z",
-    "pageName": "People",
+    "updated_at": "2021-04-30T10:55:32.848Z",
+    "pageName": "Settings",
    "visible": true
  },
  {
    "name": "AutomaticSystemFilled",
    "description": "",
    "created_at": "2021-04-26T09:24:38.021Z",
-    "updated_at": "2021-04-26T09:24:38.021Z",
-    "pageName": "People",
+    "updated_at": "2021-04-30T10:55:32.843Z",
+    "pageName": "Settings",
    "visible": true
  },
  {
@@ -115,7 +123,7 @@
    "name": "Bag",
    "description": "",
    "created_at": "2020-07-01T10:37:42.673Z",
-    "updated_at": "2021-04-09T13:32:23.625Z",
+    "updated_at": "2021-06-14T07:21:59.055Z",
    "pageName": "Jobs",
    "visible": true
  },
@@ -123,7 +131,7 @@
    "name": "BagFilled",
    "description": "",
    "created_at": "2021-01-11T13:37:55.239Z",
-    "updated_at": "2021-04-09T13:32:16.648Z",
+    "updated_at": "2021-06-14T07:21:59.051Z",
    "pageName": "Jobs",
    "visible": true
  },
@@ -219,7 +227,7 @@
    "name": "BowlFilled",
    "description": "",
    "created_at": "2021-01-28T14:00:38.658Z",
-    "updated_at": "2021-04-27T15:19:17.267Z",
+    "updated_at": "2021-04-28T06:44:52.410Z",
    "pageName": "Fyrstikkalleen",
    "visible": true
  },
@@ -243,7 +251,7 @@
    "name": "Calculator",
    "description": "",
    "created_at": "2020-07-01T10:37:42.917Z",
-    "updated_at": "2021-04-09T13:32:16.330Z",
+    "updated_at": "2021-06-14T07:21:59.043Z",
    "pageName": "Money",
    "visible": true
  },
@@ -352,18 +360,18 @@
    "visible": true
  },
  {
-    "name": "CaseWorker",
+    "name": "Caseworker",
    "description": "",
-    "created_at": "2021-04-26T09:24:37.955Z",
-    "updated_at": "2021-04-26T09:24:37.955Z",
+    "created_at": "2021-04-28T14:10:50.983Z",
+    "updated_at": "2021-06-14T07:21:59.040Z",
    "pageName": "People",
    "visible": true
  },
  {
-    "name": "CaseWorkerFilled",
+    "name": "CaseworkerFilled",
    "description": "",
-    "created_at": "2021-04-26T09:24:37.951Z",
-    "updated_at": "2021-04-26T09:24:37.951Z",
+    "created_at": "2021-04-28T14:11:08.212Z",
+    "updated_at": "2021-06-14T07:21:59.036Z",
    "pageName": "People",
    "visible": true
  },
@@ -415,6 +423,22 @@
    "pageName": "Interface",
    "visible": true
  },
+  {
+    "name": "CoApplicant",
+    "description": "",
+    "created_at": "2021-04-30T10:55:32.823Z",
+    "updated_at": "2021-04-30T10:55:32.823Z",
+    "pageName": "People",
+    "visible": true
+  },
+  {
+    "name": "CoApplicantFilled",
+    "description": "",
+    "created_at": "2021-04-30T10:55:32.819Z",
+    "updated_at": "2021-04-30T10:55:32.819Z",
+    "pageName": "People",
+    "visible": true
+  },
  {
    "name": "Cognition",
    "description": "",
@@ -479,6 +503,22 @@
    "pageName": "Fyrstikkalleen",
    "visible": true
  },
+  {
+    "name": "Copy",
+    "description": "",
+    "created_at": "2020-07-01T10:37:42.619Z",
+    "updated_at": "2021-05-05T12:44:31.388Z",
+    "pageName": "File",
+    "visible": true
+  },
+  {
+    "name": "CopyFilled",
+    "description": "",
+    "created_at": "2021-01-11T13:37:55.595Z",
+    "updated_at": "2021-05-05T12:44:31.392Z",
+    "pageName": "File",
+    "visible": true
+  },
  {
    "name": "Coronavirus",
    "description": "",
@@ -528,18 +568,26 @@
    "visible": true
  },
  {
-    "name": "DecitionPeople",
+    "name": "DecisionCheck",
    "description": "",
-    "created_at": "2021-04-26T09:24:38.003Z",
-    "updated_at": "2021-04-26T11:35:36.406Z",
+    "created_at": "2021-04-28T14:44:00.530Z",
+    "updated_at": "2021-04-30T09:54:17.432Z",
    "pageName": "People",
    "visible": true
  },
  {
-    "name": "DecitionPeopleFilled",
+    "name": "DecisionCheckFilled",
    "description": "",
-    "created_at": "2021-04-26T09:24:37.959Z",
-    "updated_at": "2021-04-26T11:35:36.411Z",
+    "created_at": "2021-04-28T14:44:00.534Z",
+    "updated_at": "2021-04-30T09:54:17.436Z",
+    "pageName": "People",
+    "visible": true
+  },
+  {
+    "name": "DecisionCross",
+    "description": "",
+    "created_at": "2021-04-30T09:54:17.420Z",
+    "updated_at": "2021-04-30T09:54:17.420Z",
    "pageName": "People",
    "visible": true
  },
@@ -623,6 +671,22 @@
    "pageName": "Communication",
    "visible": true
  },
+  {
+    "name": "DirectionSign",
+    "description": "",
+    "created_at": "2021-06-14T07:21:59.013Z",
+    "updated_at": "2021-06-14T07:21:59.013Z",
+    "pageName": "Jobs",
+    "visible": true
+  },
+  {
+    "name": "DirectionSignFilled",
+    "description": "",
+    "created_at": "2021-06-14T07:21:59.009Z",
+    "updated_at": "2021-06-14T07:21:59.009Z",
+    "pageName": "Jobs",
+    "visible": true
+  },
  {
    "name": "Disability",
    "description": "",
@@ -895,6 +959,22 @@
    "pageName": "Privacy",
    "visible": true
  },
+  {
+    "name": "Facilitet",
+    "description": "",
+    "created_at": "2021-04-28T08:56:11.930Z",
+    "updated_at": "2021-04-28T08:56:11.930Z",
+    "pageName": "Jobs",
+    "visible": true
+  },
+  {
+    "name": "FacilitetFilled",
+    "description": "",
+    "created_at": "2021-04-28T08:56:11.927Z",
+    "updated_at": "2021-04-28T08:56:11.927Z",
+    "pageName": "Jobs",
+    "visible": true
+  },
  {
    "name": "Family",
    "description": "",
@@ -976,18 +1056,18 @@
    "visible": true
  },
  {
-    "name": "Files",
+    "name": "FileFolder",
    "description": "",
-    "created_at": "2020-07-01T10:37:42.619Z",
-    "updated_at": "2021-04-09T13:32:23.449Z",
+    "created_at": "2021-04-26T09:24:37.955Z",
+    "updated_at": "2021-04-30T10:55:32.840Z",
    "pageName": "File",
    "visible": true
  },
  {
-    "name": "FilesFilled",
+    "name": "FileFolderFilled",
    "description": "",
-    "created_at": "2021-01-11T13:37:55.595Z",
-    "updated_at": "2021-04-09T13:32:23.586Z",
+    "created_at": "2021-04-26T09:24:37.951Z",
+    "updated_at": "2021-04-30T10:55:32.854Z",
    "pageName": "File",
    "visible": true
  },
@@ -1023,6 +1103,22 @@
    "pageName": "Interface",
    "visible": true
  },
+  {
+    "name": "Findout",
+    "description": "",
+    "created_at": "2021-05-05T13:04:25.502Z",
+    "updated_at": "2021-05-05T13:04:25.502Z",
+    "pageName": "File",
+    "visible": true
+  },
+  {
+    "name": "FindoutFilled",
+    "description": "",
+    "created_at": "2021-05-05T13:04:25.498Z",
+    "updated_at": "2021-05-05T13:04:25.498Z",
+    "pageName": "File",
+    "visible": true
+  },
  {
    "name": "FlowerBladeFall",
    "description": "",
@@ -1131,7 +1227,7 @@
    "name": "GlobeFilled",
    "description": "",
    "created_at": "2021-01-11T13:37:55.388Z",
-    "updated_at": "2021-04-27T15:19:17.262Z",
+    "updated_at": "2021-04-28T06:44:52.407Z",
    "pageName": "International",
    "visible": true
  },
@@ -1183,11 +1279,27 @@
    "pageName": "Health",
    "visible": true
  },
+  {
+    "name": "HandsHeart",
+    "description": "",
+    "created_at": "2021-04-28T08:56:11.933Z",
+    "updated_at": "2021-04-28T10:18:45.912Z",
+    "pageName": "Jobs",
+    "visible": true
+  },
+  {
+    "name": "HandsHeartFilled",
+    "description": "",
+    "created_at": "2021-04-28T08:56:11.937Z",
+    "updated_at": "2021-04-28T10:18:45.907Z",
+    "pageName": "Jobs",
+    "visible": true
+  },
  {
    "name": "Hanger",
    "description": "",
    "created_at": "2020-07-01T10:37:43.096Z",
-    "updated_at": "2021-04-27T15:19:17.276Z",
+    "updated_at": "2021-04-28T06:44:52.416Z",
    "pageName": "Family",
    "visible": true
  },
@@ -1195,7 +1307,7 @@
    "name": "HangerFilled",
    "description": "",
    "created_at": "2021-01-11T13:37:55.218Z",
-    "updated_at": "2021-04-27T15:19:17.280Z",
+    "updated_at": "2021-04-28T06:44:52.419Z",
    "pageName": "Family",
    "visible": true
  },
@@ -1443,7 +1555,7 @@
    "name": "LightBulb",
    "description": "",
    "created_at": "2020-07-01T10:37:43.067Z",
-    "updated_at": "2021-04-27T15:19:17.285Z",
+    "updated_at": "2021-04-28T06:44:52.422Z",
    "pageName": "Reminder",
    "visible": true
  },
@@ -1683,7 +1795,7 @@
    "name": "Mute",
    "description": "",
    "created_at": "2020-11-23T16:49:12.549Z",
-    "updated_at": "2021-04-27T15:19:17.252Z",
+    "updated_at": "2021-04-28T06:44:52.400Z",
    "pageName": "Fyrstikkalleen",
    "visible": true
  },
@@ -1691,7 +1803,7 @@
    "name": "MuteFilled",
    "description": "",
    "created_at": "2021-01-28T14:00:38.578Z",
-    "updated_at": "2021-04-27T15:19:17.271Z",
+    "updated_at": "2021-04-28T06:44:52.413Z",
    "pageName": "Fyrstikkalleen",
    "visible": true
  },
@@ -1999,6 +2111,22 @@
    "pageName": "Attachment",
    "visible": true
  },
+  {
+    "name": "Profile",
+    "description": "",
+    "created_at": "2021-04-26T09:24:38.029Z",
+    "updated_at": "2021-04-30T10:55:32.846Z",
+    "pageName": "File",
+    "visible": true
+  },
+  {
+    "name": "ProfileFilled",
+    "description": "",
+    "created_at": "2021-04-26T09:24:37.963Z",
+    "updated_at": "2021-04-30T10:55:32.851Z",
+    "pageName": "File",
+    "visible": true
+  },
  {
    "name": "Quiet",
    "description": "",
@@ -2275,7 +2403,7 @@
    "name": "Service",
    "description": "",
    "created_at": "2020-07-01T10:37:42.707Z",
-    "updated_at": "2021-04-09T13:32:23.429Z",
+    "updated_at": "2021-06-14T07:21:59.047Z",
    "pageName": "People",
    "visible": true
  },
@@ -2399,6 +2527,22 @@
    "pageName": "Handicap",
    "visible": true
  },
+  {
+    "name": "SignLanguageTwoHands",
+    "description": "",
+    "created_at": "2021-05-20T14:35:02.839Z",
+    "updated_at": "2021-05-20T14:35:02.839Z",
+    "pageName": "Handicap",
+    "visible": true
+  },
+  {
+    "name": "SignLanguageTwoHandsFilled",
+    "description": "",
+    "created_at": "2021-05-20T14:35:02.835Z",
+    "updated_at": "2021-05-21T11:39:15.041Z",
+    "pageName": "Handicap",
+    "visible": true
+  },
  {
    "name": "SingleParent",
    "description": "",
@@ -2479,6 +2623,22 @@
    "pageName": "Social media",
    "visible": true
  },
+  {
+    "name": "StopWatch",
+    "description": "",
+    "created_at": "2021-04-28T10:15:22.558Z",
+    "updated_at": "2021-04-28T10:15:22.558Z",
+    "pageName": "Jobs",
+    "visible": true
+  },
+  {
+    "name": "StopWatchFilled",
+    "description": "",
+    "created_at": "2021-04-28T10:15:22.563Z",
+    "updated_at": "2021-04-28T10:15:22.563Z",
+    "pageName": "Jobs",
+    "visible": true
+  },
  {
    "name": "Stroller",
    "description": "",
@@ -2731,7 +2891,7 @@
    "name": "VolumeDown",
    "description": "",
    "created_at": "2020-11-23T16:49:12.544Z",
-    "updated_at": "2021-04-27T15:19:17.237Z",
+    "updated_at": "2021-04-28T06:44:52.390Z",
    "pageName": "Fyrstikkalleen",
    "visible": true
  },
@@ -2739,7 +2899,7 @@
    "name": "VolumeDownFilled",
    "description": "",
    "created_at": "2021-01-28T14:00:38.534Z",
-    "updated_at": "2021-04-27T15:19:17.242Z",
+    "updated_at": "2021-04-28T06:44:52.394Z",
    "pageName": "Fyrstikkalleen",
    "visible": true
  },
@@ -2747,7 +2907,7 @@
    "name": "VolumeUp",
    "description": "",
    "created_at": "2020-11-23T16:49:12.553Z",
-    "updated_at": "2021-04-27T15:19:17.257Z",
+    "updated_at": "2021-04-28T06:44:52.404Z",
    "pageName": "Fyrstikkalleen",
    "visible": true
  },
@@ -2755,7 +2915,7 @@
    "name": "VolumeUpFilled",
    "description": "",
    "created_at": "2021-01-28T14:00:38.541Z",
-    "updated_at": "2021-04-27T15:19:17.247Z",
+    "updated_at": "2021-04-28T06:44:52.397Z",
    "pageName": "Fyrstikkalleen",
    "visible": true
  },
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-icons",
-  "version": "0.2.2",
+  "version": "0.3.3",
  "private": false,
  "description": "NAVs egne ikoner i SVG og React format",
  "repository": {
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 24V14H20V24H18Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 18L24 18L24 20L14 20L14 18Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 5C15 6.65685 13.6569 8 12 8C10.3431 8 9 6.65685 9 5C9 3.34315 10.3431 2 12 2C13.6569 2 15 3.34315 15 5ZM17 5C17 7.76142 14.7614 10 12 10C9.23858 10 7 7.76142 7 5C7 2.23858 9.23858 0 12 0C14.7614 0 17 2.23858 17 5ZM15.2322 14.185L16.8296 12.9329C15.5735 11.7353 13.8726 11 12 11C8.13401 11 5 14.134 5 18H7C7 15.2386 9.23858 13 12 13C13.2323 13 14.3606 13.4458 15.2322 14.185Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 10C14.7614 10 17 7.76142 17 5C17 2.23858 14.7614 0 12 0C9.23858 0 7 2.23858 7 5C7 7.76142 9.23858 10 12 10ZM12 16H16L16 12.2547C14.8662 11.4638 13.4873 11 12 11C8.13401 11 5 14.134 5 18H12V16ZM18 18H14V20H18V24H20V20H24V18H20V14H18V18Z" fill="#262626"/>
+</svg>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M5 2H19V22H5V2ZM3 24V0H21V24H3ZM12 7C12.5523 7 13 6.55228 13 6C13 5.44772 12.5523 5 12 5C11.4477 5 11 5.44772 11 6C11 6.55228 11.4477 7 12 7ZM15 6C15 6.98512 14.5252 7.85933 13.7919 8.40627C14.1761 8.59438 14.5286 8.84629 14.8352 9.15885C15.5388 9.87616 15.9518 10.8623 15.996 12H16V12.2051H14C14 11.4468 13.7476 10.9062 13.4074 10.5594C13.0647 10.21 12.5777 10 12 10C11.4223 10 10.9353 10.21 10.5926 10.5594C10.2524 10.9062 10 11.4468 10 12.2051H8V12H8.00397C8.04822 10.8623 8.46117 9.87616 9.16479 9.15885C9.47138 8.84629 9.82392 8.59438 10.2081 8.40627C9.47482 7.85933 9 6.98512 9 6C9 4.34315 10.3431 3 12 3C13.6569 3 15 4.34315 15 6ZM14 16H7V14H14V16ZM7 18V20H17V18H7Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 5C15 6.65685 13.6569 8 12 8C10.3431 8 9 6.65685 9 5C9 3.34315 10.3431 2 12 2C13.6569 2 15 3.34315 15 5ZM17 5C17 7.76142 14.7614 10 12 10C9.23858 10 7 7.76142 7 5C7 2.23858 9.23858 0 12 0C14.7614 0 17 2.23858 17 5ZM18 15.6034L20.517 17.7009L18 18.456L15.483 17.7009L18 15.6034ZM18 20.544L22 19.344V22H14V19.344L18 20.544ZM12 18.4684C12 18.1716 12.1318 17.8901 12.3598 17.7002L17.3598 13.5335C17.7307 13.2244 18.2693 13.2244 18.6402 13.5335L23.6402 17.7002C23.8682 17.8901 24 18.1716 24 18.4684V23C24 23.5523 23.5523 24 23 24H13C12.4477 24 12 23.5523 12 23V18.4684ZM12 13C9.23858 13 7 15.2386 7 18H5C5 14.134 8.13401 11 12 11C13.4274 11 14.7549 11.4272 15.8619 12.1608L14.2297 13.5235C13.5584 13.1885 12.8012 13 12 13Z" fill="#262626"/>
 </svg>
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0V24H21V0H3ZM13.7919 8.40627C14.5252 7.85933 15 6.98512 15 6C15 4.34315 13.6569 3 12 3C10.3431 3 9 4.34315 9 6C9 6.98512 9.47482 7.85933 10.2081 8.40627C9.82391 8.59437 9.47138 8.84629 9.16479 9.15885C8.46117 9.87616 8.04822 10.8623 8.00397 12H15.996C15.9518 10.8623 15.5388 9.87616 14.8352 9.15885C14.5286 8.84629 14.1761 8.59437 13.7919 8.40627ZM14 16H7V14H14V16ZM7 18V20H17V18H7Z" fill="#262626"/>
-</svg>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14 4H10C9.44772 4 9 4.44772 9 5V6H15V5C15 4.44772 14.5523 4 14 4ZM7 5V6H1C0.447715 6 0 6.44772 0 7V12C0 12.5523 0.447716 13 1 13H11V12C11 11.4477 11.4477 11 12 11C12.5523 11 13 11.4477 13 12V13H23C23.5523 13 24 12.5523 24 12V7C24 6.44772 23.5523 6 23 6H17V5C17 3.34315 15.6569 2 14 2H10C8.34315 2 7 3.34315 7 5ZM11 15V16C11 16.5523 11.4477 17 12 17C12.5523 17 13 16.5523 13 16V15H23V20C23 21.1046 22.1046 22 21 22H3C1.89543 22 1 21.1046 1 20V15H11Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 3H10C9.44772 3 9 3.44772 9 4V5H15V4C15 3.44772 14.5523 3 14 3ZM7 4V5H1C0.447715 5 0 5.44772 0 6V12C0 12.5523 0.447716 13 1 13H11V12C11 11.4477 11.4477 11 12 11C12.5523 11 13 11.4477 13 12V13H23C23.5523 13 24 12.5523 24 12V6C24 5.44772 23.5523 5 23 5H17V4C17 2.34315 15.6569 1 14 1H10C8.34315 1 7 2.34315 7 4ZM11 15V16C11 16.5523 11.4477 17 12 17C12.5523 17 13 16.5523 13 16V15H23V21C23 22.1046 22.1046 23 21 23H3C1.89543 23 1 22.1046 1 21V15H11Z" fill="#262626"/>
 </svg>
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7 6C7 7.10457 6.10457 8 5 8C3.89543 8 3 7.10457 3 6C3 4.89543 3.89543 4 5 4C6.10457 4 7 4.89543 7 6ZM9 6C9 8.20914 7.20914 10 5 10C2.79086 10 1 8.20914 1 6C1 3.79086 2.79086 2 5 2C7.20914 2 9 3.79086 9 6ZM2 16.3651C2 15.2417 2.36855 14.4086 2.89284 13.8627C3.4182 13.3156 4.15299 13 5 13C5.84701 13 6.5818 13.3156 7.10716 13.8627C7.63145 14.4086 8 15.2417 8 16.3651V23H10V16.3651C10 14.7884 9.47312 13.4389 8.5497 12.4774C7.62734 11.5169 6.36213 11 5 11C3.63787 11 2.37266 11.5169 1.4503 12.4774C0.526881 13.4389 0 14.7884 0 16.3651V23H2V16.3651ZM17 16V14H14V20H22V16H17ZM12 13V21C12 21.5523 12.4477 22 13 22H23C23.5523 22 24 21.5523 24 21V15C24 14.4477 23.5523 14 23 14H19V13C19 12.4477 18.5523 12 18 12H13C12.4477 12 12 12.4477 12 13ZM23 3H13V10H15V5H21V12H23V3Z" fill="#262626"/>
-</svg>
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9 6C9 8.20914 7.20914 10 5 10C2.79086 10 1 8.20914 1 6C1 3.79086 2.79086 2 5 2C7.20914 2 9 3.79086 9 6ZM0 16.3651V23H10V16.3651C10 14.7884 9.47312 13.4389 8.5497 12.4774C7.62734 11.5169 6.36213 11 5 11C3.63787 11 2.37266 11.5169 1.4503 12.4774C0.526881 13.4389 0 14.7884 0 16.3651ZM12 13V21C12 21.5523 12.4477 22 13 22H23C23.5523 22 24 21.5523 24 21V15C24 14.4477 23.5523 14 23 14H19V13C19 12.4477 18.5523 12 18 12H13C12.4477 12 12 12.4477 12 13ZM23 3H13V10H15H18H19C20.1046 10 21 10.8954 21 12H23V3Z" fill="#262626"/>
-</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.75 8.5C13.5449 8.5 15 7.04493 15 5.25C15 3.45507 13.5449 2 11.75 2C9.95504 2 8.49996 3.45507 8.49996 5.25C8.49996 7.04493 9.95504 8.5 11.75 8.5ZM11.75 10.5C14.6495 10.5 17 8.1495 17 5.25C17 2.35051 14.6495 0 11.75 0C8.85047 0 6.49996 2.35051 6.49996 5.25C6.49996 8.1495 8.85047 10.5 11.75 10.5ZM17.0996 13.9384C15.752 12.5057 13.8388 11.6111 11.7166 11.6111C7.63588 11.6111 4.32776 14.9192 4.32776 19H6.43887C6.43887 16.0852 8.80181 13.7222 11.7166 13.7222C13.2558 13.7222 14.6411 14.3811 15.6059 15.4322L17.0996 13.9384ZM20.8991 17.4659L16.8884 21.4766L15.2352 21.7648L15.5234 20.1116L19.534 16.1009C19.911 15.7239 20.5221 15.7239 20.8991 16.1009C21.276 16.4778 21.276 17.089 20.8991 17.4659ZM22.1847 18.7516L17.7673 23.169L13 24L13.831 19.2327L18.2484 14.8152C19.3354 13.7283 21.0977 13.7283 22.1847 14.8152C23.2717 15.9022 23.2717 17.6646 22.1847 18.7516Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17 5.25C17 8.1495 14.6495 10.5 11.75 10.5C8.85047 10.5 6.49996 8.1495 6.49996 5.25C6.49996 2.35051 8.85047 0 11.75 0C14.6495 0 17 2.35051 17 5.25ZM11.6618 11.6111C7.58101 11.6111 4.27289 14.9192 4.27289 19H14.4367L18.0873 15.3494C16.8161 13.1167 14.4148 11.6111 11.6618 11.6111ZM22.3478 16.6522C21.4782 15.7826 20.0683 15.7826 19.1987 16.6522L15.4065 20.4444L15 24L18.5555 23.5935L22.3478 19.8013C23.2174 18.9317 23.2174 17.5218 22.3478 16.6522Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 6C13 8.20914 11.2091 10 9 10C6.79086 10 5 8.20914 5 6C5 3.79086 6.79086 2 9 2C11.2091 2 13 3.79086 13 6ZM15 6C15 9.31371 12.3137 12 9 12C5.68629 12 3 9.31371 3 6C3 2.68629 5.68629 0 9 0C12.3137 0 15 2.68629 15 6ZM2 22C2 18.134 5.13401 15 9 15C12.866 15 16 18.134 16 22V24H18V22C18 17.0294 13.9706 13 9 13C4.02944 13 0 17.0294 0 22V24H2V22ZM19 7C19 5.34315 17.6569 4 16 4V2C18.7614 2 21 4.23858 21 7C21 8.90071 19.9394 10.5537 18.3778 11.3995C21.6942 12.5511 24 16.0483 24 20H22C22 16.0044 19.1925 13 16 13V12V11V10C17.6569 10 19 8.65685 19 7Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 6C15 9.31371 12.3137 12 9 12C5.68629 12 3 9.31371 3 6C3 2.68629 5.68629 0 9 0C12.3137 0 15 2.68629 15 6ZM0 22V24H18V22C18 17.0294 13.9706 13 9 13C4.02944 13 0 17.0294 0 22ZM19 7C19 5.34315 17.6569 4 16 4V2C18.7614 2 21 4.23858 21 7C21 8.90071 19.9394 10.5537 18.3778 11.3995C21.6942 12.5511 24 16.0483 24 20H22C22 16.0044 19.1925 13 16 13V12V11V10C17.6569 10 19 8.65685 19 7Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 8C13.6569 8 15 6.65685 15 5C15 3.34315 13.6569 2 12 2C10.3431 2 9 3.34315 9 5C9 6.65685 10.3431 8 12 8ZM12 10C14.7614 10 17 7.76142 17 5C17 2.23858 14.7614 0 12 0C9.23858 0 7 2.23858 7 5C7 7.76142 9.23858 10 12 10ZM14.0829 21.0029L21.2929 13.7929L22.7071 15.2071L13.9171 23.9971L11.2191 20.6247L12.7809 19.3753L14.0829 21.0029ZM12 13C9.23858 13 7 15.2386 7 18H5C5 14.134 8.13401 11 12 11C14.5234 11 16.735 12.3353 17.9667 14.3378L16.4956 15.8089C15.6835 14.1457 13.9755 13 12 13Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17 5C17 7.76142 14.7614 10 12 10C9.23858 10 7 7.76142 7 5C7 2.23858 9.23858 0 12 0C14.7614 0 17 2.23858 17 5ZM12 11C8.13401 11 5 14.134 5 18H14.3045L17.9667 14.3378C16.735 12.3353 14.5234 11 12 11ZM21.2929 13.7929L14.0829 21.0029L12.7809 19.3753L11.2191 20.6247L13.9171 23.9971L22.7071 15.2071L21.2929 13.7929Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9997 7.99978C13.6565 7.99978 14.9996 6.65667 14.9996 4.99986C14.9996 3.34305 13.6565 1.99995 11.9997 1.99995C10.3429 1.99995 8.99975 3.34305 8.99975 4.99986C8.99975 6.65667 10.3429 7.99978 11.9997 7.99978ZM11.9997 9.99973C14.761 9.99973 16.9995 7.76121 16.9995 4.99986C16.9995 2.23851 14.761 0 11.9997 0C9.23832 0 6.99981 2.23851 6.99981 4.99986C6.99981 7.76121 9.23832 9.99973 11.9997 9.99973ZM18.4436 18.8862L15.4212 15.0002L16.9998 13.7724L19.7104 17.2574L22.421 13.7724L23.9996 15.0002L20.9772 18.8862L23.9996 22.7721L22.421 24L19.7104 20.515L16.9998 24L15.4211 22.7722L18.4436 18.8862ZM14.1342 13.4769L15.8355 12.1433C14.7339 11.4203 13.4159 10.9997 11.9997 10.9997C8.13378 10.9997 4.99986 14.1336 4.99986 17.9995H6.99981C6.99981 15.2382 9.23832 12.9996 11.9997 12.9996C12.7632 12.9996 13.4868 13.1708 14.1342 13.4769Z" fill="#262626"/>
+</svg>
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3.35447 4.79411L7.95487 0L9.39794 1.38476L3.44279 7.59065L0 4.42891L1.35281 2.95585L3.35447 4.79411ZM14 10C14 11.1046 13.1046 12 12 12C10.8954 12 10 11.1046 10 10C10 8.89543 10.8954 8 12 8C13.1046 8 14 8.89543 14 10ZM16 10C16 12.2091 14.2091 14 12 14C9.79086 14 8 12.2091 8 10C8 7.79086 9.79086 6 12 6C14.2091 6 16 7.79086 16 10ZM9 20.4444C9 19.2913 9.37201 18.4362 9.89905 17.8774C10.426 17.3188 11.1589 17 12 17C12.8411 17 13.574 17.3188 14.101 17.8774C14.628 18.4362 15 19.2913 15 20.4444V24H17V20.4444C17 18.8484 16.4766 17.4813 15.5559 16.5052C14.6351 15.5289 13.3681 15 12 15C10.6319 15 9.36488 15.5289 8.4441 16.5052C7.52342 17.4813 7 18.8484 7 20.4444V24H9V20.4444ZM18.0446 7.64282L20.2852 5.29046L22.5258 7.64282L24 6.25L21.6826 3.82336L23.9922 1.39844L22.5391 0L20.2852 2.36014L18.0312 0L16.5781 1.39844L18.8878 3.82336L16.5704 6.25L18.0446 7.64282Z" fill="#262626"/>
-</svg>
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3.35447 4.79411L7.95487 0L9.39794 1.38476L3.44279 7.59065L0 4.42891L1.35281 2.95585L3.35447 4.79411ZM15.9844 10C15.9844 12.2091 14.1935 14 11.9844 14C9.77524 14 7.98438 12.2091 7.98438 10C7.98438 7.79086 9.77524 6 11.9844 6C14.1935 6 15.9844 7.79086 15.9844 10ZM6.98438 20.4444V24H16.9844V20.4444C16.9844 18.8484 16.461 17.4813 15.5403 16.5052C14.6195 15.5289 13.3524 15 11.9844 15C10.6163 15 9.34926 15.5289 8.42847 16.5052C7.50779 17.4813 6.98438 18.8484 6.98438 20.4444ZM18.0446 7.64282L20.2852 5.29046L22.5258 7.64282L24 6.25L21.6826 3.82336L23.9922 1.39844L22.5391 0L20.2852 2.36014L18.0312 0L16.5781 1.39844L18.8878 3.82336L16.5704 6.25L18.0446 7.64282Z" fill="#262626"/>
-</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 1V4H19.4648C19.7992 4 20.1114 4.1671 20.2969 4.4453L24 10L20.2969 15.5547C20.1114 15.8329 19.7992 16 19.4648 16H13V24H11V16H0.934253C0.534905 16 0.296708 15.5549 0.518226 15.2227L3.99999 10L0.518226 4.77735C0.296708 4.44507 0.534904 4 0.934252 4H11V1C11 0.447715 11.4477 0 12 0C12.5523 0 13 0.447715 13 1ZM3.73703 6L6.40369 10L3.73703 14H18.9296L21.5963 10L18.9296 6H3.73703Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 1V3H11V1C11 0.447715 11.4477 0 12 0C12.5523 0 13 0.447715 13 1ZM0.518226 4.77735C0.296708 4.44507 0.534904 4 0.934252 4H19.4648C19.7992 4 20.1114 4.1671 20.2969 4.4453L24 10L20.2969 15.5547C20.1114 15.8329 19.7992 16 19.4648 16H0.934253C0.534905 16 0.296708 15.5549 0.518226 15.2227L3.99999 10L0.518226 4.77735ZM11 17V24H13V17H11Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.0007 7.2676C16.3815 6.91044 16 6.24996 16 5.53513V2H13.6291C13.4207 4.37363 11.4277 6.23529 9 6.23529C6.57226 6.23529 4.57934 4.37363 4.37093 2H2V16H5.53513C6.24996 16 6.91044 16.3815 7.2676 17.0007C7.62475 17.6199 7.62428 18.3827 7.26634 19.0015C7.09735 19.2936 7 19.6324 7 20C7 21.1046 7.89543 22 9 22C10.1046 22 11 21.1046 11 20C11 19.6324 10.9027 19.2936 10.7337 19.0015C10.3757 18.3827 10.3752 17.6199 10.7324 17.0007C11.0896 16.3815 11.75 16 12.4649 16H16V12.4649C16 11.75 16.3815 11.0896 17.0007 10.7324C17.6199 10.3752 18.3827 10.3757 19.0015 10.7337C19.2936 10.9027 19.6324 11 20 11C21.1046 11 22 10.1046 22 9C22 7.89543 21.1046 7 20 7C19.6324 7 19.2936 7.09735 19.0015 7.26634C18.3827 7.62428 17.6199 7.62475 17.0007 7.2676ZM13.6479 1.619C13.6479 1.61901 13.6478 1.61946 13.6473 1.62036L13.6479 1.619ZM18 1.05882C18 0.474051 17.5259 0 16.9412 0H12.8214C12.1198 0 11.6471 0.886695 11.6471 1.58824C11.6471 3.05017 10.4619 4.23529 9 4.23529C7.53807 4.23529 6.35294 3.05017 6.35294 1.58824C6.35294 0.886695 5.88017 0 5.17863 0H1.05882C0.474051 0 0 0.474051 0 1.05882V16.9412C0 17.5259 0.474051 18 1.05882 18H5.53513C5.19479 18.5883 5 19.2714 5 20C5 22.2091 6.79086 24 9 24C11.2091 24 13 22.2091 13 20C13 19.2714 12.8052 18.5883 12.4649 18H16.9412C17.5259 18 18 17.5259 18 16.9412V12.4649C18.5883 12.8052 19.2714 13 20 13C22.2091 13 24 11.2091 24 9C24 6.79086 22.2091 5 20 5C19.2714 5 18.5883 5.19479 18 5.53513V1.05882Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 4.23529C10.4619 4.23529 11.6471 3.05017 11.6471 1.58824C11.6471 0.886695 12.1198 0 12.8214 0H16.9412C17.5259 0 18 0.474052 18 1.05882V5.53513C18.5883 5.19479 19.2714 5 20 5C22.2091 5 24 6.79086 24 9C24 11.2091 22.2091 13 20 13C19.2714 13 18.5883 12.8052 18 12.4649V16.9412C18 17.5259 17.5259 18 16.9412 18H12.4649C12.8052 18.5883 13 19.2714 13 20C13 22.2091 11.2091 24 9 24C6.79086 24 5 22.2091 5 20C5 19.2714 5.19479 18.5883 5.53513 18H1.05882C0.474051 18 0 17.5259 0 16.9412V1.05882C0 0.474051 0.474052 0 1.05882 0H5.17863C5.88017 0 6.35294 0.886695 6.35294 1.58824C6.35294 3.05017 7.53807 4.23529 9 4.23529Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 0H20V10H18V2H6V7H4V0ZM10.5556 14V11H4V22H20V14H10.5556ZM2 10V23C2 23.5523 2.44772 24 3 24H21C21.5523 24 22 23.5523 22 23V13C22 12.4477 21.5523 12 21 12H12.5556V10C12.5556 9.44772 12.1078 9 11.5556 9H3C2.44772 9 2 9.44772 2 10ZM8 6H16V4H8V6Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 23V10C2 9.44772 2.44772 9 3 9H11.5556C12.1078 9 12.5556 9.44772 12.5556 10V12H21C21.5523 12 22 12.4477 22 13V23C22 23.5523 21.5523 24 21 24H3C2.44772 24 2 23.5523 2 23Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 0H20V10H14V9C14 7.89543 13.1046 7 12 7H4V0ZM8 5H16V3H8V5Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.13102 0H14.8325L21.6878 5.71281V16.0077C21.6878 17.2031 21.3186 18.3123 20.6879 19.2273L25 23.5395L23.5395 25L19.2273 20.6879C18.3123 21.3186 17.2031 21.6878 16.0077 21.6878H4.13102V0ZM19.6223 8.26204V11.6259C18.6402 10.8148 17.3809 10.3275 16.0077 10.3275C12.8706 10.3275 10.3275 12.8706 10.3275 16.0077C10.3275 17.3809 10.8148 18.6402 11.6259 19.6223H6.19653V2.06551H12.3931V8.26204H19.6223ZM19.6223 16.0077C19.6223 18.004 18.004 19.6223 16.0077 19.6223C14.0114 19.6223 12.3931 18.004 12.3931 16.0077C12.3931 14.0114 14.0114 12.3931 16.0077 12.3931C18.004 12.3931 19.6223 14.0114 19.6223 16.0077ZM14.4586 2.3771V6.19653H19.0419L14.4586 2.3771Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.13102 0H14.8325L21.6878 5.71281V16.0077C21.6878 17.2031 21.3186 18.3123 20.6879 19.2273L25 23.5395L23.5395 25L19.2273 20.6879C18.3123 21.3186 17.2031 21.6878 16.0077 21.6878H4.13102V0ZM19.6223 16.0077C19.6223 14.0114 18.004 12.3931 16.0077 12.3931C14.0114 12.3931 12.3931 14.0114 12.3931 16.0077C12.3931 18.004 14.0114 19.6223 16.0077 19.6223C18.004 19.6223 19.6223 18.004 19.6223 16.0077ZM14.4586 2.3771V6.19653H19.0419L14.4586 2.3771Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.8782 2.55164C14.5221 0.525043 18.2832 0.44271 21.04 2.54645C24.7767 5.39801 25.0135 10.9328 21.5339 14.092L21.4473 14.1707C21.3995 14.7825 21.138 15.3811 20.6615 15.8449C20.2053 16.289 19.6274 16.5344 19.0367 16.5805C18.9509 17.0274 18.7398 17.4559 18.401 17.8101L18.3569 17.8562C17.9703 18.2603 17.4774 18.502 16.9637 18.5789C16.8949 19.0522 16.6898 19.5108 16.3457 19.892C15.9127 20.3716 15.3375 20.6435 14.7435 20.7036C14.663 21.2227 14.431 21.7241 14.0421 22.1374C13.0077 23.2366 11.2735 23.286 10.178 22.2474L2.63895 15.1011C-0.334695 12.2823 -0.84583 7.72291 1.36331 4.29332C3.68982 0.681511 8.63769 -0.0622641 11.8782 2.55164ZM20.6808 12.1031C22.7043 9.73581 22.376 6.08317 19.8237 4.13548C17.4612 2.33267 14.0942 2.71641 12.1994 5.00442L8.82301 9.0816L9.98237 10.1215C10.3854 10.483 11.0033 10.4589 11.3769 10.0672L14.7099 6.57259L15.4284 7.25576L15.4465 7.23622L20.6177 12.0425C20.6392 12.0625 20.6602 12.0827 20.6808 12.1031ZM14.8063 9.37162L19.2561 13.5075C19.5176 13.7505 19.5223 14.1628 19.2666 14.4117C19.0262 14.6456 18.644 14.6478 18.4011 14.4165L16.2833 12.4006L14.9044 13.8492L16.9302 15.7776L16.9294 15.7786C17.1204 15.9484 17.1324 16.2429 16.9557 16.4277L16.9116 16.4737C16.7494 16.6433 16.4808 16.6505 16.3098 16.4898L16.3031 16.497C16.2672 16.4592 16.2299 16.4224 16.1912 16.3864L14.2118 14.5484L12.8509 16.014L14.8303 17.852C15.0302 18.0376 15.0439 18.3494 14.8611 18.5518C14.696 18.7347 14.4274 18.7663 14.2268 18.641C14.13 18.5125 14.0205 18.391 13.8985 18.2782L13.8693 18.3097L12.165 16.657L10.7727 18.0928L12.705 19.9666C12.8302 20.2315 12.7885 20.5551 12.5835 20.7729C12.3085 21.0652 11.8473 21.0784 11.556 20.8022L4.01698 13.6558C1.74961 11.5065 1.34735 8.00822 3.04612 5.37095C4.6914 2.81673 8.13134 2.26339 10.4532 3.97454L7.2793 7.80714C6.5947 8.63383 6.68519 9.85258 7.48442 10.5694L8.64378 11.6093C9.85292 12.6938 11.7066 12.6216 12.8275 11.4464L14.8063 9.37162Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.00966 7.69902L10.4929 3.17357C10.7697 2.81386 11.0777 2.49229 11.41 2.20971C8.17802 0.018759 3.5804 0.85612 1.36332 4.29804C-0.845834 7.72765 -0.334697 12.287 2.63896 15.1058L10.178 22.2522C11.2736 23.2908 13.0078 23.2414 14.0421 22.1422C14.431 21.7289 14.6631 21.2275 14.7436 20.7084C15.3376 20.6483 15.9128 20.3764 16.3457 19.8968C16.6899 19.5156 16.895 19.057 16.9637 18.5837C17.4775 18.5068 17.9704 18.2651 18.357 17.861L18.401 17.8149C18.7399 17.4607 18.951 17.0321 19.0368 16.5853C19.6275 16.5392 20.2054 16.2938 20.6616 15.8497C21.1381 15.3859 21.4259 14.8774 21.4474 14.1754C21.4689 13.4734 21.0626 13.0359 21.0626 13.0359L17.5861 9.06919L16.375 7.71875L13.5162 10.7833C12.4104 11.9687 10.5628 12.0612 9.34409 10.992L7.14262 9.06068C6.74616 8.71287 6.68797 8.11695 7.00966 7.69902ZM11.8334 3.67844L9.00765 7.43908C8.70103 7.84714 8.75094 8.42061 9.12342 8.76958L9.97504 9.56741C10.7823 10.3237 12.05 10.2811 12.8047 9.47234L16.4531 5.5625L22.0625 12.1875C24.8854 9.47881 24.5841 4.87943 21.4319 2.5622L21.0946 2.31429C18.1555 0.153665 14.0247 0.762115 11.8334 3.67844Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19 2H5V22H19V2ZM3 0V24H21V0H3ZM13 7C13 7.55228 12.5523 8 12 8C11.4477 8 11 7.55228 11 7C11 6.44772 11.4477 6 12 6C12.5523 6 13 6.44772 13 7ZM15 7C15 8.65685 13.6569 10 12 10C10.3431 10 9 8.65685 9 7C9 5.34315 10.3431 4 12 4C13.6569 4 15 5.34315 15 7ZM12 10C13.0792 10 14.0921 10.4013 14.8352 11.1588C15.5388 11.8762 15.9518 12.8623 15.996 14H16V14.2051H14C14 13.4468 13.7476 12.9062 13.4074 12.5594C13.0647 12.21 12.5777 12 12 12C11.4223 12 10.9353 12.21 10.5926 12.5594C10.2524 12.9062 10 13.4468 10 14.2051H8V14H8.00397C8.04822 12.8623 8.46117 11.8762 9.16479 11.1588C9.90787 10.4013 10.9208 10 12 10ZM7 17V19H17V17H7Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0V24H21V0H3ZM12 10C13.6569 10 15 8.65685 15 7C15 5.34315 13.6569 4 12 4C10.3431 4 9 5.34315 9 7C9 8.65685 10.3431 10 12 10ZM12 10C10.9208 10 9.90787 10.4013 9.16479 11.1588C8.46117 11.8762 8.04822 12.8623 8.00397 14H15.996C15.9518 12.8623 15.5388 11.8762 14.8352 11.1588C14.0921 10.4013 13.0792 10 12 10ZM7 17V19H17V17H7Z" fill="#262626"/>
+</svg>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10 2H14V3H13H11H10V2ZM8 3.58152V2C8 0.89543 8.89543 0 10 0H14C15.1046 0 16 0.895431 16 2V3.58152C18.9318 4.76829 21 7.64262 21 11V20C21 22.2091 19.2091 24 17 24H7C4.79086 24 3 22.2091 3 20V11C3 7.64262 5.06817 4.76829 8 3.58152ZM2 22V20V15V13C0.895431 13 0 13.8954 0 15V20C0 21.1046 0.895431 22 2 22ZM22 20V22C23.1046 22 24 21.1046 24 20V15C24 13.8954 23.1046 13 22 13V15V20ZM9 8C8.44772 8 8 8.44772 8 9C8 9.55228 8.44772 10 9 10H15C15.5523 10 16 9.55228 16 9C16 8.44772 15.5523 8 15 8H9ZM9 15H15V18H9V15ZM7 15C7 13.8954 7.89543 13 9 13H15C16.1046 13 17 13.8954 17 15V18C17 19.1046 16.1046 20 15 20H9C7.89543 20 7 19.1046 7 18V15Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 2H14V3H13H11H10V2ZM8 3.58152V2C8 0.89543 8.89543 0 10 0H14C15.1046 0 16 0.895431 16 2V3.58152C18.9318 4.76829 21 7.64262 21 11V13H22C23.1046 13 24 13.8954 24 15V20C24 21.1046 23.1046 22 22 22H20.4649C19.7733 23.1956 18.4806 24 17 24H7C5.51944 24 4.22675 23.1956 3.53513 22H2C0.89543 22 0 21.1046 0 20V15C0 13.8954 0.895431 13 2 13H3V11C3 7.64262 5.06817 4.76829 8 3.58152ZM19 20V13V11C19 7.68629 16.3137 5 13 5H11C7.68629 5 5 7.68629 5 11V13V20C5 21.1046 5.89543 22 7 22H17C18.1046 22 19 21.1046 19 20ZM21 15V20H22V15H21ZM2 15H3V20H2L2 15ZM15 15H9V18H15V15ZM9 13C7.89543 13 7 13.8954 7 15V18C7 19.1046 7.89543 20 9 20H15C16.1046 20 17 19.1046 17 18V15C17 13.8954 16.1046 13 15 13H9ZM9 8C8.44772 8 8 8.44772 8 9C8 9.55228 8.44772 10 9 10H15C15.5523 10 16 9.55228 16 9C16 8.44772 15.5523 8 15 8H9Z" fill="#262626"/>
 </svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.2759 0.794191C16.307 -0.244097 14.667 -0.26221 13.6754 0.754417L9.74143 4.78747C9.649 3.25296 8.37333 2 6.77509 2C5.8588 2 5.06149 2.62698 4.84543 3.51743L4.0564 6.76929C4.01893 6.9237 4 7.08201 4 7.24089V12H6V7.24089L6.78636 4.00006C7.36372 4.00658 7.80905 4.51343 7.73931 5.08828L7.50726 7.00087C7.46893 7.31686 7.58332 7.63224 7.81533 7.85018L7.85281 7.88538C8.73673 8.71568 9.02192 10.0026 8.57152 11.1286L10.4285 11.8714C11.0294 10.3691 10.8502 8.69616 10.0063 7.37311C10.0317 7.35181 10.0562 7.32906 10.0798 7.30485L15.1071 2.15093C15.3017 1.9514 15.6236 1.95495 15.8137 2.15873C15.9899 2.34745 15.9887 2.64064 15.8111 2.82797L12.8809 5.91858C12.5009 6.31936 12.5178 6.9523 12.9186 7.33229C13.3194 7.71227 13.9523 7.69541 14.3323 7.29462L14.9911 6.59976L15.009 6.61825L19.1448 2.6177C19.352 2.41722 19.6799 2.41381 19.8912 2.60994C20.1205 2.82265 20.123 3.18461 19.8967 3.40048L15.3097 7.77646C14.9226 8.14579 14.8947 8.75443 15.2465 9.15755L16.3105 10.3767C17.0272 11.1979 16.9544 12.4418 16.1467 13.1737L15.3284 13.9153L16.6715 15.3973L17.4897 14.6557C19.1051 13.1918 19.2508 10.7041 17.8174 9.06162L17.3824 8.56324L21.2773 4.84759C22.3374 3.83619 22.3257 2.1404 21.2516 1.14381C20.2612 0.224952 18.7253 0.24092 17.7543 1.18017L17.6377 1.29292C17.5403 1.11595 17.4197 0.948242 17.2759 0.794191ZM2 17.6C2 16.195 3.18687 15 4.72128 15C5.75299 15 6.65937 15.5443 7.11914 16.3132L7.41022 16.8H12.1638C12.6707 16.8 13.0245 17.1891 13.0245 17.6C13.0245 18.0109 12.6707 18.4 12.1638 18.4H8.44257V20.4H12.1638C13.254 20.4 14.2271 19.794 14.7076 18.8848L21.2144 17.6647C21.4524 17.6201 21.6958 17.7091 21.8489 17.8968C22.1318 18.2435 21.996 18.7652 21.58 18.93L13.9948 21.9361C13.8883 21.9783 13.7747 22 13.6601 22H2V17.6ZM20.8458 15.699L14.9105 16.8119C14.5597 15.6334 13.4423 14.8 12.1638 14.8H8.49893C7.62226 13.6954 6.23291 13 4.72128 13C2.14528 13 0 15.0285 0 17.6V24H13.6601C14.027 24 14.3906 23.9306 14.7317 23.7954L22.3169 20.7893C23.9904 20.1261 24.5366 18.0274 23.3987 16.6325C22.7827 15.8775 21.8035 15.5194 20.8458 15.699Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.6641 5.80415L17.8422 2.51184C18.3901 1.94435 18.3975 1.04755 17.8592 0.47103C17.2817 -0.147543 16.3041 -0.158336 15.713 0.447334L10.6778 5.60681L10.6838 5.61275L10.5592 5.73844L10.3805 7.06235C11.7946 8.32246 12.5209 10.1515 12.3976 11.9956H11.3944C11.4081 11.8237 11.4131 11.6519 11.4093 11.4808C11.3789 10.0731 10.7615 8.71373 9.66169 7.76072C9.47276 7.597 9.36744 7.35937 9.3703 7.11283C9.37077 7.07911 9.37325 7.04523 9.37782 7.01135L9.70581 4.58006C9.86396 3.40852 8.95297 2.36629 7.7708 2.36629C7.3203 2.36629 6.9283 2.67454 6.82205 3.11233L6.03079 6.37284C6.01205 6.45005 6.00258 6.52922 6.00258 6.60867V14.166C7.00096 14.4358 7.88069 15.0135 8.50257 15.7969H10.38L10.3809 15.7938H11.4246L11.4237 15.7969H12.1694C13.3803 15.7969 14.4469 16.5442 14.8549 17.6241L14.9727 17.6054L18.0422 14.6519C19.7068 13.0502 19.6718 10.376 17.9657 8.81844L17.2628 8.17671L22.3435 2.88855C22.8886 2.32118 22.895 1.42691 22.3581 0.851822C21.7795 0.23219 20.7997 0.223126 20.2098 0.831949L15.0503 6.15674L14.6641 5.80415Z" fill="#262626"/>
+<path d="M12.1696 16.7973H7.98101C7.33725 15.7209 6.10132 14.9967 4.72321 14.9967C2.66694 14.9967 1 16.609 1 18.5979V23.9999H13.6667C13.9076 23.9999 14.1462 23.9543 14.3701 23.8656L21.9393 20.8664C22.9944 20.4483 23.3388 19.1251 22.6213 18.2457C22.2434 17.7825 21.6476 17.5554 21.0573 17.6494L15.101 18.5979C15.101 20.1656 13.8302 21.4365 12.2625 21.4365H8.44641V20.3986H12.1696C13.1978 20.3986 14.0312 19.5924 14.0312 18.5979C14.0312 17.6035 13.1978 16.7973 12.1696 16.7973Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 2H13V4.04938C18.0533 4.5511 22 8.81465 22 14C22 19.5228 17.5228 24 12 24C6.47715 24 2 19.5228 2 14C2 8.81465 5.94668 4.5511 11 4.04938V2H9V0H15V2ZM20 14C20 18.4183 16.4183 22 12 22C7.58172 22 4 18.4183 4 14C4 9.58172 7.58172 6 12 6C16.4183 6 20 9.58172 20 14ZM19 4L22 7L23.4142 5.58579L20.4142 2.58579L19 4ZM9 10H11V18H9L9 10ZM15 10H13V18H15V10Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 2H15V0H9V2H11V4.04938C5.94668 4.5511 2 8.81465 2 14C2 19.5228 6.47715 24 12 24C17.5228 24 22 19.5228 22 14C22 8.81465 18.0533 4.5511 13 4.04938V2ZM22 7L19 4L20.4142 2.58578L23.4142 5.58578L22 7ZM9 18H11V10H9V18ZM13 18H15V10H13V18Z" fill="#262626"/>
+</svg>
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14 4H10C9.44772 4 9 4.44772 9 5V6H15V5C15 4.44772 14.5523 4 14 4ZM7 5V6H1C0.447715 6 0 6.44772 0 7V13C0 13.7403 0.402199 14.3866 1 14.7324V20C1 21.1046 1.89543 22 3 22H21C22.1046 22 23 21.1046 23 20V14.7324C23.5978 14.3866 24 13.7403 24 13V7C24 6.44772 23.5523 6 23 6H17V5C17 3.34315 15.6569 2 14 2H10C8.34315 2 7 3.34315 7 5ZM7 8H17H22V13H13V12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12V13H2L2 8H7ZM11 15H3L3 20H21V15H13V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V15Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 3H10C9.44772 3 9 3.44772 9 4V5H15V4C15 3.44772 14.5523 3 14 3ZM7 4V5H1C0.447715 5 0 5.44772 0 6V13C0 13.7403 0.402199 14.3866 1 14.7324V21C1 22.1046 1.89543 23 3 23H21C22.1046 23 23 22.1046 23 21V14.7324C23.5978 14.3866 24 13.7403 24 13V6C24 5.44772 23.5523 5 23 5H17V4C17 2.34315 15.6569 1 14 1H10C8.34315 1 7 2.34315 7 4ZM7 7H17H22V13H13V12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12V13H2L2 7H7ZM11 15H3L3 21H21V15H13V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V15Z" fill="#262626"/>
 </svg>
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "0.2.14",
+  "version": "0.6.3",
  "private": false,
  "description": "NAV designsystem react components",
  "author": "NAV Designsystem team",
@@ -34,7 +34,7 @@
    "watch": "tsc --watch -p tsconfig-esm.json"
  },
  "dependencies": {
-    "@navikt/ds-icons": "^0.2.2",
+    "@navikt/ds-icons": "^0.3.3",
    "@popperjs/core": "^2.5.4",
    "classnames": "^2.2.6",
    "copy-to-clipboard": "^3.3.1",
@@ -1,6 +1,6 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import { AccordionMenu as BaseAccordionMenu } from "../accordion-menu";
-import { Heading } from "../index";
+import { Title } from "../index";
 import { ActiveAnchorProvider } from "./ActiveAnchorStore";
 import cl from "classnames";

@@ -21,13 +21,9 @@ const AccordionAnchorMenu = forwardRef<
    {...rest}
  >
    {title && (
-      <Heading
-        level={2}
-        size="medium"
-        className="navds-accordion-anchor-menu__title"
-      >
+      <Title level={2} size="m" className="navds-accordion-anchor-menu__title">
        {title}
-      </Heading>
+      </Title>
    )}
    <ActiveAnchorProvider>
      <BaseAccordionMenu aria-label={title || "Meny"}>
@@ -13,7 +13,11 @@ export interface ActiveAnchorStore {
 }

 export const ActiveAnchorContext = createContext({} as ActiveAnchorStore);
-export const ActiveAnchorProvider = ({ children }) => {
+export const ActiveAnchorProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
  const [anchors, setAnchors] = useState<string[]>([]);
  const [activeAnchor, setActiveAnchor] = useState<string>();

@@ -21,7 +25,7 @@ export const ActiveAnchorProvider = ({ children }) => {
    const scrollListener = () => {
      const offset = 100;
      const lastPassedAnchor = anchors
-        .map((anchor) => document.getElementById(anchor))
+        .map((anchor) => document.getElementById(anchor) as HTMLElement)
        .map((element: HTMLElement) => ({
          id: element.id,
          top: element.getBoundingClientRect().top - offset,
@@ -40,7 +44,7 @@ export const ActiveAnchorProvider = ({ children }) => {
        const urlWithoutHash = href.replace(hash, "");
        const urlWithAnchor = `${urlWithoutHash}#${lastPassedAnchor}`;
        const title = document.title;
-        window.history.pushState(lastPassedAnchor, title, urlWithAnchor);
+        window.history.replaceState(window.history.state, title, urlWithAnchor);
        setActiveAnchor(lastPassedAnchor);
      }
    };
@@ -4,8 +4,11 @@ import {
  AccordionAnchorMenuCollapsable as Collapsable,
  AccordionAnchorMenuItem as Item,
 } from "../index";
-import { useEffect } from "react";
-import { ProductPageLayout } from "../../index";
+import {
+  ProductPageLayout as Layout,
+  ProductPageSection as Section,
+  ProductPagePanel as Panel,
+} from "../../index";
 import { Right } from "../../layouts/stories/components/sections/Right";
 import { LightBulb, Telephone } from "@navikt/ds-icons";
 import { MainOne } from "../../layouts/stories/components/sections/Main";
@@ -16,28 +19,15 @@ import { Link, HashRouter as Router } from "react-router-dom";
 export default {
  title: "ds-react/accordion-anchor-menu",
  component: { Menu },
-  decorators: [
-    (Story) => {
-      useEffect(() => {
-        document.getElementById("decorator-header").style.display = "block";
-        document.getElementById("decorator-footer").style.display = "block";
-        return () => {
-          document.getElementById("decorator-header").style.display = "none";
-          document.getElementById("decorator-footer").style.display = "none";
-        };
-      }, []);
-      return <Story />;
-    },
-  ],
  parameters: {
    layout: "fullscreen",
  },
 };

 export const All = () => (
-  <ProductPageLayout title={"Nunc et lorem"}>
-    <ProductPageLayout.Section left sticky withPadding={false}>
-      <Menu title={"Minima"} smoothScrollBehavior>
+  <Layout title={"Nunc et lorem"}>
+    <Section left sticky withPadding={false}>
+      <Menu title={"Minima"}>
        <Item href={"#leo-quis"}>Leo quis</Item>
        <Collapsable title={"Proin accumsan"}>
          <Item href={"#nulla-pariatur"}>Nulla pariatur</Item>
@@ -45,39 +35,36 @@ export const All = () => (
        </Collapsable>
        <Item href={"#maecenas-in-pretium"}>Maecenas in pretium</Item>
      </Menu>
-    </ProductPageLayout.Section>
-    <ProductPageLayout.Section whiteBackground={false} withPadding={false}>
-      <ProductPageLayout.Panel
+    </Section>
+    <Section whiteBackground={false} withPadding={false}>
+      <Panel
        title={"Leo quis"}
        anchor={"leo-quis"}
        highlight={true}
        icon={<LightBulb />}
      >
        <MainOne title={false} />
-      </ProductPageLayout.Panel>
-      <ProductPageLayout.Panel
-        title={"Proin accumsan"}
-        anchor={"proin-accumsan"}
-      >
+      </Panel>
+      <Panel title={"Proin accumsan"} anchor={"proin-accumsan"}>
        <MainTwo title={false} />
-      </ProductPageLayout.Panel>
-      <ProductPageLayout.Panel
+      </Panel>
+      <Panel
        title={"Maecenas in pretium"}
        anchor={"maecenas-in-pretium"}
        icon={<Telephone />}
      >
        <MainThree title={false} />
-      </ProductPageLayout.Panel>
-    </ProductPageLayout.Section>
-    <ProductPageLayout.Section right sticky>
+      </Panel>
+    </Section>
+    <Section right sticky>
      <Right />
-    </ProductPageLayout.Section>
-  </ProductPageLayout>
+    </Section>
+  </Layout>
 );

 export const ReactRouter = () => (
-  <ProductPageLayout title={"Nunc et lorem"}>
-    <ProductPageLayout.Section left sticky withPadding={false}>
+  <Layout title={"Nunc et lorem"}>
+    <Section left sticky withPadding={false}>
      <Menu>
        <Item component={Link} to="/link1">
          Leo quis
@@ -102,34 +89,31 @@ export const ReactRouter = () => (
          Maecenas in pretium
        </Item>
      </Menu>
-    </ProductPageLayout.Section>
-    <ProductPageLayout.Section whiteBackground={false} withPadding={false}>
-      <ProductPageLayout.Panel
+    </Section>
+    <Section whiteBackground={false} withPadding={false}>
+      <Panel
        title={"Leo quis"}
        anchor={"leo-quis"}
        highlight={true}
        icon={<LightBulb />}
      >
        <MainOne title={false} />
-      </ProductPageLayout.Panel>
-      <ProductPageLayout.Panel
-        title={"Proin accumsan"}
-        anchor={"proin-accumsan"}
-      >
+      </Panel>
+      <Panel title={"Proin accumsan"} anchor={"proin-accumsan"}>
        <MainTwo title={false} />
-      </ProductPageLayout.Panel>
-      <ProductPageLayout.Panel
+      </Panel>
+      <Panel
        title={"Maecenas in pretium"}
        anchor={"maecenas-in-pretium"}
        icon={<Telephone />}
      >
        <MainThree title={false} />
-      </ProductPageLayout.Panel>
-    </ProductPageLayout.Section>
-    <ProductPageLayout.Section right sticky>
+      </Panel>
+    </Section>
+    <Section right sticky>
      <Right />
-    </ProductPageLayout.Section>
-  </ProductPageLayout>
+    </Section>
+  </Layout>
 );

 ReactRouter.decorators = [
@@ -3,7 +3,7 @@ import React from "react";
 /**
 * @ignore
 */
-const MenuItems = ({ children }) => (
+const MenuItems = ({ children }: { children: React.ReactNode }) => (
  <ul className="navds-accordion-menu__list">
    {React.Children.toArray(children).map((child, i) => (
      <li key={i} className="navds-accordion-menu__list-item">
@@ -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,33 +70,38 @@ 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}
        >
-          <span className="navds-accordion__heading">{heading}</span>
+          <span className="navds-accordion__heading navds-title navds-title--s">
+            {heading}
+          </span>
          <Expand
            className={cl(
              "navds-accordion__chevron",
              `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,14 +43,16 @@ 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(
        className,
        "navds-alert",
        `navds-alert--${variant}`,
-        `navds-alert--${size}`
+        `navds-alert--${size}`,
+        "navds-body-long",
+        { "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,14 +28,16 @@ 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(
        className,
        "navds-button",
        `navds-button--${variant}`,
-        `navds-button--${size}`
+        `navds-button--${size}`,
+        "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>
+  );
+};
@@ -1,25 +1,11 @@
 import * as React from "react";
 import { ContentContainer } from "../index";
-import { Text } from "../../index";
+import { BodyLong } from "../../index";
 import "./style.css";
-import { useEffect } from "react";

 export default {
  title: "ds-react/content-container",
  component: ContentContainer,
-  decorators: [
-    (Story) => {
-      useEffect(() => {
-        document.getElementById("decorator-header").style.display = "block";
-        document.getElementById("decorator-footer").style.display = "block";
-        return () => {
-          document.getElementById("decorator-header").style.display = "none";
-          document.getElementById("decorator-footer").style.display = "none";
-        };
-      }, []);
-      return <Story />;
-    },
-  ],
  parameters: {
    layout: "fullscreen",
    backgrounds: {
@@ -41,7 +27,7 @@ export default {
 export const All = () => {
  return (
    <ContentContainer className={"navds-story-content-container"}>
-      <Text size="medium">-- Innhold --</Text>
+      <BodyLong size="m">-- Innhold --</BodyLong>
    </ContentContainer>
  );
 };
@@ -1,4 +1,4 @@
-import { Files } from "@navikt/ds-icons";
+import { Copy } from "@navikt/ds-icons";
 import copy from "copy-to-clipboard";
 import cl from "classnames";
 import React, {
@@ -32,14 +32,16 @@ const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
  ({ children, text, label, icon, className, ...rest }, ref) => {
    const buttonRef = useRef<HTMLButtonElement>(null);
    const mergedRef = mergeRefs([buttonRef, ref]);
-    const timeoutRef = useRef<NodeJS.Timeout>();
+    const timeoutRef = useRef<number | null>();
    const [openPopover, setOpenPopover] = useState(false);

    useEffect(() => {
-      if (openPopover) {
-        timeoutRef.current = setTimeout(() => setOpenPopover(false), 2000);
-        return () => timeoutRef.current && clearTimeout(timeoutRef.current);
-      }
+      timeoutRef.current = openPopover
+        ? window.setTimeout(() => setOpenPopover(false), 2000)
+        : null;
+      return () => {
+        timeoutRef.current && clearTimeout(timeoutRef.current);
+      };
    }, [openPopover]);

    const title = `Kopier ${label} (${text})`;
@@ -50,7 +52,7 @@ const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
    };

    return (
-      <>
+      <div>
        <Button
          ref={mergedRef}
          variant="secondary"
@@ -59,7 +61,7 @@ const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
          onClick={handleClick}
          {...rest}
        >
-          {icon ? <>{icon}</> : <Files aria-label="Fil ikon for kopiering" />}
+          {icon ? <>{icon}</> : <Copy aria-label="Fil ikon for kopiering" />}
          {children ? children : <span className="sr-only">{title}</span>}
        </Button>
        <Popover
@@ -73,7 +75,7 @@ const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
        >
          {label}
        </Popover>
-      </>
+      </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,21 +25,25 @@ export {
  InternalHeaderUser,
  InternalHeaderUserProps,
 } from "./internal-header/index";
+export { Header, HeaderProps } from "./header/index";
 export {
  ProductPageLayout,
-  ProductPageLayoutProps,
-  ProductPageLayoutSectionProps,
+  ProductPagePanel,
+  ProductPageSection,
 } from "./layouts/index";
 export { Link, LinkProps } from "./link/index";
 export { Modal, ModalProps } from "./modal/index";
 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 {
-  Heading,
-  HeadingProps,
-  Lead,
-  Paragraph,
-  Text,
-  TextProps,
+  Title,
+  Ingress,
+  BodyLong,
+  BodyShort,
+  Label,
+  Detail,
 } from "./typography/index";
 export { OverridableComponent } from "./util/index";
@@ -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", className),
+      className: cl("navds-interal-header__title", "navds-label", className),
      children: <span>{children}</span>,
    })
 );
@@ -19,9 +19,15 @@ 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">{name}</span>
-      <span className="navds-header__ident">{ident}</span>
+    <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>
    </div>
  )
 );
@@ -1,3 +1,3 @@
-export { default as ProductPageLayout } from "./product-page/Layout";
-export { LayoutProps as ProductPageLayoutProps } from "./product-page/Layout";
-export { SectionProps as ProductPageLayoutSectionProps } from "./product-page/Section";
+export { default as ProductPageLayout } from "./product-page/ProductPageLayout";
+export { default as ProductPagePanel } from "./product-page/ProductPagePanel";
+export { default as ProductPageSection } from "./product-page/ProductPageSection";
@@ -1,101 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { forwardRef, ReactNode } from "react";
-import cl from "classnames";
-import { Button, Heading, Popover } from "../../";
-import { Attachment } from "@navikt/ds-icons";
-import { OverridableComponent } from "../../util";
-
-export interface PanelProps {
-  props: {
-    title: string;
-    icon?: ReactNode;
-    highlight?: boolean;
-    anchor?: string;
-    whiteBackground?: boolean;
-    withPadding?: boolean;
-  } & React.HTMLAttributes<HTMLDivElement>;
-  defaultComponent: "div";
-}
-
-const Panel: OverridableComponent<PanelProps> = forwardRef(
-  (
-    {
-      title,
-      highlight,
-      icon,
-      anchor,
-      component: Component = "div",
-      className,
-      children,
-      ...rest
-    },
-    ref
-  ) => {
-    const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
-    const [copied, setIsCopied] = useState<boolean>(false);
-
-    useEffect(() => {
-      const header = document.getElementById("navds-layout-body");
-      header?.classList.add("navds-layout__body--padding");
-    }, []);
-
-    return (
-      <Component
-        ref={ref}
-        id={anchor}
-        className={cl(
-          "navds-layout__panel",
-          icon && "navds-layout__panel--icon-margin",
-          highlight && "navds-layout__panel--highlight",
-          className
-        )}
-        {...rest}
-      >
-        {icon && <div className={"navds-layout__panel-icon"}>{icon}</div>}
-        <Heading size={"xl"} className={"navds-layout__panel-title"} level={2}>
-          {title}
-        </Heading>
-        {anchor && (
-          <div className={"navds-layout__panel-copy"}>
-            <Button
-              ref={(el) => setAnchorEl(el)}
-              variant={"secondary"}
-              className={"navds-layout__panel-copy-button"}
-              onClick={() => {
-                setIsCopied(true);
-                const { href, hash } = window.location;
-                const urlWithoutHash = href.replace(hash, "");
-                copyToClipboard(`${urlWithoutHash}#${anchor}`);
-                setTimeout(() => {
-                  setIsCopied(false);
-                }, 1000);
-              }}
-            >
-              <Attachment className={"navds-layout__panel-copy-icon"} />
-              <span>Kopier lenke</span>
-            </Button>
-            <Popover anchorEl={anchorEl} open={copied} onClose={() => {}}>
-              <div className="navds-layout__panel-popover-content">Kopiert</div>
-            </Popover>
-          </div>
-        )}
-        <div className={"navds-layout__panel-content"}>{children}</div>
-      </Component>
-    );
-  }
-);
-
-const copyToClipboard = (text: string) => {
-  const textArea = document.createElement("textarea");
-  textArea.value = text;
-  textArea.style.top = "0";
-  textArea.style.left = "0";
-  textArea.style.position = "fixed";
-  document.body.appendChild(textArea);
-  textArea.focus();
-  textArea.select();
-  document.execCommand("copy");
-  document.body.removeChild(textArea);
-};
-
-export default Panel;
@@ -1,29 +1,23 @@
-import React, { useEffect, Children, forwardRef } from "react";
-import { ForwardRefExoticComponent, HTMLAttributes } from "react";
-import { default as Section, SectionProps } from "./Section";
-import { default as Panel, PanelProps } from "./Panel";
-import { ContentContainer, Heading, OverridableComponent } from "../../";
 import cl from "classnames";
+import React, { Children, forwardRef, HTMLAttributes, useEffect } from "react";
+import { ContentContainer, Title } from "../../index";

-export interface LayoutWithSubComponents
-  extends ForwardRefExoticComponent<LayoutProps> {
-  Section: ForwardRefExoticComponent<SectionProps>;
-  Panel: OverridableComponent<PanelProps>;
-}
+const cls = (className, columns) =>
+  cl(
+    "navds-layout__container",
+    `navds-layout__container--${columns}-columns`,
+    className
+  );

-export interface LayoutProps extends HTMLAttributes<HTMLElement> {
+export interface ProductPageLayoutProps extends HTMLAttributes<HTMLElement> {
  title: string;
  children?: React.ReactNode;
+  className?: string;
 }

-const Layout = forwardRef<HTMLDivElement, LayoutProps>(
+const ProductPageLayout = forwardRef<HTMLDivElement, ProductPageLayoutProps>(
  ({ children, title, className, ...rest }, ref) => {
    const columns = Children.toArray(children).length;
-    const classNames = cl(
-      "navds-layout__container",
-      `navds-layout__container--${columns}-columns`,
-      className
-    );

    useEffect(() => {
      const layoutBody = document.getElementById("navds-layout-body");
@@ -39,22 +33,22 @@ const Layout = forwardRef<HTMLDivElement, LayoutProps>(
      <div ref={ref}>
        <div id={"navds-layout-header"} className={"navds-layout__header"}>
          <ContentContainer>
-            <div className={classNames} {...rest}>
+            <div className={cls(className, columns)} {...rest}>
              <div className={cl("navds-layout__header-content")}>
-                <Heading
-                  size={"xxl"}
+                <Title
+                  size="2xl"
                  className={cl("navds-layout__header-title")}
                  level={1}
                >
                  {title}
-                </Heading>
+                </Title>
              </div>
            </div>
          </ContentContainer>
        </div>
        <div id={"navds-layout-body"} className={"navds-layout__body"}>
          <ContentContainer>
-            <div className={classNames} {...rest}>
+            <div className={cls(className, columns)} {...rest}>
              {children}
            </div>
          </ContentContainer>
@@ -62,8 +56,6 @@ const Layout = forwardRef<HTMLDivElement, LayoutProps>(
      </div>
    );
  }
-) as LayoutWithSubComponents;
+);

-Layout.Section = Section;
-Layout.Panel = Panel;
-export default Layout;
+export default ProductPageLayout;
@@ -0,0 +1,73 @@
+import React, { useEffect, useRef } from "react";
+import { forwardRef, ReactNode } from "react";
+import cl from "classnames";
+import { Title, CopyToClipboard } from "../../";
+import { Attachment } from "@navikt/ds-icons";
+
+export interface ProductPagePanelProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  anchor: string;
+  className?: string;
+  title: string;
+  icon?: ReactNode;
+  highlight?: boolean;
+  whiteBackground?: boolean;
+}
+
+const ProductPagePanel = forwardRef<HTMLDivElement, ProductPagePanelProps>(
+  ({ children, className, title, highlight, icon, anchor, ...rest }, ref) => {
+    const copyRef = useRef(null);
+
+    useEffect(() => {
+      const header = document.getElementById("navds-layout-body");
+      header?.classList.add("navds-layout__body--padding");
+    }, []);
+
+    const getLink = () => {
+      const { href, hash } = window.location;
+      const urlWithoutHash = href.replace(hash, "");
+      return `${urlWithoutHash}#${anchor}`;
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cl(
+          "navds-layout__panel",
+          icon && "navds-layout__panel--icon-margin",
+          highlight && "navds-layout__panel--highlight",
+          className
+        )}
+        {...rest}
+      >
+        <div className="navds-layout__panel-anchor">
+          <div
+            id={anchor}
+            className={cl("navds-layout__panel-anchor--child", {
+              "navds-layout__panel-anchor--child--icon": !!icon,
+            })}
+          />
+        </div>
+        {icon && <div className={"navds-layout__panel-icon"}>{icon}</div>}
+        <Title size={"xl"} className={"navds-layout__panel-title"} level={2}>
+          {title}
+        </Title>
+
+        <CopyToClipboard
+          className="navds-layout__panel-copy"
+          ref={copyRef}
+          text={getLink()}
+          label="Kopierte lenke til panel"
+          icon={<Attachment />}
+        >
+          Kopier lenke
+        </CopyToClipboard>
+
+        <div className={"navds-layout__panel-content"}>{children}</div>
+      </div>
+    );
+  }
+);
+
+export default ProductPagePanel;
@@ -1,7 +1,8 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "classnames";

-export interface SectionProps extends HTMLAttributes<HTMLDivElement> {
+export interface ProductPageSectionProps
+  extends HTMLAttributes<HTMLDivElement> {
  left?: boolean;
  right?: boolean;
  whiteBackground?: boolean;
@@ -9,7 +10,7 @@ export interface SectionProps extends HTMLAttributes<HTMLDivElement> {
  sticky?: boolean;
 }

-const Section = forwardRef<HTMLDivElement, SectionProps>(
+const ProductPageSection = forwardRef<HTMLDivElement, ProductPageSectionProps>(
  (
    {
      left,
@@ -42,4 +43,4 @@ const Section = forwardRef<HTMLDivElement, SectionProps>(
  )
 );

-export default Section;
+export default ProductPageSection;
@@ -1,12 +1,5 @@
 import * as React from "react";
-import {
-  Button,
-  Cell,
-  Grid,
-  Heading,
-  Link,
-  Paragraph,
-} from "../../../../index";
+import { Button, Cell, Grid, Title, Link, BodyLong } from "../../../../index";

 export const Main = ({ title = true }) => (
  <>
@@ -19,30 +12,30 @@ export const Main = ({ title = true }) => (
 export const MainOne = ({ title = true }) => (
  <div>
    {title && (
-      <Heading level={1} size={"xl"} id={"leo-quis"}>
+      <Title level={1} size={"xl"} id={"leo-quis"}>
        Leo quis
-      </Heading>
+      </Title>
    )}
-    <Paragraph>
+    <BodyLong>
      Sed ullamcorper quam eget lorem volutpat, quis cursus risus fermentum.
      Quisque varius ornare nulla, ut condimentum sapien dapibus non. Nullam
      eget interdum nibh
-    </Paragraph>
+    </BodyLong>
  </div>
 );

 export const MainTwo = ({ title = true }) => (
  <div>
    {title && (
-      <Heading level={1} size={"xl"} id={"proin-accumsan"}>
+      <Title level={1} size={"xl"} id={"proin-accumsan"}>
        Proin accumsan
-      </Heading>
+      </Title>
    )}
-    <Paragraph className={"section"}>
+    <BodyLong className={"section"}>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
      doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
      inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
-    </Paragraph>
+    </BodyLong>
    <Grid className={"section"}>
      <Cell xs={6}>
        <Link href={"#"}>Ea voluptate</Link>
@@ -51,17 +44,17 @@ export const MainTwo = ({ title = true }) => (
        <Link href={"#"}>Quis autem</Link>
      </Cell>
    </Grid>
-    <Paragraph className={"section"}>
+    <BodyLong className={"section"}>
      Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
      consectetur, adipisci velit, sed quia non numquam eius modi tempora.
-    </Paragraph>
-    <Heading level={2} size={"large"} id={"nulla-pariatur"}>
+    </BodyLong>
+    <Title level={2} size={"l"} id={"nulla-pariatur"}>
      Nulla pariatur?
-    </Heading>
-    <Paragraph className={"section"}>
+    </Title>
+    <BodyLong className={"section"}>
      Etiam viverra neque sit amet libero dapibus tincidunt. Pellentesque quis
      imperdiet erat. Morbi sodales bibendum volutpat.
-    </Paragraph>
+    </BodyLong>
    <table className={"section tabell tabell--stripet"}>
      <thead>
        <tr>
@@ -92,18 +85,18 @@ export const MainTwo = ({ title = true }) => (
        </tr>
      </tbody>
    </table>
-    <Paragraph className={"section"}>
+    <BodyLong className={"section"}>
      Curabitur a purus pretium, condimentum magna ac, pellentesque diam. Nulla
      facilisi. Nullam consequat, dui sed bibendum faucibus, metus mauris
      commodo tortor.
-    </Paragraph>
-    <Heading level={2} size={"large"} id={"luctus-justo"}>
+    </BodyLong>
+    <Title level={2} size={"l"} id={"luctus-justo"}>
      Luctus justo
-    </Heading>
-    <Paragraph className={"section"}>
+    </Title>
+    <BodyLong className={"section"}>
      Nunc eget consectetur felis, id scelerisque sapien. Ut id feugiat nulla,
      ut cursus sem. In viverra felis vitae aliquet finibus.
-    </Paragraph>
+    </BodyLong>
    <Button>Søk ...</Button>
  </div>
 );
@@ -111,30 +104,30 @@ export const MainTwo = ({ title = true }) => (
 export const MainThree = ({ title = true }) => (
  <div>
    {title && (
-      <Heading level={1} size={"xl"} id={"maecenas-in-pretium"}>
+      <Title level={1} size={"xl"} id={"maecenas-in-pretium"}>
        Maecenas in pretium
-      </Heading>
+      </Title>
    )}
-    <Paragraph>
+    <BodyLong>
      Sed ullamcorper quam eget lorem volutpat, quis cursus risus fermentum.
      Quisque varius ornare nulla, ut condimentum sapien dapibus non. Nullam
      eget interdum nibh
-    </Paragraph>
-    <Paragraph>
+    </BodyLong>
+    <BodyLong>
      Cras tempor eros sed dapibus egestas. Curabitur bibendum quam quis lectus
      pretium lacinia. Nunc consequat ac augue quis laoreet. Donec porta, erat
      vitae blandit egestas, arcu metus pharetra nulla, et laoreet risus purus
      convallis turpis.
-    </Paragraph>
-    <Paragraph>
+    </BodyLong>
+    <BodyLong>
      Suspendisse potenti. Praesent at elit interdum, porttitor sem eget,
      blandit dolor. Nunc eget consectetur felis, id scelerisque sapien. Ut id
      feugiat nulla, ut cursus sem. In viverra felis vitae aliquet finibus.
-    </Paragraph>
-    <Paragraph>
+    </BodyLong>
+    <BodyLong>
      Vivamus id mi lectus. Duis ac augue magna. Aliquam ut euismod dui. Duis
      consectetur, magna a malesuada tempus, elit urna fermentum arcu, at
      porttitor magna sapien id enim.
-    </Paragraph>
+    </BodyLong>
  </div>
 );
@@ -1,6 +1,9 @@
 import * as React from "react";
-import { useEffect } from "react";
-import { ProductPageLayout } from "../../index";
+import {
+  ProductPageLayout as Layout,
+  ProductPageSection as Section,
+  ProductPagePanel as Panel,
+} from "../../index";
 import { Left } from "./components/sections/Left";
 import { Main, MainOne, MainTwo, MainThree } from "./components/sections/Main";
 import { Right } from "./components/sections/Right";
@@ -9,20 +12,7 @@ import "./components/styles.css";

 export default {
  title: "ds-react/layouts/ProductPage",
-  component: ProductPageLayout,
-  decorators: [
-    (Story) => {
-      useEffect(() => {
-        document.getElementById("decorator-header").style.display = "block";
-        document.getElementById("decorator-footer").style.display = "block";
-        return () => {
-          document.getElementById("decorator-header").style.display = "none";
-          document.getElementById("decorator-footer").style.display = "none";
-        };
-      }, []);
-      return <Story />;
-    },
-  ],
+  component: Layout,
  parameters: {
    layout: "fullscreen",
  },
@@ -30,73 +20,71 @@ export default {

 const title = "Nunc et lorem";
 export const ThreeColumns = () => (
-  <ProductPageLayout title={title}>
-    <ProductPageLayout.Section left sticky>
+  <Layout title={title}>
+    <Section left sticky>
      <Left />
-    </ProductPageLayout.Section>
-    <ProductPageLayout.Section whiteBackground={false} withPadding={false}>
-      <ProductPageLayout.Panel
+    </Section>
+    <Section whiteBackground={false} withPadding={false}>
+      <Panel
        title={"Leo quis"}
        anchor={"leo-quis"}
        highlight={true}
        icon={<LightBulb />}
      >
        <MainOne title={false} />
-      </ProductPageLayout.Panel>
-      <ProductPageLayout.Panel
-        title={"Proin accumsan"}
-        anchor={"proin-accumsan"}
-      >
+      </Panel>
+      <Panel title={"Proin accumsan"} anchor={"proin-accumsan"}>
        <MainTwo title={false} />
-      </ProductPageLayout.Panel>
-      <ProductPageLayout.Panel
+      </Panel>
+      <Panel
        title={"Maecenas in pretium"}
        anchor={"maecenas-in-pretium"}
        icon={<Telephone />}
      >
        <MainThree title={false} />
-      </ProductPageLayout.Panel>
-    </ProductPageLayout.Section>
-    <ProductPageLayout.Section right sticky>
+      </Panel>
+    </Section>
+    <Section right sticky>
      <Right />
-    </ProductPageLayout.Section>
-  </ProductPageLayout>
+    </Section>
+  </Layout>
 );

 export const TwoColumnsLeft = () => (
-  <ProductPageLayout title={title}>
-    <ProductPageLayout.Section left sticky>
+  <Layout title={title}>
+    <Section left sticky>
      <Left />
-    </ProductPageLayout.Section>
-    <ProductPageLayout.Section>
-      <ProductPageLayout.Panel
+      <Left />
+    </Section>
+    <Section>
+      <Panel
        title={"Leo quis"}
        anchor={"leo-quis"}
        highlight={true}
        icon={<LightBulb />}
      >
        <MainOne title={false} />
-      </ProductPageLayout.Panel>
+      </Panel>
      <Main />
-    </ProductPageLayout.Section>
-  </ProductPageLayout>
+    </Section>
+  </Layout>
 );

 export const TwoColumnsRight = () => (
-  <ProductPageLayout title={title}>
-    <ProductPageLayout.Section>
+  <Layout title={title}>
+    <Section>
      <Main />
-    </ProductPageLayout.Section>
-    <ProductPageLayout.Section right sticky>
+    </Section>
+    <Section right sticky>
      <Right />
-    </ProductPageLayout.Section>
-  </ProductPageLayout>
+    </Section>
+  </Layout>
 );

 export const OneColumn = () => (
-  <ProductPageLayout title={title}>
-    <ProductPageLayout.Section>
+  <Layout title={title}>
+    <Section>
      <Main />
-    </ProductPageLayout.Section>
-  </ProductPageLayout>
+    </Section>
+  </Layout>
 );
@@ -0,0 +1,65 @@
+import React, { forwardRef } from "react";
+import { OverridableComponent } from "../util";
+import { Panel } from "../index";
+import { Next } from "@navikt/ds-icons";
+import cl from "classnames";
+
+export type LinkPanelType = OverridableComponent<LinkPanelProps>;
+
+export interface LinkPanelProps {
+  props: {
+    children?: React.ReactNode;
+    className?: string;
+    noHeading?: boolean;
+    border?: boolean;
+  } & React.HTMLAttributes<HTMLAnchorElement>;
+  defaultComponent: "a";
+}
+
+const LinkPanel: LinkPanelType = forwardRef(
+  ({ children, component = "a", border = true, className, ...rest }, ref) => {
+    return (
+      <Panel
+        component={component}
+        border={border}
+        ref={ref}
+        className={cl("navds-link-panel", className)}
+        {...rest}
+      >
+        {typeof children === "string" ? (
+          <LinkPanelTitle>{children}</LinkPanelTitle>
+        ) : (
+          <span className="navds-link-panel__content">{children}</span>
+        )}
+        <Next
+          className="navds-link-panel__chevron"
+          aria-label="arrow-icon pointing right"
+        />
+      </Panel>
+    );
+  }
+);
+
+interface LinkPanelTitleProps {
+  props: {
+    children: React.ReactNode;
+  } & React.HTMLAttributes<HTMLSpanElement>;
+  defaultComponent: "span";
+}
+
+export const LinkPanelTitle: OverridableComponent<LinkPanelTitleProps> = forwardRef(
+  ({ className, component: Component = "span", ...rest }, ref) => (
+    <Component
+      ref={ref}
+      className={cl(
+        "navds-link-panel-title",
+        "navds-title",
+        "navds-title--m",
+        className
+      )}
+      {...rest}
+    />
+  )
+);
+
+export default LinkPanel;
@@ -0,0 +1,2 @@
+export { default as LinkPanel } from "./LinkPanel";
+export * from "./LinkPanel";
@@ -0,0 +1,166 @@
+import React from "react";
+import { LinkPanel, LinkPanelTitle } from "../index";
+
+export default {
+  title: "ds-react/linkPanel",
+  component: LinkPanel,
+};
+
+export const All = () => {
+  return (
+    <>
+      <h1>Link</h1>
+      <LinkPanel href="#">Dette er en tekstlenke</LinkPanel>
+
+      <h1>No border</h1>
+      <LinkPanel href="#" border={false}>
+        Dette er en tekstlenke
+      </LinkPanel>
+
+      <h1>Custom styling</h1>
+      <LinkPanel href="#" style={{ textDecoration: "none" }}>
+        <div
+          style={{
+            padding: "1rem",
+            display: "grid",
+            gridAutoFlow: "column",
+            gap: "2rem",
+            alignItems: "center",
+          }}
+        >
+          <Illustration />
+          <div>
+            <LinkPanelTitle>Dagpenger</LinkPanelTitle>
+            <p>
+              Du kan få dagpenger når du er arbeidsledig og har mistet inntekten
+              din.
+            </p>
+          </div>
+        </div>
+      </LinkPanel>
+    </>
+  );
+};
+
+const Illustration = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="110" height="110">
+    <defs>
+      <path id="a" d="M.686.654h4.399v5.852H.686z"></path>
+    </defs>
+    <g fill="none" fillRule="evenodd">
+      <path fill="transparent" d="M-287-1518H993V543H-287z"></path>
+      <rect
+        width="796"
+        height="181"
+        fill="transparent"
+        rx="8"
+        transform="translate(-45 -36)"
+      ></rect>
+      <circle cx="55" cy="55" r="55" fill="#CCDEE6"></circle>
+      <g fill="#D8D8D8">
+        <path
+          fill="#337C9B"
+          d="M32.034 5.834l-11.606 3.11-9.517 2.55-4.637 1.242 1.284 4.794 9.069 33.843 1.284 4.795 4.637-1.243 9.518-2.55 11.605-3.11c2.561-.686 4.063-3.389 3.353-6.037L37.956 9.385c-.71-2.648-3.361-4.238-5.922-3.551"
+        ></path>
+        <path
+          fill="#38363A"
+          d="M38.322 51.833l1.77-.474-12.12-45.233-1.77.474z"
+        ></path>
+        <path
+          fill="#CE2128"
+          d="M26.593 57.996l-1.179-.613-.713 1.12-.93-3.47 1.892-.507z"
+        ></path>
+      </g>
+      <path
+        fill="#FFF"
+        d="M61.773 69.14l8.95 38.112a2.524 2.524 0 0 0 3.036 1.881l32.913-7.745a2.528 2.528 0 0 0 1.88-3.04L98.279 54.591a2.526 2.526 0 0 0-3.037-1.883L68.425 59.02l-6.652 10.12z"
+      ></path>
+      <path
+        fill="#C0C0BE"
+        d="M68.425 59.02l1.326 5.645a2.527 2.527 0 0 1-1.88 3.038l-6.098 1.436 6.652-10.12z"
+      ></path>
+      <path
+        stroke="#8E9294"
+        strokeLinecap="round"
+        strokeWidth="2.152"
+        d="M68.902 74.197l11.982-2.82m-10.721 8.19l24.874-5.853M71.424 84.937l24.873-5.853"
+      ></path>
+      <path
+        stroke="#8E9294"
+        strokeLinecap="round"
+        strokeWidth="2.264"
+        d="M72.685 90.307l24.873-5.854M73.857 95.297l24.873-5.853M75.021 100.7l24.874-5.853"
+      ></path>
+      <path
+        fill="#CCDEE6"
+        d="M21.698 86.68c-5.726-3.643-7.42-11.243-3.78-16.976 3.64-5.733 11.231-7.427 16.958-3.784 5.727 3.643 7.42 11.243 3.78 16.976-3.639 5.733-11.231 7.427-16.958 3.784z"
+      ></path>
+      <path
+        fill="#C42B34"
+        d="M9.283 106.905a2.772 2.772 0 0 1-.851-3.823l8.759-13.798a2.765 2.765 0 0 1 3.817-.852 2.77 2.77 0 0 1 .851 3.822l-8.758 13.799a2.764 2.764 0 0 1-3.818.852"
+      ></path>
+      <path
+        fill="#2E3137"
+        d="M19.032 90.912c-.86-.547-1.348-1.318-.801-2.179l1.826-2.877a1.841 1.841 0 0 1 2.546-.567 1.847 1.847 0 0 1 .566 2.547l-1.826 2.878c-.547.86-1.452.744-2.31.198"
+      ></path>
+      <path
+        fill="#D84B55"
+        d="M16.41 91l-8.266 13.021a.925.925 0 0 0 .283 1.275.92.92 0 0 0 1.272-.284l7.912-12.463c-.713-.47-1.083-1.039-1.2-1.549"
+      ></path>
+      <path
+        fill="#2E3137"
+        d="M27.811 87.523a11.115 11.115 0 0 1-1.117-.196 11.283 11.283 0 0 1-3.577-1.48c-5.295-3.369-6.866-10.423-3.502-15.723 3.366-5.301 10.412-6.874 15.709-3.504 5.296 3.368 6.866 10.422 3.5 15.723a11.317 11.317 0 0 1-2.86 3.053 11.4 11.4 0 0 1-4.72 2.029c-1.127.203-2.284.24-3.433.098m12.57-4.19c3.911-6.16 2.085-14.358-4.069-18.271-6.154-3.915-14.342-2.089-18.253 4.072-3.91 6.16-2.085 14.356 4.07 18.271 6.153 3.915 14.343 2.09 18.252-4.072"
+      ></path>
+      <path
+        fill="#FFD399"
+        d="M93.445 12.554c2.45 5.367.088 11.707-5.274 14.159-5.361 2.452-11.695.088-14.145-5.279-2.449-5.368-.088-11.707 5.275-14.16 5.361-2.452 11.695-.088 14.144 5.28"
+      ></path>
+      <path
+        fill="#FFD399"
+        d="M91.45 28.239l-4.274 1.954a2.697 2.697 0 0 1-3.574-1.334l-2.775-6.08a2.7 2.7 0 0 1 1.333-3.578l4.274-1.955a2.696 2.696 0 0 1 3.575 1.334l2.775 6.08a2.702 2.702 0 0 1-1.333 3.579"
+      ></path>
+      <path
+        fill="#5A5C5D"
+        d="M94.1 30.6l-6.9 3.156a1.255 1.255 0 0 1-1.043-2.284l6.902-3.155a1.253 1.253 0 1 1 1.04 2.282m1.275 2.794l-6.9 3.156a1.254 1.254 0 1 1-1.041-2.283l6.9-3.156a1.254 1.254 0 0 1 1.041 2.283m-1.682 1.387l-3.044 1.392c-.458.21-.4.889.09 1.006.685.164 1.425.11 2.115-.207a3.25 3.25 0 0 0 1.54-1.464c.233-.449-.241-.936-.701-.727"
+      ></path>
+      <g transform="rotate(-69 92.268 -44.056)">
+        <mask id="b" fill="#fff">
+          <use xlinkHref="#a"></use>
+        </mask>
+        <path
+          fill="#C42B34"
+          d="M.732 4.08l.397-1.844a1.999 1.999 0 1 1 3.91.842l-.396 1.846A2 2 0 1 1 .732 4.08"
+          mask="url(#b)"
+        ></path>
+      </g>
+      <path
+        fill="#E1CFB4"
+        d="M86.458 79.011l-1.334 7.43 6.268-4.21-2.12-2.355z"
+      ></path>
+      <path
+        fill="#FECB86"
+        d="M103.266 56.87l-1.644-1.073-14.841 22.72 1.643 1.072z"
+      ></path>
+      <path
+        fill="#FAA736"
+        d="M104.912 57.945l-1.644-1.074-14.841 22.72 1.644 1.073z"
+      ></path>
+      <path
+        fill="#FECB86"
+        d="M90.071 80.664l1.644 1.072 14.842-22.72-1.645-1.072zm-3.306-.951c.31.203.774-.055 1.188.215a.513.513 0 0 1 .152.15l.32-.488-1.644-1.073-.297.453s-.028.542.281.743"
+      ></path>
+      <path
+        fill="#FAA736"
+        d="M88.106 80.078c.205.277.111.67.548.956.44.286.764.042 1.098.118l.32-.488-1.648-1.075-.318.489z"
+      ></path>
+      <path
+        fill="#FECB86"
+        d="M89.752 81.152a.507.507 0 0 1 .198.08c.414.27.365.797.675 1 .311.204.794-.041.794-.041l.296-.454-1.644-1.073-.32.488z"
+      ></path>
+      <path
+        fill="#535756"
+        d="M85.123 86.44l2.22-1.488-1.749-1.14zm21.434-27.423l-4.935-3.22.437-.67 4.935 3.22z"
+      ></path>
+    </g>
+  </svg>
+);
@@ -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"
@@ -0,0 +1,51 @@
+import React, { forwardRef } from "react";
+import cl from "classnames";
+import { OverridableComponent } from "../util";
+
+export type PanelType = OverridableComponent<PanelProps>;
+
+export interface PanelProps {
+  props: {
+    /**
+     * Component content
+     */
+    children: React.ReactNode;
+    /**
+     * @ignore
+     */
+    className?: string;
+    /**
+     * Adds a border to the panel
+     * @default false
+     */
+    border?: boolean;
+  } & React.HTMLAttributes<HTMLElement>;
+  defaultComponent: "div";
+}
+
+const Panel: PanelType = forwardRef(
+  (
+    {
+      children,
+      className,
+      border = false,
+      component: Component = "div",
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <Component
+        ref={ref}
+        className={cl("navds-panel", className, {
+          "navds-panel--border": border,
+        })}
+        {...rest}
+      >
+        {children}
+      </Component>
+    );
+  }
+);
+
+export default Panel;
@@ -0,0 +1,2 @@
+export { default as Panel } from "./Panel";
+export * from "./Panel";
@@ -0,0 +1,38 @@
+import React from "react";
+import { Panel } from "../index";
+import { Meta } from "@storybook/react/types-6-0";
+export default {
+  title: "ds-react/panel",
+  component: Panel,
+} as Meta;
+
+export const All = () => {
+  return (
+    <div>
+      <h1>Panel</h1>
+      <Panel>
+        Eu quis exercitation voluptate ex. Aute irure esse occaecat minim
+        cupidatat velit minim duis sint culpa anim laboris. Consectetur nulla eu
+        commodo ea culpa velit commodo incididunt sunt ipsum. Amet anim
+        adipisicing minim ipsum do. Non laborum culpa reprehenderit est sint
+        officia quis excepteur. Fugiat eiusmod eiusmod commodo incididunt nisi
+        minim ex eu cupidatat quis ex. Lorem irure ea ea enim consectetur ea
+        aliqua cupidatat. Officia aute veniam aute exercitation ipsum aliqua
+        adipisicing. Est aliqua ad ullamco aute nostrud amet ea adipisicing
+        consequat id officia irure pariatur. Eu mollit amet culpa culpa velit.
+      </Panel>
+      <h2>With border</h2>
+      <Panel border>
+        Eu quis exercitation voluptate ex. Aute irure esse occaecat minim
+        cupidatat velit minim duis sint culpa anim laboris. Consectetur nulla eu
+        commodo ea culpa velit commodo incididunt sunt ipsum. Amet anim
+        adipisicing minim ipsum do. Non laborum culpa reprehenderit est sint
+        officia quis excepteur. Fugiat eiusmod eiusmod commodo incididunt nisi
+        minim ex eu cupidatat quis ex. Lorem irure ea ea enim consectetur ea
+        aliqua cupidatat. Officia aute veniam aute exercitation ipsum aliqua
+        adipisicing. Est aliqua ad ullamco aute nostrud amet ea adipisicing
+        consequat id officia irure pariatur. Eu mollit amet culpa culpa velit.
+      </Panel>
+    </div>
+  );
+};
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
github-actions[bot]	fcfddd159d	Lerna versionbump [ci skip] - @navikt/ds-css@0.5.4	2021-06-18 09:47:54 +00:00
Ken	d7551d6e75	Fjernet smoothscroll fra ds-css (#1123 )	2021-06-18 11:34:39 +02:00
Ken	8ebf83d1b5	Update vk-innhold-dev.yml	2021-06-18 09:53:21 +02:00
Ken	70138c3364	Update build-publish.yml	2021-06-17 22:10:56 +02:00
Ken	208c5ad0ed	Update vk-innhold-dev.yml	2021-06-17 20:20:42 +02:00
Ken	187eabd1e6	Update and rename vk-innhold-dev to vk-innhold-dev.yml	2021-06-17 20:17:39 +02:00
Ken	5b7caf7f71	Create vk-innhold-dev	2021-06-17 20:16:32 +02:00
github-actions[bot]	812df58952	Lerna versionbump [ci skip] - @navikt/ds-icons@0.3.3 - @navikt/ds-react@0.5.4	2021-06-17 11:34:40 +00:00
Ken	8fa7bdf245	oppdatert ikoner + la tilbake ds-css (#1120 )	2021-06-17 13:20:52 +02:00
Ken	993b443614	Fjernet ubrukt beta-side for design.nav.no (#1119 )	2021-06-15 15:39:42 +02:00
Ken	fb5d5e2662	Create publish_storybook.yml	2021-06-11 19:34:21 +02:00
Ken	7b467323c2	Fjernet dekoratør fra stories (#1118 )	2021-06-09 19:32:38 +02:00
Ken	a9f626593f	La til identitet.nav.no under resources (#1117 )	2021-06-09 19:32:27 +02:00
github-actions[bot]	3e41d0e6c5	Lerna versionbump [ci skip] - @navikt/ds-react@0.5.3	2021-06-04 16:12:35 +00:00
Ken	d304309962	Update index.ts	2021-06-04 17:57:19 +02:00
github-actions[bot]	360294cab3	Lerna versionbump [ci skip] - @navikt/ds-css@0.5.3 - @navikt/ds-tokens@0.3.2	2021-06-04 09:55:02 +00:00
Andreas NordahlandKen	cac9c5d1ed	spacing as tokens (#1114 ) * spacing as token * missed a few * fikset typo spacing * fikset button sizing Co-authored-by: Ken <ken.aleksander@gmail.com>	2021-06-04 11:40:23 +02:00
github-actions[bot]	909e431714	Lerna versionbump [ci skip] - @navikt/ds-css@0.5.2 - @navikt/ds-react@0.5.2	2021-06-02 11:49:55 +00:00
KenandAndreas Nordahl	c57ebc6d31	Vnext: Lenkepanel -> LinkPanel (#1107 ) Co-authored-by: Andreas Nordahl <andnorda@gmail.com>	2021-06-02 13:35:30 +02:00
Ken	59d3b86d25	Update CHANGELOG.md	2021-06-02 12:32:00 +02:00
github-actions[bot]	3795a1e8fa	Lerna versionbump [ci skip] - @navikt/ds-css@0.5.1 - @navikt/ds-react@0.5.1 - @navikt/ds-tokens@0.3.1	2021-06-02 09:19:08 +00:00
KenandAndreas Nordahl	c526873cd3	Vnext: Nytt Typo-oppsett(#1079 ) Co-authored-by: Andreas Nordahl <andnorda@gmail.com>	2021-06-02 11:04:12 +02:00
github-actions[bot]	8ee6ce93e4	Lerna versionbump [ci skip] - @navikt/ds-css@0.4.2 - @navikt/ds-react@0.4.3	2021-05-28 11:23:29 +00:00
KenandAndreas Nordahl	a086727d19	Vnext: paneler komponent (#1108 ) * laget panel komponent * default panel border to false Co-authored-by: Andreas Nordahl <andnorda@gmail.com>	2021-05-28 13:08:14 +02:00
Ken	2e9099c1a9	Update Panel.overview.mdx	2021-05-26 13:27:17 +02:00
github-actions[bot]	7d4e866a7c	Lerna versionbump [ci skip] - @navikt/ds-icons@0.3.2 - @navikt/ds-react@0.4.2	2021-05-25 19:01:21 +00:00
Ken	b01c67f2a6	Oppdatert ikoner (#1105 )	2021-05-25 20:47:29 +02:00
Ken	a583f69c83	Oppdatert changelog for April + Mai	2021-05-25 10:45:14 +02:00
github-actions[bot]	d2675e0767	Lerna versionbump [ci skip] - nav-frontend-hjelpetekst@3.0.2 - nav-frontend-popover@2.0.2	2021-05-21 09:40:52 +00:00
Ken	1464aca19e	popover-position updates nå onMount (#1104 )	2021-05-21 11:27:08 +02:00
Ken	39fdcadabe	Oppdatert lenker til Figma på design.nav.no (#1103 )	2021-05-21 09:28:01 +02:00
github-actions[bot]	efc45667b0	Lerna versionbump [ci skip] - @navikt/ds-css@0.4.1 - @navikt/ds-react@0.4.1 - @navikt/ds-tokens@0.2.1 - nav-frontend-alertstriper-style@3.0.1 - nav-frontend-alertstriper@4.0.1 - nav-frontend-chevron@1.0.30 - nav-frontend-core@6.0.1 - nav-frontend-ekspanderbartpanel-style@2.0.1 - nav-frontend-ekspanderbartpanel@4.0.1 - nav-frontend-etiketter-style@2.0.1 - nav-frontend-etiketter@3.0.1 - nav-frontend-grid@2.0.1 - nav-frontend-hjelpetekst-style@3.0.1 - nav-frontend-hjelpetekst@3.0.1 - nav-frontend-ikoner-assets@3.0.1 - nav-frontend-ikonknapper@2.0.1 - nav-frontend-knapper-style@2.0.1 - nav-frontend-knapper@3.0.1 - nav-frontend-lenkepanel-style@2.0.1 - nav-frontend-lenkepanel@2.0.1 - nav-frontend-lenker-style@2.0.1 - nav-frontend-lenker@2.0.1 - nav-frontend-lesmerpanel-style@2.0.1 - nav-frontend-lesmerpanel@2.0.1 - nav-frontend-lukknapp-style@2.0.1 - nav-frontend-lukknapp@2.0.1 - nav-frontend-modal-style@2.0.1 - nav-frontend-modal@2.0.1 - nav-frontend-paneler-style@2.0.1 - nav-frontend-paneler@3.0.1 - nav-frontend-popover-style@2.0.1 - nav-frontend-popover@2.0.1 - nav-frontend-skjema-style@3.0.1 - nav-frontend-skjema@4.0.1 - nav-frontend-snakkeboble-style@2.0.1 - nav-frontend-snakkeboble@3.0.1 - nav-frontend-spinner@3.0.1 - nav-frontend-stegindikator-style@2.0.1 - nav-frontend-stegindikator@2.0.1 - nav-frontend-tabell-style@2.0.1 - nav-frontend-tabs-style@2.0.1 - nav-frontend-tabs@2.0.1 - nav-frontend-tekstomrade@3.0.1 - nav-frontend-toggle-style@2.0.1 - nav-frontend-toggle@2.0.1 - nav-frontend-typografi-style@2.0.1 - nav-frontend-typografi@4.0.1 - nav-frontend-veileder-style@3.0.1 - nav-frontend-veileder@3.0.1 - nav-frontend-veilederpanel-style@2.0.1 - nav-frontend-veilederpanel@2.0.1	2021-05-20 08:10:18 +00:00
KenandAndreas Nordahl	c04db248fb	Oppdatert fargepalett for nav-frontend-core + ds-tokens (#1092 ) Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> Co-authored-by: Andreas Nordahl <andnorda@gmail.com>	2021-05-20 09:55:47 +02:00
github-actions[bot]	c4f279accd	Lerna versionbump [ci skip] - @navikt/ds-css@0.3.4 - @navikt/ds-tokens@0.1.5 - nav-frontend-alertstriper@3.1.2 - nav-frontend-chevron@1.0.29 - nav-frontend-ekspanderbartpanel@3.1.4 - nav-frontend-etiketter@2.1.3 - nav-frontend-grid@1.1.2 - nav-frontend-hjelpetekst@2.1.4 - nav-frontend-ikonknapper@1.1.4 - nav-frontend-js-utils@1.0.19 - nav-frontend-knapper@2.1.4 - nav-frontend-lenkepanel@1.1.2 - nav-frontend-lenker@1.1.2 - nav-frontend-lesmerpanel@1.1.3 - nav-frontend-lukknapp@1.2.2 - nav-frontend-modal@1.2.2 - nav-frontend-paneler@2.1.2 - nav-frontend-popover@1.1.4 - nav-frontend-skjema@3.2.6 - nav-frontend-snakkeboble@2.1.2 - nav-frontend-spinner@2.0.17 - nav-frontend-stegindikator@1.1.3 - nav-frontend-tabs@1.1.3 - nav-frontend-tekstomrade@2.1.3 - nav-frontend-toggle@1.1.4 - nav-frontend-typografi@3.1.2 - nav-frontend-veileder-style@2.1.2 - nav-frontend-veileder@2.1.4 - nav-frontend-veilederpanel@1.1.4	2021-05-19 13:10:13 +00:00
Ken	b7b567a040	Prop for hvit bakgrunn på veileder sin snakkeboble (#1099 )	2021-05-19 14:53:43 +02:00
Ken	cd80c11deb	Fikset problem med build (#1100 ) * fikset problem med build * fikset eventhrottle error for chromatic	2021-05-19 14:53:19 +02:00
Ken	9169c87c62	Oppdatert bakgrunnsfarger tag for å synce med etikett og figma (#1097 )	2021-05-18 12:25:35 +02:00
github-actions[bot]	f735ae608b	Lerna versionbump [ci skip] - nav-frontend-skjema@3.2.5	2021-05-18 09:16:53 +00:00
Ida	22e1f0bf98	Update textarea-controlled.tsx (#1098 )	2021-05-18 10:19:03 +02:00
github-actions[bot]	ed87b47750	Lerna versionbump [ci skip] - @navikt/ds-css@0.3.3 - @navikt/ds-tokens@0.1.4 - nav-frontend-etiketter-style@1.1.2 - nav-frontend-etiketter@2.1.2 - nav-frontend-skjema-style@2.2.3 - nav-frontend-skjema@3.2.4	2021-05-18 07:58:06 +00:00
Andreas Nordahl	983c2c1def	Bakgrunnsfarger på etiketter stemmer nå overens med Figma (#1094 )	2021-05-18 09:19:39 +02:00
Andreas Nordahl	436c1d559c	always underline bekreftCheckboksPanel label on hover (#1095 )	2021-05-18 09:19:14 +02:00
Andreas Nordahl	be2905ba02	cjs tokens (#1096 )	2021-05-14 16:11:10 +02:00
github-actions[bot]	d48cd874b2	Lerna versionbump [ci skip] - @navikt/ds-icons@0.3.1 - @navikt/ds-react@0.3.5	2021-05-10 12:11:17 +00:00
Ken	522ee6cd61	Oppdatert ikoner (#1090 )	2021-05-10 13:58:14 +02:00
Ken	c0aca464ea	oppdatert storybook (#1088 )	2021-05-10 13:19:30 +02:00
github-actions[bot]	746943014d	Lerna versionbump [ci skip] - @navikt/ds-react@0.3.3 - nav-frontend-ekspanderbartpanel@3.1.3 - nav-frontend-hjelpetekst@2.1.3 - nav-frontend-ikonknapper@1.1.3 - nav-frontend-js-utils@1.0.18 - nav-frontend-knapper@2.1.3 - nav-frontend-lesmerpanel@1.1.2 - nav-frontend-lukknapp@1.2.1 - nav-frontend-modal@1.2.1 - nav-frontend-popover@1.1.3 - nav-frontend-skjema@3.2.3 - nav-frontend-stegindikator@1.1.2 - nav-frontend-tabs@1.1.2 - nav-frontend-tekstomrade@2.1.2 - nav-frontend-toggle@1.1.3 - nav-frontend-veileder@2.1.3 - nav-frontend-veilederpanel@1.1.3	2021-05-10 08:32:44 +00:00
Terje KarlsenandKen	9fc9ca6666	Legger til typeguard for children i Tekstomrade-komponenten (#1089 ) * legger til typeguard dersom children er falsy * Tsconfig strict + fixes (#1087) * fikset ts errors i nav-frontend * oppdatert versjoner for modal og lukknapp * sjekket endringer i storybook Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>	2021-05-10 10:18:54 +02:00
github-actions[bot]	f9766fd7ca	Lerna versionbump [ci skip] - @navikt/ds-css@0.3.2	2021-05-04 07:32:04 +00:00
Ken	15bb29a346	fikset sticky scroll (#1084 )	2021-05-04 09:18:06 +02:00
github-actions[bot]	3d80ac7c11	Lerna versionbump [ci skip] - @navikt/ds-react@0.3.2	2021-04-30 07:59:47 +00:00
Anders Bråthen Nomerstad	aba747c7de	Beholder state-objektet ved scrolling med anchor-menu. Bruker replaceState for å gi en mer forventet back funksjonalitet. (#1085 )	2021-04-30 09:46:21 +02:00
github-actions[bot]	e65dc3c858	Lerna versionbump [ci skip] - @navikt/ds-css@0.3.1 - @navikt/ds-react@0.3.1 - @navikt/ds-tokens@0.1.3	2021-04-29 10:39:34 +00:00
KenandAndreas Nordahl	aef2fe1349	WIP: Layout refactor (#1056 ) * oppdatert layout export navn * fikset stories * oppdatert komponenter * oppdatert copy * button -> anchor * endret anchor point * oppdatert sidebar offset * lint fix * merge fix * oppdatert refactor * oppdatert layout * fikset sticky stacking * oppdatert smoothscroll * fikset story + overridablecomponent * flyttet scroll-fix * ninja rename of smooth scrolling styling * add another level to accordion menu styling * fjernet overridablecomponent * oppdatert popover for copy-knapp * fikset sticky ved skalering * fikset sticky for 2-column left * oppdatert versjonsnummer * yarn update * r fikset dep resolution Co-authored-by: Andreas Nordahl <andnorda@gmail.com>	2021-04-29 12:26:23 +02:00