diff --git a/packages/dnb-design-system-portal/src/shared/menu/Card.js b/packages/dnb-design-system-portal/src/shared/menu/Card.js
index 242a6e5f8b4..b8880dcd787 100644
--- a/packages/dnb-design-system-portal/src/shared/menu/Card.js
+++ b/packages/dnb-design-system-portal/src/shared/menu/Card.js
@@ -107,7 +107,13 @@ export default class Card extends Component {
     const { url, customStyle, title, icon: Svg, onClick } = this.props
     return (
       <Link
-        css={cx(boxStyle, customStyle)}
+        className={cx(
+          // 'remove-anker-style',
+          'no-underline',
+          'no-underline-hover',
+          boxStyle,
+          customStyle
+        )}
         style={{ '--delay': `${random(1, 160)}ms` }}
         to={url}
         onClick={onClick}
diff --git a/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js b/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js
index 71003f746e9..fc865860b1a 100644
--- a/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js
+++ b/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js
@@ -8,7 +8,7 @@ import { StaticQuery, graphql } from 'gatsby'
 import Link from '../parts/Link'
 import PropTypes from 'prop-types'
 import React from 'react'
-import styled, { injectGlobal, cx, css } from 'react-emotion'
+import styled, { injectGlobal, cx } from 'react-emotion'
 
 const showAlwaysMenuItems = [] // like "uilib" som someting like that
 
@@ -141,30 +141,41 @@ class ListItem extends React.Component {
   render() {
     const { className, to, children } = this.props
     return (
-      <li className={cx(className, listItemStyle)} ref={this.ref}>
-        <Link to={to}>{children}</Link>
-      </li>
+      <StyledListItem className={className} innerRef={this.ref}>
+        <Link to={to} className="no-underline no-underline-hover">
+          {children}
+        </Link>
+      </StyledListItem>
     )
   }
 }
 
-const listItemStyle = css`
+const StyledListItem = styled.li`
   list-style: none;
 
   a {
     position: relative;
     padding: 0.45em 0 0.45em;
-    display: block;
 
     text-decoration: none;
 
-    /* border-bottom-color: transparent; */
-    border-bottom: none;
-    font-weight: 300;
+    color: var(--color-sea-green);
 
+    &:active,
     &:hover {
       color: var(--color-ocean-green);
-      border-bottom: none;
+    }
+    &:active {
+      opacity: 0.7;
+    }
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    &::before {
+      /* Change Anker Style */
+      bottom: auto;
     }
 
     /* external link icon */
@@ -205,25 +216,24 @@ const listItemStyle = css`
   &.active a {
     color: var(--color-ocean-green);
 
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-
-    &::before {
+    &::after {
       content: '';
       position: absolute;
 
-      /* left: 1em; */
       display: flex;
 
-      /* padding: .2em; */
       height: 60%;
       width: 4px;
-      margin-top: -2px;
+      max-height: auto;
 
       /* border-radius: 50%; */
       background: var(--color-ocean-green);
-      transform: translateX(-0.6em);
+      transform: translate(-0.6em, -2px);
+
+      /* Reset Anker Style */
+      left: auto;
+      right: auto;
+      bottom: auto;
     }
   }
 `
diff --git a/packages/dnb-design-system-portal/src/shared/menu/StickyMenuBar.js b/packages/dnb-design-system-portal/src/shared/menu/StickyMenuBar.js
index 0812a83f517..9ce13a90930 100644
--- a/packages/dnb-design-system-portal/src/shared/menu/StickyMenuBar.js
+++ b/packages/dnb-design-system-portal/src/shared/menu/StickyMenuBar.js
@@ -138,7 +138,6 @@ injectGlobal`
     background-repeat: repeat;
     background-attachment: fixed;
     background-color: transparent;
-    ${'' /* background-image: url('/assets/images/grid-32x32.svg'); */}
     background-image: url(${gridSvg});
 
     h1,
@@ -158,7 +157,19 @@ injectGlobal`
       display: block;
     }
 
+    .dnb-style {
+      .text-lead-16 {
+        border-bottom: solid 1rem green;
+      }
+      .text-lead-20 {
+        border-bottom: solid 1rem green;
+      }
+      .text-small {
+        border-bottom: solid 1rem hotpink;
+      }
+    }
   }
+
   .grid-not-fixed {
     background-attachment: local;
   }
diff --git a/packages/dnb-design-system-portal/src/shared/parts/Layout.js b/packages/dnb-design-system-portal/src/shared/parts/Layout.js
index 1e6f592da3f..a6745818e10 100644
--- a/packages/dnb-design-system-portal/src/shared/parts/Layout.js
+++ b/packages/dnb-design-system-portal/src/shared/parts/Layout.js
@@ -175,10 +175,10 @@ const FooterWrapper = styled.footer`
 `
 const Footer = () => (
   <FooterWrapper>
-    <Link to="/license" className="no-unerline">
+    <Link to="/license" className="no-underline">
       Copyright (c) 2018-present DNB.no
     </Link>
-    <Link to="/log" className="no-unerline">
+    <Link to="/log" className="no-underline">
       {buildVersion}
     </Link>
   </FooterWrapper>
diff --git a/packages/dnb-ui-lib/src/components/button/Button.js b/packages/dnb-ui-lib/src/components/button/Button.js
index 1f43042f6a3..c59a9373568 100644
--- a/packages/dnb-ui-lib/src/components/button/Button.js
+++ b/packages/dnb-ui-lib/src/components/button/Button.js
@@ -162,7 +162,8 @@ export default class Button extends PureComponent {
       icon ? 'dnb-button--has-icon' : null,
       id,
       class_name,
-      className
+      className,
+      this.props.href ? 'no-underline no-underline-hover' : null
     )
 
     const params = {
diff --git a/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap b/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap
index ec69ea7ca4a..6bfdc5e8384 100644
--- a/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap
@@ -142,7 +142,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
   variant="primary"
 >
   <a
-    className="dnb-button dnb-button--primary dnb-button--icon-position-right dnb-button--has-text dnb-button--has-icon id class className"
+    className="dnb-button dnb-button--primary dnb-button--icon-position-right dnb-button--has-text dnb-button--has-icon id class className no-underline no-underline-hover"
     href="https://url"
     id="id"
     onClick={[Function]}
@@ -264,108 +264,6 @@ exports[`Button scss have to match snapshot 1`] = `
 /*
  * Utilities
  * ========================================================================== */
-.dnb-sr-only {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px; }
-
-.dnb-not-sr-only {
-  position: static; }
-
-.dnb-unstyled-list {
-  margin: 0;
-  list-style-type: none;
-  padding-left: 0; }
-  .dnb-unstyled-list > li {
-    margin-bottom: 0; }
-
-.dnb-no-focus {
-  outline: none; }
-
-.dnb-fake-focus {
-  outline: none;
-  border-color: transparent; }
-  html[data-whatinput='mouse'] .dnb-fake-focus:not(.dnb-no-mouse-focus) {
-    transition: box-shadow 0.1s ease-out 0s;
-    box-shadow: 0 0 0 2px #14555a; }
-  html[data-whatinput='keyboard'] .dnb-fake-focus {
-    box-shadow: 0 0 0 2px #ff5400; }
-
-.dnb-tab-focus:focus {
-  box-shadow: 0 0 0 2px #ff5400 !important; }
-
-@media screen and (max-width: 700px) {
-  .dnb-hide-on-mobile {
-    display: none; } }
-
-@media screen and (min-width: 700px) {
-  .dnb-mobile-exclusive {
-    display: none; } }
-
-.dnb-width-limit {
-  margin: 0 auto;
-  width: 100%;
-  max-width: 1024px;
-  padding: 0 0.5rem; }
-  @media screen and (min-width: 700px) {
-    .dnb-width-limit {
-      padding-left: 1rem;
-      padding-right: 1rem; } }
-
-.dnb-belt {
-  padding: 1rem 0;
-  width: 100%;
-  background: #fafafa; }
-
-.dnb-nudge {
-  display: inline-flex;
-  flex: 0 0 100%; }
-  .dnb-nudge--vertical[data-nudges='1'] {
-    height: 1rem; }
-  .dnb-nudge--horizontal[data-nudges='1'] {
-    width: 1rem; }
-  .dnb-nudge--vertical[data-nudges='2'] {
-    height: 2rem; }
-  .dnb-nudge--horizontal[data-nudges='2'] {
-    width: 2rem; }
-  .dnb-nudge--vertical[data-nudges='3'] {
-    height: 3rem; }
-  .dnb-nudge--horizontal[data-nudges='3'] {
-    width: 3rem; }
-  .dnb-nudge--vertical[data-nudges='4'] {
-    height: 4rem; }
-  .dnb-nudge--horizontal[data-nudges='4'] {
-    width: 4rem; }
-  .dnb-nudge--vertical[data-nudges='5'] {
-    height: 5rem; }
-  .dnb-nudge--horizontal[data-nudges='5'] {
-    width: 5rem; }
-  .dnb-nudge--vertical[data-nudges='6'] {
-    height: 6rem; }
-  .dnb-nudge--horizontal[data-nudges='6'] {
-    width: 6rem; }
-  .dnb-nudge--vertical[data-nudges='7'] {
-    height: 7rem; }
-  .dnb-nudge--horizontal[data-nudges='7'] {
-    width: 7rem; }
-  .dnb-nudge--vertical[data-nudges='8'] {
-    height: 8rem; }
-  .dnb-nudge--horizontal[data-nudges='8'] {
-    width: 8rem; }
-  .dnb-nudge--vertical[data-nudges='9'] {
-    height: 9rem; }
-  .dnb-nudge--horizontal[data-nudges='9'] {
-    width: 9rem; }
-  .dnb-nudge--vertical[data-nudges='10'] {
-    height: 10rem; }
-  .dnb-nudge--horizontal[data-nudges='10'] {
-    width: 10rem; }
-
 /*
 * Scopes
 * ======================================================================== */
diff --git a/packages/dnb-ui-lib/src/components/button/style/themes/dnb-button-theme-ui.scss b/packages/dnb-ui-lib/src/components/button/style/themes/dnb-button-theme-ui.scss
index 73ceabd2d74..4862ed244b2 100644
--- a/packages/dnb-ui-lib/src/components/button/style/themes/dnb-button-theme-ui.scss
+++ b/packages/dnb-ui-lib/src/components/button/style/themes/dnb-button-theme-ui.scss
@@ -50,6 +50,7 @@
 
 .dnb-button--tertiary {
   position: relative;
+  z-index: 1;
   color: var(--color-sea-green);
   background-color: transparent;
   border-color: transparent;
@@ -69,15 +70,10 @@
   }
 
   &:not([disabled]):hover {
-    &::after {
-      content: '';
-      position: absolute;
-      bottom: 0.5em;
+    @include drawUnderlineLine() {
       left: 0.45em;
       right: 0.45em;
-      width: auto;
-      height: 1px; // can also be 0, but for older browsers, we set 1px
-      border-bottom: 1px solid var(--color-emerald-green);
+      bottom: 0.5em;
     }
     &.dnb-button--icon-position-left::after {
       left: 0.7em;
diff --git a/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap b/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
index 413e9aff894..71c55f7dfa2 100644
--- a/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
@@ -199,108 +199,6 @@ exports[`Dropdown scss have to match snapshot 1`] = `
 /*
  * Utilities
  * ========================================================================== */
-.dnb-sr-only {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px; }
-
-.dnb-not-sr-only {
-  position: static; }
-
-.dnb-unstyled-list {
-  margin: 0;
-  list-style-type: none;
-  padding-left: 0; }
-  .dnb-unstyled-list > li {
-    margin-bottom: 0; }
-
-.dnb-no-focus {
-  outline: none; }
-
-.dnb-fake-focus {
-  outline: none;
-  border-color: transparent; }
-  html[data-whatinput='mouse'] .dnb-fake-focus:not(.dnb-no-mouse-focus) {
-    transition: box-shadow 0.1s ease-out 0s;
-    box-shadow: 0 0 0 2px #14555a; }
-  html[data-whatinput='keyboard'] .dnb-fake-focus {
-    box-shadow: 0 0 0 2px #ff5400; }
-
-.dnb-tab-focus:focus {
-  box-shadow: 0 0 0 2px #ff5400 !important; }
-
-@media screen and (max-width: 700px) {
-  .dnb-hide-on-mobile {
-    display: none; } }
-
-@media screen and (min-width: 700px) {
-  .dnb-mobile-exclusive {
-    display: none; } }
-
-.dnb-width-limit {
-  margin: 0 auto;
-  width: 100%;
-  max-width: 1024px;
-  padding: 0 0.5rem; }
-  @media screen and (min-width: 700px) {
-    .dnb-width-limit {
-      padding-left: 1rem;
-      padding-right: 1rem; } }
-
-.dnb-belt {
-  padding: 1rem 0;
-  width: 100%;
-  background: #fafafa; }
-
-.dnb-nudge {
-  display: inline-flex;
-  flex: 0 0 100%; }
-  .dnb-nudge--vertical[data-nudges='1'] {
-    height: 1rem; }
-  .dnb-nudge--horizontal[data-nudges='1'] {
-    width: 1rem; }
-  .dnb-nudge--vertical[data-nudges='2'] {
-    height: 2rem; }
-  .dnb-nudge--horizontal[data-nudges='2'] {
-    width: 2rem; }
-  .dnb-nudge--vertical[data-nudges='3'] {
-    height: 3rem; }
-  .dnb-nudge--horizontal[data-nudges='3'] {
-    width: 3rem; }
-  .dnb-nudge--vertical[data-nudges='4'] {
-    height: 4rem; }
-  .dnb-nudge--horizontal[data-nudges='4'] {
-    width: 4rem; }
-  .dnb-nudge--vertical[data-nudges='5'] {
-    height: 5rem; }
-  .dnb-nudge--horizontal[data-nudges='5'] {
-    width: 5rem; }
-  .dnb-nudge--vertical[data-nudges='6'] {
-    height: 6rem; }
-  .dnb-nudge--horizontal[data-nudges='6'] {
-    width: 6rem; }
-  .dnb-nudge--vertical[data-nudges='7'] {
-    height: 7rem; }
-  .dnb-nudge--horizontal[data-nudges='7'] {
-    width: 7rem; }
-  .dnb-nudge--vertical[data-nudges='8'] {
-    height: 8rem; }
-  .dnb-nudge--horizontal[data-nudges='8'] {
-    width: 8rem; }
-  .dnb-nudge--vertical[data-nudges='9'] {
-    height: 9rem; }
-  .dnb-nudge--horizontal[data-nudges='9'] {
-    width: 9rem; }
-  .dnb-nudge--vertical[data-nudges='10'] {
-    height: 10rem; }
-  .dnb-nudge--horizontal[data-nudges='10'] {
-    width: 10rem; }
-
 /*
 * Scopes
 * ======================================================================== */
diff --git a/packages/dnb-ui-lib/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap b/packages/dnb-ui-lib/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap
index 1c53294f694..74a6b695fe4 100644
--- a/packages/dnb-ui-lib/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap
@@ -74,108 +74,6 @@ exports[`Icon scss have to match snapshot 1`] = `
 /*
  * Utilities
  * ========================================================================== */
-.dnb-sr-only {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px; }
-
-.dnb-not-sr-only {
-  position: static; }
-
-.dnb-unstyled-list {
-  margin: 0;
-  list-style-type: none;
-  padding-left: 0; }
-  .dnb-unstyled-list > li {
-    margin-bottom: 0; }
-
-.dnb-no-focus {
-  outline: none; }
-
-.dnb-fake-focus {
-  outline: none;
-  border-color: transparent; }
-  html[data-whatinput='mouse'] .dnb-fake-focus:not(.dnb-no-mouse-focus) {
-    transition: box-shadow 0.1s ease-out 0s;
-    box-shadow: 0 0 0 2px #14555a; }
-  html[data-whatinput='keyboard'] .dnb-fake-focus {
-    box-shadow: 0 0 0 2px #ff5400; }
-
-.dnb-tab-focus:focus {
-  box-shadow: 0 0 0 2px #ff5400 !important; }
-
-@media screen and (max-width: 700px) {
-  .dnb-hide-on-mobile {
-    display: none; } }
-
-@media screen and (min-width: 700px) {
-  .dnb-mobile-exclusive {
-    display: none; } }
-
-.dnb-width-limit {
-  margin: 0 auto;
-  width: 100%;
-  max-width: 1024px;
-  padding: 0 0.5rem; }
-  @media screen and (min-width: 700px) {
-    .dnb-width-limit {
-      padding-left: 1rem;
-      padding-right: 1rem; } }
-
-.dnb-belt {
-  padding: 1rem 0;
-  width: 100%;
-  background: #fafafa; }
-
-.dnb-nudge {
-  display: inline-flex;
-  flex: 0 0 100%; }
-  .dnb-nudge--vertical[data-nudges='1'] {
-    height: 1rem; }
-  .dnb-nudge--horizontal[data-nudges='1'] {
-    width: 1rem; }
-  .dnb-nudge--vertical[data-nudges='2'] {
-    height: 2rem; }
-  .dnb-nudge--horizontal[data-nudges='2'] {
-    width: 2rem; }
-  .dnb-nudge--vertical[data-nudges='3'] {
-    height: 3rem; }
-  .dnb-nudge--horizontal[data-nudges='3'] {
-    width: 3rem; }
-  .dnb-nudge--vertical[data-nudges='4'] {
-    height: 4rem; }
-  .dnb-nudge--horizontal[data-nudges='4'] {
-    width: 4rem; }
-  .dnb-nudge--vertical[data-nudges='5'] {
-    height: 5rem; }
-  .dnb-nudge--horizontal[data-nudges='5'] {
-    width: 5rem; }
-  .dnb-nudge--vertical[data-nudges='6'] {
-    height: 6rem; }
-  .dnb-nudge--horizontal[data-nudges='6'] {
-    width: 6rem; }
-  .dnb-nudge--vertical[data-nudges='7'] {
-    height: 7rem; }
-  .dnb-nudge--horizontal[data-nudges='7'] {
-    width: 7rem; }
-  .dnb-nudge--vertical[data-nudges='8'] {
-    height: 8rem; }
-  .dnb-nudge--horizontal[data-nudges='8'] {
-    width: 8rem; }
-  .dnb-nudge--vertical[data-nudges='9'] {
-    height: 9rem; }
-  .dnb-nudge--horizontal[data-nudges='9'] {
-    width: 9rem; }
-  .dnb-nudge--vertical[data-nudges='10'] {
-    height: 10rem; }
-  .dnb-nudge--horizontal[data-nudges='10'] {
-    width: 10rem; }
-
 /*
 * Scopes
 * ======================================================================== */
diff --git a/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap b/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
index b08d6b41a48..346b23bba63 100644
--- a/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
@@ -54,108 +54,6 @@ exports[`InputMasked scss have to match snapshot 1`] = `
 /*
  * Utilities
  * ========================================================================== */
-.dnb-sr-only {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px; }
-
-.dnb-not-sr-only {
-  position: static; }
-
-.dnb-unstyled-list {
-  margin: 0;
-  list-style-type: none;
-  padding-left: 0; }
-  .dnb-unstyled-list > li {
-    margin-bottom: 0; }
-
-.dnb-no-focus {
-  outline: none; }
-
-.dnb-fake-focus {
-  outline: none;
-  border-color: transparent; }
-  html[data-whatinput='mouse'] .dnb-fake-focus:not(.dnb-no-mouse-focus) {
-    transition: box-shadow 0.1s ease-out 0s;
-    box-shadow: 0 0 0 2px #14555a; }
-  html[data-whatinput='keyboard'] .dnb-fake-focus {
-    box-shadow: 0 0 0 2px #ff5400; }
-
-.dnb-tab-focus:focus {
-  box-shadow: 0 0 0 2px #ff5400 !important; }
-
-@media screen and (max-width: 700px) {
-  .dnb-hide-on-mobile {
-    display: none; } }
-
-@media screen and (min-width: 700px) {
-  .dnb-mobile-exclusive {
-    display: none; } }
-
-.dnb-width-limit {
-  margin: 0 auto;
-  width: 100%;
-  max-width: 1024px;
-  padding: 0 0.5rem; }
-  @media screen and (min-width: 700px) {
-    .dnb-width-limit {
-      padding-left: 1rem;
-      padding-right: 1rem; } }
-
-.dnb-belt {
-  padding: 1rem 0;
-  width: 100%;
-  background: #fafafa; }
-
-.dnb-nudge {
-  display: inline-flex;
-  flex: 0 0 100%; }
-  .dnb-nudge--vertical[data-nudges='1'] {
-    height: 1rem; }
-  .dnb-nudge--horizontal[data-nudges='1'] {
-    width: 1rem; }
-  .dnb-nudge--vertical[data-nudges='2'] {
-    height: 2rem; }
-  .dnb-nudge--horizontal[data-nudges='2'] {
-    width: 2rem; }
-  .dnb-nudge--vertical[data-nudges='3'] {
-    height: 3rem; }
-  .dnb-nudge--horizontal[data-nudges='3'] {
-    width: 3rem; }
-  .dnb-nudge--vertical[data-nudges='4'] {
-    height: 4rem; }
-  .dnb-nudge--horizontal[data-nudges='4'] {
-    width: 4rem; }
-  .dnb-nudge--vertical[data-nudges='5'] {
-    height: 5rem; }
-  .dnb-nudge--horizontal[data-nudges='5'] {
-    width: 5rem; }
-  .dnb-nudge--vertical[data-nudges='6'] {
-    height: 6rem; }
-  .dnb-nudge--horizontal[data-nudges='6'] {
-    width: 6rem; }
-  .dnb-nudge--vertical[data-nudges='7'] {
-    height: 7rem; }
-  .dnb-nudge--horizontal[data-nudges='7'] {
-    width: 7rem; }
-  .dnb-nudge--vertical[data-nudges='8'] {
-    height: 8rem; }
-  .dnb-nudge--horizontal[data-nudges='8'] {
-    width: 8rem; }
-  .dnb-nudge--vertical[data-nudges='9'] {
-    height: 9rem; }
-  .dnb-nudge--horizontal[data-nudges='9'] {
-    width: 9rem; }
-  .dnb-nudge--vertical[data-nudges='10'] {
-    height: 10rem; }
-  .dnb-nudge--horizontal[data-nudges='10'] {
-    width: 10rem; }
-
 /*
 * Scopes
 * ======================================================================== */
diff --git a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap
index 384ca9e4c9a..5e5204369c2 100644
--- a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap
@@ -140,108 +140,6 @@ exports[`Input scss have to match snapshot 1`] = `
 /*
  * Utilities
  * ========================================================================== */
-.dnb-sr-only {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px; }
-
-.dnb-not-sr-only {
-  position: static; }
-
-.dnb-unstyled-list {
-  margin: 0;
-  list-style-type: none;
-  padding-left: 0; }
-  .dnb-unstyled-list > li {
-    margin-bottom: 0; }
-
-.dnb-no-focus {
-  outline: none; }
-
-.dnb-fake-focus {
-  outline: none;
-  border-color: transparent; }
-  html[data-whatinput='mouse'] .dnb-fake-focus:not(.dnb-no-mouse-focus) {
-    transition: box-shadow 0.1s ease-out 0s;
-    box-shadow: 0 0 0 2px #14555a; }
-  html[data-whatinput='keyboard'] .dnb-fake-focus {
-    box-shadow: 0 0 0 2px #ff5400; }
-
-.dnb-tab-focus:focus {
-  box-shadow: 0 0 0 2px #ff5400 !important; }
-
-@media screen and (max-width: 700px) {
-  .dnb-hide-on-mobile {
-    display: none; } }
-
-@media screen and (min-width: 700px) {
-  .dnb-mobile-exclusive {
-    display: none; } }
-
-.dnb-width-limit {
-  margin: 0 auto;
-  width: 100%;
-  max-width: 1024px;
-  padding: 0 0.5rem; }
-  @media screen and (min-width: 700px) {
-    .dnb-width-limit {
-      padding-left: 1rem;
-      padding-right: 1rem; } }
-
-.dnb-belt {
-  padding: 1rem 0;
-  width: 100%;
-  background: #fafafa; }
-
-.dnb-nudge {
-  display: inline-flex;
-  flex: 0 0 100%; }
-  .dnb-nudge--vertical[data-nudges='1'] {
-    height: 1rem; }
-  .dnb-nudge--horizontal[data-nudges='1'] {
-    width: 1rem; }
-  .dnb-nudge--vertical[data-nudges='2'] {
-    height: 2rem; }
-  .dnb-nudge--horizontal[data-nudges='2'] {
-    width: 2rem; }
-  .dnb-nudge--vertical[data-nudges='3'] {
-    height: 3rem; }
-  .dnb-nudge--horizontal[data-nudges='3'] {
-    width: 3rem; }
-  .dnb-nudge--vertical[data-nudges='4'] {
-    height: 4rem; }
-  .dnb-nudge--horizontal[data-nudges='4'] {
-    width: 4rem; }
-  .dnb-nudge--vertical[data-nudges='5'] {
-    height: 5rem; }
-  .dnb-nudge--horizontal[data-nudges='5'] {
-    width: 5rem; }
-  .dnb-nudge--vertical[data-nudges='6'] {
-    height: 6rem; }
-  .dnb-nudge--horizontal[data-nudges='6'] {
-    width: 6rem; }
-  .dnb-nudge--vertical[data-nudges='7'] {
-    height: 7rem; }
-  .dnb-nudge--horizontal[data-nudges='7'] {
-    width: 7rem; }
-  .dnb-nudge--vertical[data-nudges='8'] {
-    height: 8rem; }
-  .dnb-nudge--horizontal[data-nudges='8'] {
-    width: 8rem; }
-  .dnb-nudge--vertical[data-nudges='9'] {
-    height: 9rem; }
-  .dnb-nudge--horizontal[data-nudges='9'] {
-    width: 9rem; }
-  .dnb-nudge--vertical[data-nudges='10'] {
-    height: 10rem; }
-  .dnb-nudge--horizontal[data-nudges='10'] {
-    width: 10rem; }
-
 /*
 * Scopes
 * ======================================================================== */
diff --git a/packages/dnb-ui-lib/src/components/logo/__tests__/__snapshots__/Logo.test.js.snap b/packages/dnb-ui-lib/src/components/logo/__tests__/__snapshots__/Logo.test.js.snap
index 05bf15b8f1b..2341f223ee8 100644
--- a/packages/dnb-ui-lib/src/components/logo/__tests__/__snapshots__/Logo.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/logo/__tests__/__snapshots__/Logo.test.js.snap
@@ -57,108 +57,6 @@ exports[`Logo scss have to match snapshot 1`] = `
 /*
  * Utilities
  * ========================================================================== */
-.dnb-sr-only {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px; }
-
-.dnb-not-sr-only {
-  position: static; }
-
-.dnb-unstyled-list {
-  margin: 0;
-  list-style-type: none;
-  padding-left: 0; }
-  .dnb-unstyled-list > li {
-    margin-bottom: 0; }
-
-.dnb-no-focus {
-  outline: none; }
-
-.dnb-fake-focus {
-  outline: none;
-  border-color: transparent; }
-  html[data-whatinput='mouse'] .dnb-fake-focus:not(.dnb-no-mouse-focus) {
-    transition: box-shadow 0.1s ease-out 0s;
-    box-shadow: 0 0 0 2px #14555a; }
-  html[data-whatinput='keyboard'] .dnb-fake-focus {
-    box-shadow: 0 0 0 2px #ff5400; }
-
-.dnb-tab-focus:focus {
-  box-shadow: 0 0 0 2px #ff5400 !important; }
-
-@media screen and (max-width: 700px) {
-  .dnb-hide-on-mobile {
-    display: none; } }
-
-@media screen and (min-width: 700px) {
-  .dnb-mobile-exclusive {
-    display: none; } }
-
-.dnb-width-limit {
-  margin: 0 auto;
-  width: 100%;
-  max-width: 1024px;
-  padding: 0 0.5rem; }
-  @media screen and (min-width: 700px) {
-    .dnb-width-limit {
-      padding-left: 1rem;
-      padding-right: 1rem; } }
-
-.dnb-belt {
-  padding: 1rem 0;
-  width: 100%;
-  background: #fafafa; }
-
-.dnb-nudge {
-  display: inline-flex;
-  flex: 0 0 100%; }
-  .dnb-nudge--vertical[data-nudges='1'] {
-    height: 1rem; }
-  .dnb-nudge--horizontal[data-nudges='1'] {
-    width: 1rem; }
-  .dnb-nudge--vertical[data-nudges='2'] {
-    height: 2rem; }
-  .dnb-nudge--horizontal[data-nudges='2'] {
-    width: 2rem; }
-  .dnb-nudge--vertical[data-nudges='3'] {
-    height: 3rem; }
-  .dnb-nudge--horizontal[data-nudges='3'] {
-    width: 3rem; }
-  .dnb-nudge--vertical[data-nudges='4'] {
-    height: 4rem; }
-  .dnb-nudge--horizontal[data-nudges='4'] {
-    width: 4rem; }
-  .dnb-nudge--vertical[data-nudges='5'] {
-    height: 5rem; }
-  .dnb-nudge--horizontal[data-nudges='5'] {
-    width: 5rem; }
-  .dnb-nudge--vertical[data-nudges='6'] {
-    height: 6rem; }
-  .dnb-nudge--horizontal[data-nudges='6'] {
-    width: 6rem; }
-  .dnb-nudge--vertical[data-nudges='7'] {
-    height: 7rem; }
-  .dnb-nudge--horizontal[data-nudges='7'] {
-    width: 7rem; }
-  .dnb-nudge--vertical[data-nudges='8'] {
-    height: 8rem; }
-  .dnb-nudge--horizontal[data-nudges='8'] {
-    width: 8rem; }
-  .dnb-nudge--vertical[data-nudges='9'] {
-    height: 9rem; }
-  .dnb-nudge--horizontal[data-nudges='9'] {
-    width: 9rem; }
-  .dnb-nudge--vertical[data-nudges='10'] {
-    height: 10rem; }
-  .dnb-nudge--horizontal[data-nudges='10'] {
-    width: 10rem; }
-
 /*
 * Scopes
 * ======================================================================== */
diff --git a/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap b/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap
index a54f8fbe76d..2ae5a60b7a6 100644
--- a/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap
@@ -349,108 +349,6 @@ exports[`Modal scss have to match snapshot 1`] = `
 /*
  * Utilities
  * ========================================================================== */
-.dnb-sr-only {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px; }
-
-.dnb-not-sr-only {
-  position: static; }
-
-.dnb-unstyled-list {
-  margin: 0;
-  list-style-type: none;
-  padding-left: 0; }
-  .dnb-unstyled-list > li {
-    margin-bottom: 0; }
-
-.dnb-no-focus {
-  outline: none; }
-
-.dnb-fake-focus {
-  outline: none;
-  border-color: transparent; }
-  html[data-whatinput='mouse'] .dnb-fake-focus:not(.dnb-no-mouse-focus) {
-    transition: box-shadow 0.1s ease-out 0s;
-    box-shadow: 0 0 0 2px #14555a; }
-  html[data-whatinput='keyboard'] .dnb-fake-focus {
-    box-shadow: 0 0 0 2px #ff5400; }
-
-.dnb-tab-focus:focus {
-  box-shadow: 0 0 0 2px #ff5400 !important; }
-
-@media screen and (max-width: 700px) {
-  .dnb-hide-on-mobile {
-    display: none; } }
-
-@media screen and (min-width: 700px) {
-  .dnb-mobile-exclusive {
-    display: none; } }
-
-.dnb-width-limit {
-  margin: 0 auto;
-  width: 100%;
-  max-width: 1024px;
-  padding: 0 0.5rem; }
-  @media screen and (min-width: 700px) {
-    .dnb-width-limit {
-      padding-left: 1rem;
-      padding-right: 1rem; } }
-
-.dnb-belt {
-  padding: 1rem 0;
-  width: 100%;
-  background: #fafafa; }
-
-.dnb-nudge {
-  display: inline-flex;
-  flex: 0 0 100%; }
-  .dnb-nudge--vertical[data-nudges='1'] {
-    height: 1rem; }
-  .dnb-nudge--horizontal[data-nudges='1'] {
-    width: 1rem; }
-  .dnb-nudge--vertical[data-nudges='2'] {
-    height: 2rem; }
-  .dnb-nudge--horizontal[data-nudges='2'] {
-    width: 2rem; }
-  .dnb-nudge--vertical[data-nudges='3'] {
-    height: 3rem; }
-  .dnb-nudge--horizontal[data-nudges='3'] {
-    width: 3rem; }
-  .dnb-nudge--vertical[data-nudges='4'] {
-    height: 4rem; }
-  .dnb-nudge--horizontal[data-nudges='4'] {
-    width: 4rem; }
-  .dnb-nudge--vertical[data-nudges='5'] {
-    height: 5rem; }
-  .dnb-nudge--horizontal[data-nudges='5'] {
-    width: 5rem; }
-  .dnb-nudge--vertical[data-nudges='6'] {
-    height: 6rem; }
-  .dnb-nudge--horizontal[data-nudges='6'] {
-    width: 6rem; }
-  .dnb-nudge--vertical[data-nudges='7'] {
-    height: 7rem; }
-  .dnb-nudge--horizontal[data-nudges='7'] {
-    width: 7rem; }
-  .dnb-nudge--vertical[data-nudges='8'] {
-    height: 8rem; }
-  .dnb-nudge--horizontal[data-nudges='8'] {
-    width: 8rem; }
-  .dnb-nudge--vertical[data-nudges='9'] {
-    height: 9rem; }
-  .dnb-nudge--horizontal[data-nudges='9'] {
-    width: 9rem; }
-  .dnb-nudge--vertical[data-nudges='10'] {
-    height: 10rem; }
-  .dnb-nudge--horizontal[data-nudges='10'] {
-    width: 10rem; }
-
 /*
 * Scopes
 * ======================================================================== */
diff --git a/packages/dnb-ui-lib/src/components/slider/Slider.js b/packages/dnb-ui-lib/src/components/slider/Slider.js
index db491ff3729..3c0a0899afa 100644
--- a/packages/dnb-ui-lib/src/components/slider/Slider.js
+++ b/packages/dnb-ui-lib/src/components/slider/Slider.js
@@ -3,7 +3,7 @@
  * stylelint-disable
  */
 
-import React, { PureComponent } from 'react'
+import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import keycode from 'keycode'
@@ -81,7 +81,7 @@ export const defaultProps = {
 /**
  * The slider component is our enhancement of the classic radio button. It acts like a slider. Example: On/off, yes/no.
  */
-export default class Slider extends PureComponent {
+export default class Slider extends Component {
   static tagName = 'dnb-slider'
   static propTypes = propTypes
   static defaultProps = defaultProps
diff --git a/packages/dnb-ui-lib/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap b/packages/dnb-ui-lib/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap
index b2a20383c5f..7fb79c90487 100644
--- a/packages/dnb-ui-lib/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap
@@ -75,108 +75,6 @@ exports[`Slider scss have to match snapshot 1`] = `
 /*
  * Utilities
  * ========================================================================== */
-.dnb-sr-only {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px; }
-
-.dnb-not-sr-only {
-  position: static; }
-
-.dnb-unstyled-list {
-  margin: 0;
-  list-style-type: none;
-  padding-left: 0; }
-  .dnb-unstyled-list > li {
-    margin-bottom: 0; }
-
-.dnb-no-focus {
-  outline: none; }
-
-.dnb-fake-focus {
-  outline: none;
-  border-color: transparent; }
-  html[data-whatinput='mouse'] .dnb-fake-focus:not(.dnb-no-mouse-focus) {
-    transition: box-shadow 0.1s ease-out 0s;
-    box-shadow: 0 0 0 2px #14555a; }
-  html[data-whatinput='keyboard'] .dnb-fake-focus {
-    box-shadow: 0 0 0 2px #ff5400; }
-
-.dnb-tab-focus:focus {
-  box-shadow: 0 0 0 2px #ff5400 !important; }
-
-@media screen and (max-width: 700px) {
-  .dnb-hide-on-mobile {
-    display: none; } }
-
-@media screen and (min-width: 700px) {
-  .dnb-mobile-exclusive {
-    display: none; } }
-
-.dnb-width-limit {
-  margin: 0 auto;
-  width: 100%;
-  max-width: 1024px;
-  padding: 0 0.5rem; }
-  @media screen and (min-width: 700px) {
-    .dnb-width-limit {
-      padding-left: 1rem;
-      padding-right: 1rem; } }
-
-.dnb-belt {
-  padding: 1rem 0;
-  width: 100%;
-  background: #fafafa; }
-
-.dnb-nudge {
-  display: inline-flex;
-  flex: 0 0 100%; }
-  .dnb-nudge--vertical[data-nudges='1'] {
-    height: 1rem; }
-  .dnb-nudge--horizontal[data-nudges='1'] {
-    width: 1rem; }
-  .dnb-nudge--vertical[data-nudges='2'] {
-    height: 2rem; }
-  .dnb-nudge--horizontal[data-nudges='2'] {
-    width: 2rem; }
-  .dnb-nudge--vertical[data-nudges='3'] {
-    height: 3rem; }
-  .dnb-nudge--horizontal[data-nudges='3'] {
-    width: 3rem; }
-  .dnb-nudge--vertical[data-nudges='4'] {
-    height: 4rem; }
-  .dnb-nudge--horizontal[data-nudges='4'] {
-    width: 4rem; }
-  .dnb-nudge--vertical[data-nudges='5'] {
-    height: 5rem; }
-  .dnb-nudge--horizontal[data-nudges='5'] {
-    width: 5rem; }
-  .dnb-nudge--vertical[data-nudges='6'] {
-    height: 6rem; }
-  .dnb-nudge--horizontal[data-nudges='6'] {
-    width: 6rem; }
-  .dnb-nudge--vertical[data-nudges='7'] {
-    height: 7rem; }
-  .dnb-nudge--horizontal[data-nudges='7'] {
-    width: 7rem; }
-  .dnb-nudge--vertical[data-nudges='8'] {
-    height: 8rem; }
-  .dnb-nudge--horizontal[data-nudges='8'] {
-    width: 8rem; }
-  .dnb-nudge--vertical[data-nudges='9'] {
-    height: 9rem; }
-  .dnb-nudge--horizontal[data-nudges='9'] {
-    width: 9rem; }
-  .dnb-nudge--vertical[data-nudges='10'] {
-    height: 10rem; }
-  .dnb-nudge--horizontal[data-nudges='10'] {
-    width: 10rem; }
-
 /*
 * Scopes
 * ======================================================================== */
diff --git a/packages/dnb-ui-lib/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap b/packages/dnb-ui-lib/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap
index 640206c42bf..c63d99c4cad 100644
--- a/packages/dnb-ui-lib/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap
@@ -95,108 +95,6 @@ exports[`Switch scss have to match snapshot 1`] = `
 /*
  * Utilities
  * ========================================================================== */
-.dnb-sr-only {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px; }
-
-.dnb-not-sr-only {
-  position: static; }
-
-.dnb-unstyled-list {
-  margin: 0;
-  list-style-type: none;
-  padding-left: 0; }
-  .dnb-unstyled-list > li {
-    margin-bottom: 0; }
-
-.dnb-no-focus {
-  outline: none; }
-
-.dnb-fake-focus {
-  outline: none;
-  border-color: transparent; }
-  html[data-whatinput='mouse'] .dnb-fake-focus:not(.dnb-no-mouse-focus) {
-    transition: box-shadow 0.1s ease-out 0s;
-    box-shadow: 0 0 0 2px #14555a; }
-  html[data-whatinput='keyboard'] .dnb-fake-focus {
-    box-shadow: 0 0 0 2px #ff5400; }
-
-.dnb-tab-focus:focus {
-  box-shadow: 0 0 0 2px #ff5400 !important; }
-
-@media screen and (max-width: 700px) {
-  .dnb-hide-on-mobile {
-    display: none; } }
-
-@media screen and (min-width: 700px) {
-  .dnb-mobile-exclusive {
-    display: none; } }
-
-.dnb-width-limit {
-  margin: 0 auto;
-  width: 100%;
-  max-width: 1024px;
-  padding: 0 0.5rem; }
-  @media screen and (min-width: 700px) {
-    .dnb-width-limit {
-      padding-left: 1rem;
-      padding-right: 1rem; } }
-
-.dnb-belt {
-  padding: 1rem 0;
-  width: 100%;
-  background: #fafafa; }
-
-.dnb-nudge {
-  display: inline-flex;
-  flex: 0 0 100%; }
-  .dnb-nudge--vertical[data-nudges='1'] {
-    height: 1rem; }
-  .dnb-nudge--horizontal[data-nudges='1'] {
-    width: 1rem; }
-  .dnb-nudge--vertical[data-nudges='2'] {
-    height: 2rem; }
-  .dnb-nudge--horizontal[data-nudges='2'] {
-    width: 2rem; }
-  .dnb-nudge--vertical[data-nudges='3'] {
-    height: 3rem; }
-  .dnb-nudge--horizontal[data-nudges='3'] {
-    width: 3rem; }
-  .dnb-nudge--vertical[data-nudges='4'] {
-    height: 4rem; }
-  .dnb-nudge--horizontal[data-nudges='4'] {
-    width: 4rem; }
-  .dnb-nudge--vertical[data-nudges='5'] {
-    height: 5rem; }
-  .dnb-nudge--horizontal[data-nudges='5'] {
-    width: 5rem; }
-  .dnb-nudge--vertical[data-nudges='6'] {
-    height: 6rem; }
-  .dnb-nudge--horizontal[data-nudges='6'] {
-    width: 6rem; }
-  .dnb-nudge--vertical[data-nudges='7'] {
-    height: 7rem; }
-  .dnb-nudge--horizontal[data-nudges='7'] {
-    width: 7rem; }
-  .dnb-nudge--vertical[data-nudges='8'] {
-    height: 8rem; }
-  .dnb-nudge--horizontal[data-nudges='8'] {
-    width: 8rem; }
-  .dnb-nudge--vertical[data-nudges='9'] {
-    height: 9rem; }
-  .dnb-nudge--horizontal[data-nudges='9'] {
-    width: 9rem; }
-  .dnb-nudge--vertical[data-nudges='10'] {
-    height: 10rem; }
-  .dnb-nudge--horizontal[data-nudges='10'] {
-    width: 10rem; }
-
 /*
 * Scopes
 * ======================================================================== */
diff --git a/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap b/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap
index 9384b516bd3..952a4fc3596 100644
--- a/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap
@@ -25,108 +25,6 @@ exports[`Tabs scss have to match snapshot 1`] = `
 /*
  * Utilities
  * ========================================================================== */
-.dnb-sr-only {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px; }
-
-.dnb-not-sr-only {
-  position: static; }
-
-.dnb-unstyled-list {
-  margin: 0;
-  list-style-type: none;
-  padding-left: 0; }
-  .dnb-unstyled-list > li {
-    margin-bottom: 0; }
-
-.dnb-no-focus {
-  outline: none; }
-
-.dnb-fake-focus {
-  outline: none;
-  border-color: transparent; }
-  html[data-whatinput='mouse'] .dnb-fake-focus:not(.dnb-no-mouse-focus) {
-    transition: box-shadow 0.1s ease-out 0s;
-    box-shadow: 0 0 0 2px #14555a; }
-  html[data-whatinput='keyboard'] .dnb-fake-focus {
-    box-shadow: 0 0 0 2px #ff5400; }
-
-.dnb-tab-focus:focus {
-  box-shadow: 0 0 0 2px #ff5400 !important; }
-
-@media screen and (max-width: 700px) {
-  .dnb-hide-on-mobile {
-    display: none; } }
-
-@media screen and (min-width: 700px) {
-  .dnb-mobile-exclusive {
-    display: none; } }
-
-.dnb-width-limit {
-  margin: 0 auto;
-  width: 100%;
-  max-width: 1024px;
-  padding: 0 0.5rem; }
-  @media screen and (min-width: 700px) {
-    .dnb-width-limit {
-      padding-left: 1rem;
-      padding-right: 1rem; } }
-
-.dnb-belt {
-  padding: 1rem 0;
-  width: 100%;
-  background: #fafafa; }
-
-.dnb-nudge {
-  display: inline-flex;
-  flex: 0 0 100%; }
-  .dnb-nudge--vertical[data-nudges='1'] {
-    height: 1rem; }
-  .dnb-nudge--horizontal[data-nudges='1'] {
-    width: 1rem; }
-  .dnb-nudge--vertical[data-nudges='2'] {
-    height: 2rem; }
-  .dnb-nudge--horizontal[data-nudges='2'] {
-    width: 2rem; }
-  .dnb-nudge--vertical[data-nudges='3'] {
-    height: 3rem; }
-  .dnb-nudge--horizontal[data-nudges='3'] {
-    width: 3rem; }
-  .dnb-nudge--vertical[data-nudges='4'] {
-    height: 4rem; }
-  .dnb-nudge--horizontal[data-nudges='4'] {
-    width: 4rem; }
-  .dnb-nudge--vertical[data-nudges='5'] {
-    height: 5rem; }
-  .dnb-nudge--horizontal[data-nudges='5'] {
-    width: 5rem; }
-  .dnb-nudge--vertical[data-nudges='6'] {
-    height: 6rem; }
-  .dnb-nudge--horizontal[data-nudges='6'] {
-    width: 6rem; }
-  .dnb-nudge--vertical[data-nudges='7'] {
-    height: 7rem; }
-  .dnb-nudge--horizontal[data-nudges='7'] {
-    width: 7rem; }
-  .dnb-nudge--vertical[data-nudges='8'] {
-    height: 8rem; }
-  .dnb-nudge--horizontal[data-nudges='8'] {
-    width: 8rem; }
-  .dnb-nudge--vertical[data-nudges='9'] {
-    height: 9rem; }
-  .dnb-nudge--horizontal[data-nudges='9'] {
-    width: 9rem; }
-  .dnb-nudge--vertical[data-nudges='10'] {
-    height: 10rem; }
-  .dnb-nudge--horizontal[data-nudges='10'] {
-    width: 10rem; }
-
 /*
 * Scopes
 * ======================================================================== */
diff --git a/packages/dnb-ui-lib/src/patterns/view-title/__tests__/__snapshots__/ViewTitle.test.js.snap b/packages/dnb-ui-lib/src/patterns/view-title/__tests__/__snapshots__/ViewTitle.test.js.snap
index 673694c0c2b..fd435fc8d95 100644
--- a/packages/dnb-ui-lib/src/patterns/view-title/__tests__/__snapshots__/ViewTitle.test.js.snap
+++ b/packages/dnb-ui-lib/src/patterns/view-title/__tests__/__snapshots__/ViewTitle.test.js.snap
@@ -31,108 +31,6 @@ exports[`ViewTitle scss have to match snapshot 1`] = `
 /*
  * Utilities
  * ========================================================================== */
-.dnb-sr-only {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px; }
-
-.dnb-not-sr-only {
-  position: static; }
-
-.dnb-unstyled-list {
-  margin: 0;
-  list-style-type: none;
-  padding-left: 0; }
-  .dnb-unstyled-list > li {
-    margin-bottom: 0; }
-
-.dnb-no-focus {
-  outline: none; }
-
-.dnb-fake-focus {
-  outline: none;
-  border-color: transparent; }
-  html[data-whatinput='mouse'] .dnb-fake-focus:not(.dnb-no-mouse-focus) {
-    transition: box-shadow 0.1s ease-out 0s;
-    box-shadow: 0 0 0 2px #14555a; }
-  html[data-whatinput='keyboard'] .dnb-fake-focus {
-    box-shadow: 0 0 0 2px #ff5400; }
-
-.dnb-tab-focus:focus {
-  box-shadow: 0 0 0 2px #ff5400 !important; }
-
-@media screen and (max-width: 700px) {
-  .dnb-hide-on-mobile {
-    display: none; } }
-
-@media screen and (min-width: 700px) {
-  .dnb-mobile-exclusive {
-    display: none; } }
-
-.dnb-width-limit {
-  margin: 0 auto;
-  width: 100%;
-  max-width: 1024px;
-  padding: 0 0.5rem; }
-  @media screen and (min-width: 700px) {
-    .dnb-width-limit {
-      padding-left: 1rem;
-      padding-right: 1rem; } }
-
-.dnb-belt {
-  padding: 1rem 0;
-  width: 100%;
-  background: #fafafa; }
-
-.dnb-nudge {
-  display: inline-flex;
-  flex: 0 0 100%; }
-  .dnb-nudge--vertical[data-nudges='1'] {
-    height: 1rem; }
-  .dnb-nudge--horizontal[data-nudges='1'] {
-    width: 1rem; }
-  .dnb-nudge--vertical[data-nudges='2'] {
-    height: 2rem; }
-  .dnb-nudge--horizontal[data-nudges='2'] {
-    width: 2rem; }
-  .dnb-nudge--vertical[data-nudges='3'] {
-    height: 3rem; }
-  .dnb-nudge--horizontal[data-nudges='3'] {
-    width: 3rem; }
-  .dnb-nudge--vertical[data-nudges='4'] {
-    height: 4rem; }
-  .dnb-nudge--horizontal[data-nudges='4'] {
-    width: 4rem; }
-  .dnb-nudge--vertical[data-nudges='5'] {
-    height: 5rem; }
-  .dnb-nudge--horizontal[data-nudges='5'] {
-    width: 5rem; }
-  .dnb-nudge--vertical[data-nudges='6'] {
-    height: 6rem; }
-  .dnb-nudge--horizontal[data-nudges='6'] {
-    width: 6rem; }
-  .dnb-nudge--vertical[data-nudges='7'] {
-    height: 7rem; }
-  .dnb-nudge--horizontal[data-nudges='7'] {
-    width: 7rem; }
-  .dnb-nudge--vertical[data-nudges='8'] {
-    height: 8rem; }
-  .dnb-nudge--horizontal[data-nudges='8'] {
-    width: 8rem; }
-  .dnb-nudge--vertical[data-nudges='9'] {
-    height: 9rem; }
-  .dnb-nudge--horizontal[data-nudges='9'] {
-    width: 9rem; }
-  .dnb-nudge--vertical[data-nudges='10'] {
-    height: 10rem; }
-  .dnb-nudge--horizontal[data-nudges='10'] {
-    width: 10rem; }
-
 /*
 * Scopes
 * ======================================================================== */
diff --git a/packages/dnb-ui-lib/src/style/core/dnb-core.scss b/packages/dnb-ui-lib/src/style/core/dnb-core.scss
index 078c4555f33..13385bb4d0a 100644
--- a/packages/dnb-ui-lib/src/style/core/dnb-core.scss
+++ b/packages/dnb-ui-lib/src/style/core/dnb-core.scss
@@ -12,23 +12,13 @@
 @import './font-import.scss';
 @import './typography.scss';
 @import './scopes.scss';
-@import './form.scss';
+@import './form.scss'; // TODO: considder to remove this, and use it only as a pattern
 // @import './_grid.scss';
 
-.dnb-style {
-  // line-height: 1.5em; // gets set in bodyDefault
-
-  @import './dnb-style.scss';
-}
-
-html[data-whatinput='mouse'] .dnb-style *:focus {
-  outline: none;
-}
-
-html[data-whatinput='keyboard'] .dnb-style *:not(a):not(div):focus {
-  @include fakeFocus('mouse');
-}
+// dnb core styles - they have to be used by a parent css class: .dnb-style
+@import './dnb-style.scss';
 
+// Global body style
 body {
   @include bodyDefault();
 
@@ -37,46 +27,150 @@ body {
   }
 }
 
+// Anker
 a {
-  position: relative; // because of z-index
+  position: relative; // because of z-index and underline/hover sudo classes
   z-index: 1; // because of focus handling
   outline: none; // because of focus handling
-  padding: 0.0625em; // 16/1 - give a padding round, because of focus ring
-  margin: -0.0625em; // 16/1 - give a padding round, because of focus ring
+  // padding: 0.0625em; // 16/1 - give a padding round, because of focus ring
+  // margin: -0.0625em; // 16/1 - give a padding round, because of focus ring
+  // padding: 2px 5px; // 16/1 - give a padding round, because of focus ring
+  // margin: -2px -5px; // 16/1 - give a padding round, because of focus ring
+  padding: 0.125em 0.3125em; // 16/1 - give a padding round, because of focus ring
+  margin: -0.125em -0.3125em; // 16/1 - give a padding round, because of focus ring
 
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: var(--color-sea-green);
-  color: var(--color-sea-green);
+  // color: var(--color-sea-green);
+  color: inherit;
   text-decoration: none;
 
+  // underline
+  @include drawUnderlineLine();
+
+  // bg
+  @include drawUnderlineBackground();
+
   &:active,
   &:hover {
-    border-bottom-style: solid;
-    color: var(--color-ocean-green);
-    border-bottom-color: var(--color-ocean-green);
+    // bg
+    &::before {
+      max-height: 100%;
+    }
+
+    // underline
+    &::after {
+      left: 0.2em;
+      right: 0.2em;
+    }
   }
   &:active {
-    opacity: 0.7;
+    // underline
+    &::after {
+      border-bottom-color: red;
+    }
   }
 
   &:focus {
     @include fakeFocus(false);
+  }
+}
+a.no-underline {
+  // underline
+  &::after {
     border-bottom-color: transparent;
   }
 }
-a.no-unerline {
-  border-bottom-style: none;
-  border-bottom-width: 0;
+a.no-underline-hover {
+  // bg
+  &::before {
+    background-color: transparent;
+  }
+}
+a.no-underline-hover-animation {
+  // bg
+  &::before {
+    transition: max-height 0.01s linear;
+  }
 }
-
 a:not([href]) {
-  border: none;
   cursor: pointer;
   user-select: none;
+  border: none;
 
   &:active,
   &:hover {
     color: var(--color-signal-orange);
   }
 }
+
+// Focus management
+html[data-whatinput='mouse'] .dnb-style *:focus {
+  outline: none;
+}
+html[data-whatinput='keyboard'] .dnb-style *:not(a):not(div):focus {
+  @include fakeFocus('mouse');
+}
+.dnb-no-focus {
+  outline: none;
+}
+.dnb-fake-focus {
+  @include fakeFocus();
+}
+.dnb-tab-focus {
+  &:focus {
+    @include tabFocus(!important);
+  }
+}
+
+// TODO: considder to take this out
+.dnb-hide-on-mobile {
+  @include allBelow(medium) {
+    display: none;
+  }
+}
+.dnb-mobile-exclusive {
+  @include allAbove(medium) {
+    display: none;
+  }
+}
+.dnb-width-limit {
+  margin: 0 auto;
+  width: 100%;
+  max-width: map-get($map: $breakpoints, $key: large);
+  padding: 0 0.5rem;
+
+  @include allAbove(medium) {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+}
+.dnb-belt {
+  padding: 1rem 0;
+  width: 100%;
+  background: $color-light-grey;
+}
+.dnb-nudge {
+  display: inline-flex;
+  flex: 0 0 100%;
+
+  @for $i from 1 through 10 {
+    &--vertical {
+      &[data-nudges='#{$i}'] {
+        @include nudger(vertical, #{$i});
+      }
+    }
+    &--horizontal {
+      &[data-nudges='#{$i}'] {
+        @include nudger(horizontal, #{$i});
+      }
+    }
+  }
+}
+.dnb-sr-only {
+  @include sr-only();
+}
+.dnb-not-sr-only {
+  @include notSrOnly();
+}
+.dnb-unstyled-list {
+  @include unstyledList();
+}
diff --git a/packages/dnb-ui-lib/src/style/core/dnb-style.scss b/packages/dnb-ui-lib/src/style/core/dnb-style.scss
index 240a1c2e78f..7840de094a3 100644
--- a/packages/dnb-ui-lib/src/style/core/dnb-style.scss
+++ b/packages/dnb-ui-lib/src/style/core/dnb-style.scss
@@ -3,82 +3,88 @@
 *
 * ======================================================================== */
 
-small {
-  font-size: 0.8125em; /* 1 */
-  line-height: 1.25rem; /* 2 */
-  margin-bottom: 1rem; /* 3 */
-}
+.dnb-style {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-top: 2.5rem;
+    margin-bottom: 1rem;
+    font-weight: 400;
+    line-height: 1em;
+  }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin-top: 2.5rem;
-  margin-bottom: 1rem;
-  font-weight: 400;
-  line-height: 1em;
-}
+  small {
+    font-size: 0.875em;
+    line-height: 1.375rem;
+    margin-bottom: 1rem;
+  }
 
-h1 {
-  font-size: 3em;
-  line-height: 3.5rem;
-  margin-bottom: 1rem;
-  font-weight: 400;
+  h1 {
+    font-size: 3em;
+    line-height: 3.5rem; // 56px
+    margin-bottom: 1rem;
+    font-weight: 400;
 
-  small {
-    font-size: 2rem !important; // 32px
-    line-height: 3rem !important; // 48px
-    margin-bottom: 1rem !important;
-    display: block !important;
+    small {
+      font-size: 2rem; // 32px
+      line-height: 3rem;
+      display: block; // TBD
+    }
   }
-}
 
-h2 {
-  font-size: 1.5em; //24px
-  line-height: 2rem; //32px
-  margin-bottom: 1rem;
-}
+  h2 {
+    font-size: 1.5em; //24px
+    line-height: 2rem; //32px
+    margin-bottom: 1rem;
+  }
 
-h3 {
-  font-size: 1.5em; // 20px
-  line-height: 2rem; // 32px
-  margin-bottom: 1rem;
-}
+  /*
+  * H3 looks the same as .lead
+  *
+  */
+  h3,
+  .lead {
+    font-size: 1.5em; // 20px
+    line-height: 2rem; // 32px
+    margin-bottom: 1rem;
+    font-weight: 400;
 
-h4 {
-  font-size: 1.25em;
-  line-height: 2rem;
-  margin-bottom: 1rem;
-}
+    small {
+      font-size: 1rem;
+      line-height: 1.5rem;
+      display: block; // TBD
+    }
+  }
 
-h5 {
-  font-size: 1em;
-}
+  h4 {
+    font-size: 1.25em;
+    line-height: 2rem;
+    margin-bottom: 1rem;
+  }
 
-h6 {
-  font-size: 0.875em;
-}
+  h5 {
+    font-size: 1em;
+  }
 
-p {
-  font-weight: 300;
-  line-height: 1.5em;
-}
+  h6 {
+    font-size: 0.875em;
+  }
 
-/*
-* 1. Equal to 13px
-* 2. Equal to 18px
-* 3. Equal to 16px
-*/
+  p {
+    font-weight: 300;
+    line-height: 1.5em;
+  }
 
-label,
-input {
-  font-size: 1em;
-}
+  label,
+  input {
+    font-size: 1em;
+  }
 
-form,
-fieldset {
-  font-size: 1rem;
-  // line-height: 1.5rem;
+  form,
+  fieldset {
+    font-size: 1rem;
+  }
 }
diff --git a/packages/dnb-ui-lib/src/style/core/reset.scss b/packages/dnb-ui-lib/src/style/core/reset.scss
index ee56e3336d2..fe25f6a9d54 100644
--- a/packages/dnb-ui-lib/src/style/core/reset.scss
+++ b/packages/dnb-ui-lib/src/style/core/reset.scss
@@ -70,8 +70,8 @@ body {
  */
 
 h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
+  //font-size: 2em;
+  //margin: 0.67em 0;
 }
 
 /* Grouping content
@@ -174,7 +174,7 @@ samp {
  */
 
 small {
-  font-size: 80%;
+  //font-size: 80%;
 }
 
 /*
diff --git a/packages/dnb-ui-lib/src/style/core/typography.scss b/packages/dnb-ui-lib/src/style/core/typography.scss
index 1a73a7a0bb0..12e0f8f909f 100644
--- a/packages/dnb-ui-lib/src/style/core/typography.scss
+++ b/packages/dnb-ui-lib/src/style/core/typography.scss
@@ -2,6 +2,7 @@
  * Typography
  * ========================================================================== */
 
+// Font usage
 .typo-book {
   font-family: $font-family-book;
   font-weight: normal;
@@ -12,16 +13,6 @@
   font-weight: normal;
   font-style: italic;
 }
-// .typo-demi {
-//   font-family: $font-family-demi;
-//   font-weight: normal;
-//   font-style: normal;
-// }
-// .typo-demi-italic {
-//   font-family: $font-family-demi-italic;
-//   font-weight: normal;
-//   font-style: normal;
-// }
 .typo-medium {
   font-weight: 500;
   font-style: normal;
@@ -47,8 +38,7 @@
   font-style: italic;
 }
 
-//Numbers
-
+// Number usage
 .typo-number {
   &--old-style {
     @include numberFeature(oldstyle-nums, onum);
@@ -64,23 +54,22 @@
   }
 }
 
-// TODO: Core typography classes
-
-.dnb-style .text-lead {
-  font-size: 1em; // 16px
-  line-height: 1.75rem; // 28
-  border-bottom: solid 1rem green; // TODO: change to margin
-  font-weight: 500;
-}
+// Typography Classes
+.dnb-style {
+  .text-lead-16 {
+    font-size: 1em; // 16px
+    line-height: 1.5rem; // 24px
+    font-weight: 400;
+  }
 
-.dnb-style .text-label {
-  font-size: 0.8125em; // 14px
-  line-height: 1.25rem; // 20px
-  border-bottom: solid 1rem hotpink;
-}
+  .text-lead-20 {
+    font-size: 1.25em; // 20px
+    line-height: 2rem; // 32px
+    font-weight: 400;
+  }
 
-.dnb-style .text-small {
-  font-size: 0.8125em; // 14px
-  line-height: 1rem; // 16px
-  border-bottom: solid 1rem hotpink;
+  .text-small {
+    font-size: 0.8125em; // 14px
+    line-height: 1.375rem; // 22px
+  }
 }
diff --git a/packages/dnb-ui-lib/src/style/core/utilities.scss b/packages/dnb-ui-lib/src/style/core/utilities.scss
index 5ce6685d314..b72886df635 100644
--- a/packages/dnb-ui-lib/src/style/core/utilities.scss
+++ b/packages/dnb-ui-lib/src/style/core/utilities.scss
@@ -9,54 +9,12 @@
   }
 }
 
-// Screen reader only helper
-@mixin sr-only() {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-.dnb-sr-only {
-  @include sr-only();
-}
-
-// This "negates" the sr-only() helper; useful if
-// we want the default state of something to be
-// for screen readers only, but we want to force
-// it to show for sighted users under more specific
-// conditions.
-@mixin notSrOnly() {
-  position: static;
-}
-.dnb-not-sr-only {
-  @include notSrOnly();
-}
-
-// Unstyled list helper
-@mixin unstyledList() {
-  margin: 0;
-  list-style-type: none;
-  padding-left: 0;
-
-  > li {
-    margin-bottom: 0;
-  }
-}
-
-.dnb-unstyled-list {
-  @include unstyledList();
-}
-
 // Font smoothing mixin
 // Only use for light text on dark background
-@mixin fontSmoothing {
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-}
+// @mixin fontSmoothing {
+//   -moz-osx-font-smoothing: grayscale;
+//   -webkit-font-smoothing: antialiased;
+// }
 
 @mixin numberFeature($variant, $setting) {
   font-variant-numeric: $variant;
@@ -100,23 +58,6 @@
   }
 }
 
-//Mixins for media queries
-//Refers to the $breakpoints object in "variables.scss"
-
-//Example usage:
-//@include allAbove(phone){ styles go here.. }
-@mixin allAbove($size) {
-  @media screen and (min-width: map-get($breakpoints, $size)) {
-    @content;
-  }
-}
-
-@mixin allBelow($size) {
-  @media screen and (max-width: map-get($breakpoints, $size)) {
-    @content;
-  }
-}
-
 @mixin fakeFocus(
   $onInput: 'mouse',
   $color: $color-emerald-green,
@@ -156,50 +97,71 @@
   }
 }
 
-.dnb-no-focus {
-  outline: none;
-}
+@mixin _drawUnderline() {
+  content: '';
+  position: absolute;
+  z-index: -1;
+  left: 0.1em;
+  right: 0.1em;
 
-.dnb-fake-focus {
-  @include fakeFocus();
-}
+  width: auto;
+  height: 100%;
 
-.dnb-tab-focus {
-  &:focus {
-    @include tabFocus(!important);
-  }
+  @content;
 }
 
-.dnb-hide-on-mobile {
-  @include allBelow(medium) {
-    display: none;
+@mixin drawUnderlineBackground() {
+  // bg
+  &::before {
+    @include _drawUnderline() {
+      left: 0.2em;
+      right: 0.2em;
+      bottom: 0;
+
+      max-height: 0%;
+      transition: max-height 0.1s ease-out;
+
+      // to make the transition show reverse, we have to define the color here
+      background-color: var(--color-mint-green);
+
+      @content;
+    }
   }
 }
 
-.dnb-mobile-exclusive {
-  @include allAbove(medium) {
-    display: none;
+@mixin drawUnderlineLine() {
+  // underline
+  &::after {
+    @include _drawUnderline() {
+      left: 0.35em;
+      right: 0.35em;
+      bottom: 0;
+      height: 1px;
+    }
+
+    // transition: left 0.1s linear 0.1s, right 0.1s linear 0.1s;
+
+    border-radius: 0.5px;
+    border-bottom: 1px solid var(--color-emerald-green);
+
+    @content;
   }
 }
 
-.dnb-width-limit {
-  margin: 0 auto;
-  width: 100%;
-  max-width: map-get($map: $breakpoints, $key: large);
-  padding: 0 0.5rem;
+// TODO: considder to take this out
 
-  @include allAbove(medium) {
-    padding-left: 1rem;
-    padding-right: 1rem;
+//Example usage:
+//@include allAbove(phone){ styles go here.. }
+@mixin allAbove($size) {
+  @media screen and (min-width: map-get($breakpoints, $size)) {
+    @content;
   }
 }
-
-.dnb-belt {
-  padding: 1rem 0;
-  width: 100%;
-  background: $color-light-grey;
+@mixin allBelow($size) {
+  @media screen and (max-width: map-get($breakpoints, $size)) {
+    @content;
+  }
 }
-
 @mixin nudger($direction, $nudge) {
   @if $direction == 'horizontal' {
     width: #{$nudge}rem;
@@ -208,21 +170,34 @@
     height: #{$nudge}rem;
   }
 }
+// Unstyled list helper
+@mixin unstyledList() {
+  margin: 0;
+  list-style-type: none;
+  padding-left: 0;
 
-.dnb-nudge {
-  display: inline-flex;
-  flex: 0 0 100%;
-
-  @for $i from 1 through 10 {
-    &--vertical {
-      &[data-nudges='#{$i}'] {
-        @include nudger(vertical, #{$i});
-      }
-    }
-    &--horizontal {
-      &[data-nudges='#{$i}'] {
-        @include nudger(horizontal, #{$i});
-      }
-    }
+  > li {
+    margin-bottom: 0;
   }
 }
+
+// Screen reader only helper
+@mixin sr-only() {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+// This "negates" the sr-only() helper; useful if
+// we want the default state of something to be
+// for screen readers only, but we want to force
+// it to show for sighted users under more specific
+// conditions.
+@mixin notSrOnly() {
+  position: static;
+}