diff --git a/.drone.yml b/.drone.yml
index 06e0ab73f5c..a82d6edebf1 100644
--- a/.drone.yml
+++ b/.drone.yml
@@ -168,9 +168,9 @@ steps:
       link_names: true
       template: >
         {{#success build.status}}
-          <@channel> *success* <{{build.link}}> ({{build.branch}} {{build.number}}{{build.tag}}) by <@{{build.author}}>.
+          <@tujoworker> success on *{{build.branch}}* <{{build.link}}> by {{build.author}}
         {{else}}
-          <@channel> *failure* <{{build.link}}> ({{build.branch}} {{build.number}}{{build.tag}}) by <@{{build.author}}>.
+          <@tujoworker> failure on *{{build.branch}}* <{{build.link}}> by {{build.author}}
         {{/success}}
       username: DroneCI
     when:
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/Examples.js
index 6875d8f7667..479b0937f75 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/Examples.js
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/Examples.js
@@ -13,7 +13,7 @@ import AllComponents from 'dnb-ui-lib/src/components/form-row/AllComponents'
 // import AllComponents from './AllComponents'
 
 const TestStyles = styled.div`
-  /* // make sure our input gets an explicit width, because of mac/linux rendering differences */
+  /* make sure our input gets an explicit width, because of mac/linux rendering differences */
   :not(.dnb-input--stretch) .dnb-input__input {
     width: 12rem;
   }
@@ -33,7 +33,11 @@ class Example extends PureComponent {
         >
           {/* @jsx */ `
 <FormRow
-    label="Vertical legend label:"
+    label={
+      <Ingress top="0" bottom="small">
+        Custom legend:
+      </Ingress>
+    }
     label_direction="vertical"
 >
   <Input label="Label A:" value="Input A" right="small" />
@@ -68,7 +72,14 @@ class Example extends PureComponent {
           data-dnb-test="form-row-combined"
         >
           {/* @jsx */ `
-<FormRow label="Vertical legend:" vertical>
+<FormRow
+  label={
+    <H2 top={false} bottom="large">
+      Custom vertical legend:
+    </H2>
+  }
+  vertical
+>
   <Input label="Vertical input A" />
   <Input label="Vertical input B" top="medium" />
   <FormRow
@@ -126,6 +137,29 @@ render(
 </FormRow>
           `}
         </ComponentBox>
+        <ComponentBox
+          caption="Vertical label direction in combination with a button"
+          data-dnb-test="form-row-vertical-label-button"
+          useRender
+        >
+          {/* @jsx */ `
+const CustomRow = styled(FormRow)\`
+  .dnb-form-row__content .dnb-button {
+    align-self: flex-end;
+    transform: translateY(0.25rem); /* 4px down */
+  }
+\`
+render(
+<CustomRow
+  label={ <H2 top="0">Legend</H2> }
+  label_direction="vertical"
+>
+  <Input label="Vertical input label" value="Input" right="small" />
+  <Button text="Button" />
+</CustomRow>
+)
+          `}
+        </ComponentBox>
         <ComponentBox
           caption="Several components inside a horizontal `FormRow` - not wrapping"
           data-dnb-test="form-row-horizontal-no_wrap"
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/form-row-info.md b/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/form-row-info.md
index b505fdc1ee1..3f29d4ac276 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/form-row-info.md
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/form-row-info.md
@@ -39,6 +39,21 @@ To give a FormRow space, properties from [Space](/uilib/components/space#tab-pro
 </FormRow>
 ```
 
+### Provider
+
+If You are using React, You can make use of a `Provider` to support properties for all nested `FormRow`s, like:
+
+```jsx
+import Provider from `dnb-ui-lib/shared/Provider`
+
+render(
+  <Provider formRow={{ vertical: true }}>
+    <FormRow>I am vertical now</FormRow>
+    <FormRow>I am vertical now</FormRow>
+  </Provider>
+)
+```
+
 ## Demos
 
 <Examples />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/form-row-properties.md b/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/form-row-properties.md
index 828f8c9cd07..30be520804f 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/form-row-properties.md
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/form-row-properties.md
@@ -14,4 +14,5 @@ draft: true
 | `section_style`                                 | _(optional)_ to enable the visual helper `.dnb-section` class. Use a supported modifier from the [Section component](/uilib/components/section#tab-properties). Defaults to null.                                                                                                                                                                                          |
 | `section_spacing`                               | _(optional)_ to modify the `spacing`. Use a supported modifier from the [Section component](/uilib/components/section#tab-properties). Defaults to null.                                                                                                                                                                                                                   |
 | `no_fieldset`                                   | _(optional)_ if set to `true`, then the internal `legend` element will be a `label` instead, and no `<fieldset>` is used. Keep in mind, that `<legend>` and `<fieldset>` **is only used if a `label` is provided**. Defaults to `false`.                                                                                                                                   |
+| `label_class`                                   | _(optional)_ if You need to style the "legend", then You can either send in a custom Component, like `label={ <H2> }`, or define Your styling class with the `label_class` property.                                                                                                                                                                                       |
 | [Space](/uilib/components/space#tab-properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                                                                                                                                                                                                                                                                                      |
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/Examples.js
index 5f66c02c88c..bff8cf075fa 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/Examples.js
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/Examples.js
@@ -49,16 +49,36 @@ class Example extends PureComponent {
           {/* @jsx */ `
 const CustomStatus = () => (
   <>
-    My info <Link href="/">with a link</Link> and more text
+    My info
+    <Link href="/">with a link</Link>
+    and more text
   </>
 )
 render(
   <Input
-    label="Input with custom content:"
+    label="Input with custom status:"
     status={ <CustomStatus /> }
     status_state="info"
     value="Input value"
   />
+)
+          `}
+        </ComponentBox>
+        <ComponentBox
+          caption="A form status with plain text/HTML"
+          useRender
+        >
+          {/* @jsx */ `
+const myHTML = \`
+  My HTML
+  <a class="dnb-anchor" href="/" target="_blank">with a link</a>
+  and more text
+\`
+const CustomStatus = () => <span dangerouslySetInnerHTML={{ __html: myHTML }} />
+render(
+  <FormStatus status="info">
+    <CustomStatus />
+  </FormStatus>
 )
           `}
         </ComponentBox>
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/space/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/space/Examples.js
index 4d6bc2aa3a7..d7ebeb6f33b 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/space/Examples.js
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/space/Examples.js
@@ -10,11 +10,10 @@ import ComponentBox from '../../../../shared/tags/ComponentBox'
 import styled from '@emotion/styled'
 import { Space } from 'dnb-ui-lib/src/components'
 
-const IS_TEST = typeof window !== 'undefined' && window.IS_TEST
 const TestStyles = styled.div`
-  /* // make sure our input gets an explicit width, because of mac/linux rendering differences */
+  /* make sure our input gets an explicit width, because of mac/linux rendering differences */
   .dnb-input {
-    &__inner {
+    &__input {
       width: 8rem;
     }
   }
@@ -25,11 +24,12 @@ const TestStyles = styled.div`
 
 class Example extends PureComponent {
   render() {
+    const IS_TEST = typeof window !== 'undefined' && window.IS_TEST
     return (
       <TestStyles>
         <ComponentBox
           caption="Spacing method #1 - `Space` component"
-          data-dnb-test="spacing-method-1"
+          data-dnb-test="spacing-method-space"
           scope={{ VisualSpace, RedBox }}
         >
           {/* @jsx */ `
@@ -41,24 +41,9 @@ class Example extends PureComponent {
 </RedBox>
           `}
         </ComponentBox>
-        <ComponentBox
-          caption="All four values will result in a equivalent margin"
-          data-dnb-test="spacing-margins"
-        >
-          {/* @jsx */ `
-<Space top="large x-small" right="2.5" bottom="2.5rem" left="40px" >
-  <details>
-    <summary>
-      I have four <code className="dnb-code">2.5rem</code> margins!
-    </summary>
-    And this are my CSS classes: <code className="dnb-code">dnb-space dnb-space__top--large dnb-space__top--x-small dnb-space__right--large dnb-space__right--x-small dnb-space__bottom--large dnb-space__bottom--x-small dnb-space__left--large dnb-space__left--x-small</code>
-  </details>
-</Space>
-          `}
-        </ComponentBox>
         <ComponentBox
           caption="Spacing method #2 - `FormRow` component"
-          data-dnb-test="spacing-method-1"
+          data-dnb-test="spacing-method-form-row"
         >
           {/* @jsx */ `
 <FormRow>
@@ -71,7 +56,7 @@ class Example extends PureComponent {
         </ComponentBox>
         <ComponentBox
           caption="Spacing method #3 - Define the space directly"
-          data-dnb-test="spacing-method-1"
+          data-dnb-test="spacing-method-component"
         >
           {/* @jsx */ `
 <FormRow>
@@ -80,6 +65,35 @@ class Example extends PureComponent {
 </FormRow>
           `}
         </ComponentBox>
+        <ComponentBox
+          caption="Spacing with `collapse` set to false"
+          hideCode
+        >
+          {/* @jsx */ `
+<Space bottom="small" collapse={false}>
+  <div>I have <code className="dnb-code">bottom="small"</code></div>
+</Space>
+<Space top="large">
+  <div>I have <code className="dnb-code">top="large"</code></div>
+</Space>
+          `}
+        </ComponentBox>
+        <ComponentBox
+          caption="All four values will result in a equivalent margin"
+          data-dnb-test="spacing-margins"
+          hideCode
+        >
+          {/* @jsx */ `
+<Space top="large x-small" right="2.5" bottom="2.5rem" left="40px" >
+  <details>
+    <summary>
+      I have four <code className="dnb-code">2.5rem</code> margins!
+    </summary>
+    And this are my CSS classes: <code className="dnb-code">dnb-space dnb-space__top--large dnb-space__top--x-small dnb-space__right--large dnb-space__right--x-small dnb-space__bottom--large dnb-space__bottom--x-small dnb-space__left--large dnb-space__left--x-small</code>
+  </details>
+</Space>
+          `}
+        </ComponentBox>
         {false && IS_TEST && (
           <ComponentBox
             caption="All spacing patterns listed (screenshot tests)"
@@ -261,7 +275,11 @@ const MagicBox = ({ label, ...rest }) => {
   )
 }
 MagicBox.propTypes = {
-  label: PropTypes.string
+  label: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func,
+    PropTypes.node
+  ])
 }
 MagicBox.defaultProps = {
   label: null
@@ -298,7 +316,11 @@ const VisualSpace = ({ label, children, ...rest }) => {
   )
 }
 VisualSpace.propTypes = {
-  label: PropTypes.string,
+  label: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func,
+    PropTypes.node
+  ]),
   children: PropTypes.node
 }
 VisualSpace.defaultProps = {
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/space/space-info.md b/packages/dnb-design-system-portal/src/docs/uilib/components/space/space-info.md
index 532352b40c6..23ee06b3a68 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/space/space-info.md
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/space/space-info.md
@@ -10,7 +10,7 @@ import SpacingTable from 'Pages/uilib/usage/layout/spacing-table.md'
 The `Space` component provides `margins` within the [provided spacing patterns](/uilib/usage/layout/spacing#spacing-helpers).
 
 The reason why this exists is to make Your Syntax as clean as possible.
-This way You see directly in words what the spacing is for every effected component.
+This way You see directly in words what the spacing is for every effected component
 
 ### Spacing Table
 
@@ -40,6 +40,16 @@ Every component supports the spacing patterns, so it's possible to send in the `
 <Button top="large x-small medium" />
 ```
 
+### Does it not work as expected?
+
+Is `margin` not giving the expected spacing? That may be the reason due to **Margin Collapsing**. Margins collapse in the following situations:
+
+- Adjacent siblings
+- Completely empty boxes
+- Parent and first or last child element
+
+The best solution is to only use once direction of margins e.g. `bottom`. Or You can set the [collapse property](/uilib/components/space#tab-properties) to `false`.
+
 ## Demos
 
 <Examples />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/space/space-properties.md b/packages/dnb-design-system-portal/src/docs/uilib/components/space/space-properties.md
index 0200a2bf9e0..7a1783e2be2 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/space/space-properties.md
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/space/space-properties.md
@@ -2,11 +2,31 @@
 draft: true
 ---
 
-| Properties | Description                                                                                                                                |
-| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
-| `top`      | _(optional)_ will use `margin-top`                                                                                                         |
-| `left`     | _(optional)_ will use `margin-left`                                                                                                        |
-| `bottom`   | _(optional)_ will use `margin-bottom`                                                                                                      |
-| `right`    | _(optional)_ will use `margin-right`                                                                                                       |
-| `element`  | _(optional)_ defines the HTML element used. Defaults to `div`.                                                                             |
-| `inline`   | _(optional)_ if set to `true`, then `display: inline-block;` is used, so the HTML elements gets aligned horizontally. Defaults to `false`. |
+| Properties | Description                                                                                                                                                                                            |
+| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `top`      | _(optional)_ will use `margin-top`                                                                                                                                                                     |
+| `left`     | _(optional)_ will use `margin-left`                                                                                                                                                                    |
+| `bottom`   | _(optional)_ will use `margin-bottom`                                                                                                                                                                  |
+| `right`    | _(optional)_ will use `margin-right`                                                                                                                                                                   |
+| `element`  | _(optional)_ defines the HTML element used. Defaults to `div`.                                                                                                                                         |
+| `inline`   | _(optional)_ if set to `true`, then `display: inline-block;` is used, so the HTML elements gets aligned horizontally. Defaults to `false`.                                                             |
+| `collapse` | _(optional)_ if set to `false`, then a wrapper with `display: flow-root;` is used. This way You avoid **Margin Collapsing**. Defaults to `true`. _Note:_ You can't use `inline="true"` in combination. |
+
+## Zero
+
+Use either `0` or `false` (as a number/boolean os string) to set a `margin` of 0.
+
+## Provider
+
+Also, Provider is supporting the `collapse` property.
+
+```jsx
+import Provider from `dnb-ui-lib/shared/Provider`
+
+render(
+  <Provider space={{ collapse: false }}>
+    <Space>I do not collapse</Space>
+    <Space>I do not collapse</Space>
+  </Provider>
+)
+```
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/intro/09-layout.md b/packages/dnb-design-system-portal/src/docs/uilib/intro/09-layout.md
index 0860b9b82f0..d93c23ce978 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/intro/09-layout.md
+++ b/packages/dnb-design-system-portal/src/docs/uilib/intro/09-layout.md
@@ -4,6 +4,8 @@ draft: true
 order: 9
 ---
 
+import ComponentBox from 'Tags/ComponentBox'
+
 <Intro>
 
 # Layout
@@ -20,13 +22,18 @@ Remember, everything should be in the **8px grid** (0.5rem) spacing - even it th
 
 ![UX layout spacing](../usage/assets/ux-layout-spacing.png)
 
-You may have a [look at the layout docs](!/uilib/usage/layout) as well as [the spacing helpers](!/uilib/usage/layout/spacing).
+You may have a [look at the layout docs](!/uilib/usage/layout) as well as [the spacing helpers](!/uilib/usage/layout/spacing) and the [Space](/uilib/components/space) component.
+
+But there is also support for basic spacing in every component:
 
 ### Example
 
-```css
-margin-top: var(--spacing-large);
-```
+<ComponentBox>
+{`
+<Input label="My Input" value="Input" right="small" />
+<Button text="Button" />
+`}
+</ComponentBox>
 
 ---
 
diff --git a/packages/dnb-design-system-portal/src/shared/parts/PortalStyle.js b/packages/dnb-design-system-portal/src/shared/parts/PortalStyle.js
index 8f3889393ba..d553b2a03ee 100644
--- a/packages/dnb-design-system-portal/src/shared/parts/PortalStyle.js
+++ b/packages/dnb-design-system-portal/src/shared/parts/PortalStyle.js
@@ -252,6 +252,10 @@ export default css`
     line-height: 2rem;
   }
 
+  .gatsby-resp-image-background-image {
+    padding-bottom: 0 !important;
+  }
+
   /* Do not delete, this is used for screenshot testing */
   ${testWrapperStyle};
 `
diff --git a/packages/dnb-ui-lib/src/components/checkbox/Checkbox.js b/packages/dnb-ui-lib/src/components/checkbox/Checkbox.js
index cc5a6712ac2..d58cb910667 100644
--- a/packages/dnb-ui-lib/src/components/checkbox/Checkbox.js
+++ b/packages/dnb-ui-lib/src/components/checkbox/Checkbox.js
@@ -26,7 +26,11 @@ const renderProps = {
 }
 
 export const propTypes = {
-  label: PropTypes.string,
+  label: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func,
+    PropTypes.node
+  ]),
   label_position: PropTypes.oneOf(['left', 'right']),
   title: PropTypes.string,
   default_state: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
diff --git a/packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap b/packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap
index 901c10aa3f9..a410729e4c0 100644
--- a/packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap
@@ -56,7 +56,7 @@ exports[`Checkbox component have to match snapshot 1`] = `
   value={null}
 >
   <span
-    className="dnb-checkbox dnb-checkbox--label-position-left"
+    className="dnb-checkbox dnb-checkbox--label-position-left dnb-space__readOnly--zero"
   >
     <span
       className="dnb-checkbox__order"
diff --git a/packages/dnb-ui-lib/src/components/date-picker/DatePicker.js b/packages/dnb-ui-lib/src/components/date-picker/DatePicker.js
index a14bab82d74..8911add2c28 100644
--- a/packages/dnb-ui-lib/src/components/date-picker/DatePicker.js
+++ b/packages/dnb-ui-lib/src/components/date-picker/DatePicker.js
@@ -93,7 +93,11 @@ export const propTypes = {
   range: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   link: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   sync: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  label: PropTypes.string,
+  label: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func,
+    PropTypes.node
+  ]),
   label_direction: PropTypes.oneOf(['horizontal', 'vertical']),
   disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   status: PropTypes.oneOfType([
diff --git a/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap b/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap
index 21230e86ae6..945171603bd 100644
--- a/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap
@@ -71,7 +71,7 @@ exports[`DatePicker component have to match snapshot 1`] = `
   sync={true}
 >
   <span
-    className="dnb-date-picker dnb-date-picker__status--error dnb-date-picker--hidden dnb-date-picker--show-input dnb-date-picker--show-footer"
+    className="dnb-date-picker dnb-date-picker__status--error dnb-date-picker--hidden dnb-date-picker--show-input dnb-date-picker--show-footer dnb-space__hide_navigation--zero dnb-space__hide_navigation_buttons--zero dnb-space__hide_days--zero dnb-space__only_month--zero dnb-space__link--zero dnb-space__opened--zero dnb-space__no_animation--zero"
   >
     <span
       aria-hidden={true}
@@ -166,7 +166,7 @@ exports[`DatePicker component have to match snapshot 1`] = `
             value={null}
           >
             <span
-              className="dnb-input dnb-input--text dnb-input--has-submit-button dnb-input__status--error"
+              className="dnb-input dnb-input--text dnb-input--has-submit-button dnb-input__status--error dnb-space__disabled--zero dnb-space__readOnly--zero"
             >
               <span
                 className="dnb-input__inner"
@@ -668,7 +668,7 @@ exports[`DatePicker component have to match snapshot 1`] = `
                       >
                         <button
                           aria-expanded={false}
-                          className="dnb-button dnb-button--secondary dnb-button--size-medium dnb-button--icon-position-right dnb-button--has-icon dnb-input__submit-button__button"
+                          className="dnb-button dnb-button--secondary dnb-button--size-medium dnb-button--icon-position-right dnb-button--has-icon dnb-space__aria-expanded--zero dnb-space__bounding--zero dnb-input__submit-button__button"
                           id="date-picker-id"
                           onBlur={[Function]}
                           onClick={[Function]}
@@ -723,7 +723,7 @@ exports[`DatePicker component have to match snapshot 1`] = `
                                 alt="calendar"
                                 aria-hidden={false}
                                 aria-label="calendar"
-                                className="dnb-icon dnb-button__icon"
+                                className="dnb-icon dnb-space__aria-hidden--zero dnb-button__icon"
                                 role="img"
                               >
                                 <calendar>
@@ -768,7 +768,7 @@ exports[`DatePicker component have to match snapshot 1`] = `
         >
           <span
             aria-live="assertive"
-            className="dnb-form-status dnb-form-status--error dnb-form-status--has-content"
+            className="dnb-form-status dnb-form-status--error dnb-form-status--has-content dnb-space__hidden--zero"
             hidden={false}
           >
             <span
@@ -1439,7 +1439,8 @@ legend.dnb-form-label {
     display: flex;
     align-items: center;
     overflow: hidden;
-    border: var(--input-border-width) solid var(--color-sea-green-alt); }
+    border: var(--input-border-width) solid var(--color-sea-green-alt);
+    line-height: var(--input-height); }
   .dnb-input__input {
     border: none;
     outline: none;
@@ -1448,7 +1449,6 @@ legend.dnb-form-label {
     user-select: none; }
   .dnb-input__shell, .dnb-input__input {
     height: var(--input-height);
-    line-height: var(--input-height);
     border-radius: var(--input-border-radius); }
   .dnb-input__placeholder, .dnb-input__input {
     width: 100%;
@@ -1457,7 +1457,6 @@ legend.dnb-form-label {
     text-align: left;
     color: inherit;
     font-size: inherit;
-    line-height: inherit;
     background-color: transparent;
     transform: translateY(var(--input-border-width));
     font-variant-numeric: lining-nums;
@@ -1470,11 +1469,14 @@ legend.dnb-form-label {
     left: 0;
     overflow: hidden;
     white-space: nowrap;
-    text-overflow: ellipsis; }
+    text-overflow: ellipsis;
+    line-height: inherit; }
   .dnb-input__input::-webkit-search-cancel-button {
     display: none; }
   .dnb-input__input::-ms-clear {
     display: none; }
+  .dnb-core-style .dnb-input__input {
+    line-height: 1em; }
   .dnb-input--has-submit-button .dnb-input__placeholder,
   .dnb-input--has-submit-button .dnb-input__input {
     padding-right: calc(var(--input-padding) * 2.5); }
@@ -1491,10 +1493,11 @@ legend.dnb-form-label {
     margin-left: calc(1px - 1px - var(--input-height)); }
     .dnb-input__submit-button__button {
       border-radius: 50%; }
+  .dnb-input--medium .dnb-input__shell {
+    line-height: var(--input-height--medium); }
   .dnb-input--medium .dnb-input__shell,
   .dnb-input--medium .dnb-input__input {
     height: var(--input-height--medium);
-    line-height: var(--input-height--medium);
     border-radius: var(--input-border-radius--medium); }
   .dnb-input--medium .dnb-input__placeholder,
   .dnb-input--medium .dnb-input__input {
@@ -1509,10 +1512,11 @@ legend.dnb-form-label {
   .dnb-input--medium.dnb-input--has-submit-button .dnb-input__placeholder,
   .dnb-input--medium.dnb-input--has-submit-button .dnb-input__input {
     padding-right: calc(var(--input-padding--medium) * 2.5); }
+  .dnb-input--large .dnb-input__shell {
+    line-height: var(--input-height--large); }
   .dnb-input--large .dnb-input__shell,
   .dnb-input--large .dnb-input__input {
     height: var(--input-height--large);
-    line-height: var(--input-height--large);
     border-radius: var(--input-border-radius--large); }
   .dnb-input--large .dnb-input__placeholder,
   .dnb-input--large .dnb-input__input {
@@ -1553,13 +1557,19 @@ legend.dnb-form-label {
     align-items: flex-start; }
     .dnb-input[class*='__status'] > .dnb-form-label {
       margin-top: 0.25rem; }
+  @media (max-width: 40em) {
+    .dnb-input {
+      flex-direction: column;
+      align-items: flex-start; }
+      .dnb-input > .dnb-form-label {
+        margin-bottom: 0.5rem; } }
   @media screen and (-ms-high-contrast: none) {
     .dnb-input {
       vertical-align: baseline; }
       .dnb-form-row--horizontal .dnb-input, .dnb-input:not(.dnb-input--stretch) {
         flex: none; }
-      .dnb-input__placeholder, .dnb-input__input {
-        transform: translateY(-0.125rem); } }
+      .dnb-input__input, .dnb-input__placeholder {
+        transform: translateY(-0.0625rem); } }
 
 .dnb-dropdown {
   font-family: var(--font-family-default);
@@ -1834,6 +1844,12 @@ legend.dnb-form-label {
     align-items: flex-start; }
     .dnb-date-picker[class*='__status'] > .dnb-form-label {
       margin-top: 0.25rem; }
+  @media (max-width: 40em) {
+    .dnb-date-picker {
+      flex-direction: column;
+      align-items: flex-start; }
+      .dnb-date-picker > .dnb-form-label {
+        margin-bottom: 0.5rem; } }
   @media screen and (-ms-high-contrast: none) {
     .dnb-date-picker {
       flex: none; }
diff --git a/packages/dnb-ui-lib/src/components/date-picker/style/_date-picker.scss b/packages/dnb-ui-lib/src/components/date-picker/style/_date-picker.scss
index be8095414f4..d1ece9cc816 100644
--- a/packages/dnb-ui-lib/src/components/date-picker/style/_date-picker.scss
+++ b/packages/dnb-ui-lib/src/components/date-picker/style/_date-picker.scss
@@ -380,6 +380,14 @@
     }
   }
 
+  @media (max-width: 40em) {
+    flex-direction: column;
+    align-items: flex-start;
+    > .dnb-form-label {
+      margin-bottom: 0.5rem;
+    }
+  }
+
   // IE fix
   @media screen and (-ms-high-contrast: none) {
     flex: none;
diff --git a/packages/dnb-ui-lib/src/components/dropdown/Dropdown.js b/packages/dnb-ui-lib/src/components/dropdown/Dropdown.js
index 5fa531684c7..88fd5dcecd9 100644
--- a/packages/dnb-ui-lib/src/components/dropdown/Dropdown.js
+++ b/packages/dnb-ui-lib/src/components/dropdown/Dropdown.js
@@ -36,7 +36,11 @@ export const propTypes = {
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   icon: PropTypes.string,
   icon_position: PropTypes.string,
-  label: PropTypes.string,
+  label: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func,
+    PropTypes.node
+  ]),
   label_direction: PropTypes.oneOf(['horizontal', 'vertical']),
   status: PropTypes.oneOfType([
     PropTypes.string,
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 36e3d445b21..4d74bd1ec17 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
@@ -174,7 +174,7 @@ exports[`Dropdown component have to match snapshot 1`] = `
       >
         <span
           aria-live="assertive"
-          className="dnb-form-status dnb-form-status--error dnb-form-status--status_animation dnb-form-status--has-content"
+          className="dnb-form-status dnb-form-status--error dnb-form-status--status_animation dnb-form-status--has-content dnb-space__hidden--zero"
           hidden={false}
         >
           <span
@@ -913,6 +913,12 @@ legend.dnb-form-label {
     align-items: flex-start; }
     .dnb-dropdown[class*='__status'] > .dnb-form-label {
       margin-top: 0.25rem; }
+  @media (max-width: 40em) {
+    .dnb-dropdown {
+      flex-direction: column;
+      align-items: flex-start; }
+      .dnb-dropdown > .dnb-form-label {
+        margin-bottom: 0.5rem; } }
   @media screen and (-ms-high-contrast: none) {
     .dnb-dropdown {
       flex: none;
diff --git a/packages/dnb-ui-lib/src/components/dropdown/style/_dropdown.scss b/packages/dnb-ui-lib/src/components/dropdown/style/_dropdown.scss
index d999a68a8f7..9130042778c 100644
--- a/packages/dnb-ui-lib/src/components/dropdown/style/_dropdown.scss
+++ b/packages/dnb-ui-lib/src/components/dropdown/style/_dropdown.scss
@@ -390,6 +390,14 @@
     }
   }
 
+  @media (max-width: 40em) {
+    flex-direction: column;
+    align-items: flex-start;
+    > .dnb-form-label {
+      margin-bottom: 0.5rem;
+    }
+  }
+
   // IE fix
   @media screen and (-ms-high-contrast: none) {
     flex: none;
diff --git a/packages/dnb-ui-lib/src/components/form-label/FormLabel.js b/packages/dnb-ui-lib/src/components/form-label/FormLabel.js
index ab7c1bbd58d..e0c2c1289ad 100644
--- a/packages/dnb-ui-lib/src/components/form-label/FormLabel.js
+++ b/packages/dnb-ui-lib/src/components/form-label/FormLabel.js
@@ -24,7 +24,11 @@ export const propTypes = {
   for_id: PropTypes.string,
   element: PropTypes.string,
   title: PropTypes.string,
-  text: PropTypes.string,
+  text: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func,
+    PropTypes.node
+  ]),
   id: PropTypes.string,
   class: PropTypes.string,
   disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
diff --git a/packages/dnb-ui-lib/src/components/form-row/FormRow.js b/packages/dnb-ui-lib/src/components/form-row/FormRow.js
index 73b41c048ad..0a2fec21724 100644
--- a/packages/dnb-ui-lib/src/components/form-row/FormRow.js
+++ b/packages/dnb-ui-lib/src/components/form-row/FormRow.js
@@ -24,9 +24,14 @@ const renderProps = {
 
 export const propTypes = {
   id: PropTypes.string,
-  label: PropTypes.string,
+  label: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func,
+    PropTypes.node
+  ]),
   label_direction: PropTypes.oneOf(['vertical', 'horizontal']),
   label_id: PropTypes.string,
+  label_class: PropTypes.string,
   no_label: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   no_fieldset: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   indent: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
@@ -57,6 +62,7 @@ export const defaultProps = {
   label: null,
   label_direction: null,
   label_id: null,
+  label_class: null,
   no_label: false,
   no_fieldset: null,
   indent: null,
@@ -131,6 +137,7 @@ export default class FormRow extends PureComponent {
       label,
       label_direction,
       label_id,
+      label_class,
       no_fieldset,
       no_label,
       indent,
@@ -158,7 +165,9 @@ export default class FormRow extends PureComponent {
       label = nestedLabel
     }
     const hasLabel =
-      typeof label === 'string' && label.length > 0 ? true : false
+      (typeof label === 'string' && label.length > 0) || label
+        ? true
+        : false
 
     const id = this._id
     const params = {
@@ -222,7 +231,7 @@ export default class FormRow extends PureComponent {
           <div {...params}>
             {label && (
               <FormLabel
-                className="dnb-form-row__label"
+                className={classnames('dnb-form-row__label', label_class)}
                 id={(label_id ? label_id : id) + '-label'}
                 for_id={useFieldset ? null : id} // we don't use for_id, because we don't have a single element to target to
                 text={label}
diff --git a/packages/dnb-ui-lib/src/components/form-row/__tests__/FormRow.screenshot.test.js b/packages/dnb-ui-lib/src/components/form-row/__tests__/FormRow.screenshot.test.js
index 62ed4c6b7e4..c38e0e72489 100644
--- a/packages/dnb-ui-lib/src/components/form-row/__tests__/FormRow.screenshot.test.js
+++ b/packages/dnb-ui-lib/src/components/form-row/__tests__/FormRow.screenshot.test.js
@@ -29,6 +29,12 @@ describe('FormRow screenshot', () => {
     })
     expect(screenshot).toMatchImageSnapshot()
   })
+  it('have to match vertical form-row label with a button', async () => {
+    const screenshot = await testPageScreenshot({
+      selector: '[data-dnb-test="form-row-vertical-label-button"]'
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
   it('have to match vertical form-row', async () => {
     const screenshot = await testPageScreenshot({
       selector: '[data-dnb-test="form-row-vertical"]'
diff --git a/packages/dnb-ui-lib/src/components/form-row/__tests__/__snapshots__/FormRow.test.js.snap b/packages/dnb-ui-lib/src/components/form-row/__tests__/__snapshots__/FormRow.test.js.snap
index ec3308b128f..7324bdef023 100644
--- a/packages/dnb-ui-lib/src/components/form-row/__tests__/__snapshots__/FormRow.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/form-row/__tests__/__snapshots__/FormRow.test.js.snap
@@ -10,6 +10,7 @@ exports[`FormRow component have to match snapshot 1`] = `
   indent="indent"
   indent_offset="indent_offset"
   label="label"
+  label_class="label_class"
   label_direction="horizontal"
   label_id="label_id"
   no_fieldset="no_fieldset"
@@ -33,7 +34,7 @@ exports[`FormRow component have to match snapshot 1`] = `
       >
         <FormLabel
           class={null}
-          className="dnb-form-row__label"
+          className="dnb-form-row__label label_class"
           direction="horizontal"
           disabled={false}
           element="legend"
@@ -46,12 +47,12 @@ exports[`FormRow component have to match snapshot 1`] = `
           vertical={null}
         >
           <Element
-            className="dnb-form-label dnb-form-label--horizontal dnb-form-row__label"
+            className="dnb-form-label dnb-form-label--horizontal dnb-space__disabled--zero dnb-form-row__label label_class"
             id="label_id-label"
             is="legend"
           >
             <legend
-              className="dnb-form-label dnb-form-label--horizontal dnb-form-row__label"
+              className="dnb-form-label dnb-form-label--horizontal dnb-space__disabled--zero dnb-form-row__label label_class"
               id="label_id-label"
             >
               label
@@ -270,6 +271,16 @@ legend.dnb-form-label {
   @media (max-width: 40em) {
     .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] {
       display: block; } }
+  @media (max-width: 40em) {
+    .dnb-form-row:not(.dnb-form-row--vertical) {
+      flex-direction: column;
+      align-items: flex-start; }
+      .dnb-form-row:not(.dnb-form-row--vertical) > .dnb-form-label {
+        margin-bottom: 0.5rem; }
+      .dnb-form-row:not(.dnb-form-row--vertical) > .dnb-form-row__content {
+        flex-direction: column; }
+        .dnb-form-row:not(.dnb-form-row--vertical) > .dnb-form-row__content .dnb-form-label {
+          margin-top: 1rem; } }
   .dnb-form-row--vertical > .dnb-form-label {
     margin-bottom: 0.5rem; }
   .dnb-form-row--vertical > .dnb-form-row__content {
diff --git a/packages/dnb-ui-lib/src/components/form-row/__tests__/__snapshots__/form-row-screenshot-test-js-form-row-screenshot-have-to-match-a-combined-form-row-1-0cc4d.snap.png b/packages/dnb-ui-lib/src/components/form-row/__tests__/__snapshots__/form-row-screenshot-test-js-form-row-screenshot-have-to-match-a-combined-form-row-1-0cc4d.snap.png
index 158ef10d47f..244a0601b09 100644
Binary files a/packages/dnb-ui-lib/src/components/form-row/__tests__/__snapshots__/form-row-screenshot-test-js-form-row-screenshot-have-to-match-a-combined-form-row-1-0cc4d.snap.png and b/packages/dnb-ui-lib/src/components/form-row/__tests__/__snapshots__/form-row-screenshot-test-js-form-row-screenshot-have-to-match-a-combined-form-row-1-0cc4d.snap.png differ
diff --git a/packages/dnb-ui-lib/src/components/form-row/__tests__/__snapshots__/form-row-screenshot-test-js-form-row-screenshot-have-to-match-vertical-form-row-label-1-7028c.snap.png b/packages/dnb-ui-lib/src/components/form-row/__tests__/__snapshots__/form-row-screenshot-test-js-form-row-screenshot-have-to-match-vertical-form-row-label-1-7028c.snap.png
index f4d1dd30728..8d57d9f247c 100644
Binary files a/packages/dnb-ui-lib/src/components/form-row/__tests__/__snapshots__/form-row-screenshot-test-js-form-row-screenshot-have-to-match-vertical-form-row-label-1-7028c.snap.png and b/packages/dnb-ui-lib/src/components/form-row/__tests__/__snapshots__/form-row-screenshot-test-js-form-row-screenshot-have-to-match-vertical-form-row-label-1-7028c.snap.png differ
diff --git a/packages/dnb-ui-lib/src/components/form-row/__tests__/__snapshots__/form-row-screenshot-test-js-form-row-screenshot-have-to-match-vertical-form-row-label-with-a-button-1-f31c7.snap.png b/packages/dnb-ui-lib/src/components/form-row/__tests__/__snapshots__/form-row-screenshot-test-js-form-row-screenshot-have-to-match-vertical-form-row-label-with-a-button-1-f31c7.snap.png
new file mode 100644
index 00000000000..15e06127b2c
Binary files /dev/null and b/packages/dnb-ui-lib/src/components/form-row/__tests__/__snapshots__/form-row-screenshot-test-js-form-row-screenshot-have-to-match-vertical-form-row-label-with-a-button-1-f31c7.snap.png differ
diff --git a/packages/dnb-ui-lib/src/components/form-row/style/_form-row.scss b/packages/dnb-ui-lib/src/components/form-row/style/_form-row.scss
index 6936d4de4aa..802e31f3ee3 100644
--- a/packages/dnb-ui-lib/src/components/form-row/style/_form-row.scss
+++ b/packages/dnb-ui-lib/src/components/form-row/style/_form-row.scss
@@ -122,6 +122,20 @@
         display: block;
       }
     }
+
+    @media (max-width: 40em) {
+      flex-direction: column;
+      align-items: flex-start;
+      & > .dnb-form-label {
+        margin-bottom: 0.5rem;
+      }
+      & > .dnb-form-row__content {
+        flex-direction: column;
+        .dnb-form-label {
+          margin-top: 1rem;
+        }
+      }
+    }
   }
 
   // This is currently not needed
diff --git a/packages/dnb-ui-lib/src/components/form-status/__tests__/__snapshots__/FormStatus.test.js.snap b/packages/dnb-ui-lib/src/components/form-status/__tests__/__snapshots__/FormStatus.test.js.snap
index e0709beb4db..77e87ab0456 100644
--- a/packages/dnb-ui-lib/src/components/form-status/__tests__/__snapshots__/FormStatus.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/form-status/__tests__/__snapshots__/FormStatus.test.js.snap
@@ -16,7 +16,7 @@ exports[`FormStatus component have to match snapshot 1`] = `
 >
   <span
     aria-live="assertive"
-    className="dnb-form-status dnb-form-status--error dnb-form-status--animation dnb-form-status--has-content className class"
+    className="dnb-form-status dnb-form-status--error dnb-form-status--animation dnb-form-status--has-content dnb-space__hidden--zero className class"
     hidden={false}
     title="title"
   >
diff --git a/packages/dnb-ui-lib/src/components/form-status/__tests__/__snapshots__/form-status-screenshot-test-js-form-status-screenshot-have-to-match-custom-content-1-f2fd5.snap.png b/packages/dnb-ui-lib/src/components/form-status/__tests__/__snapshots__/form-status-screenshot-test-js-form-status-screenshot-have-to-match-custom-content-1-f2fd5.snap.png
index 4ba640cbe4e..8e70b851a72 100644
Binary files a/packages/dnb-ui-lib/src/components/form-status/__tests__/__snapshots__/form-status-screenshot-test-js-form-status-screenshot-have-to-match-custom-content-1-f2fd5.snap.png and b/packages/dnb-ui-lib/src/components/form-status/__tests__/__snapshots__/form-status-screenshot-test-js-form-status-screenshot-have-to-match-custom-content-1-f2fd5.snap.png differ
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 b887f67746b..b699a462ae3 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
@@ -61,7 +61,7 @@ exports[`InputMasked component have to match type="text" snapshot 1`] = `
     value="test"
   >
     <span
-      className="dnb-input dnb-input--text dnb-input-masked"
+      className="dnb-input dnb-input--text dnb-space__disabled--zero dnb-space__readOnly--zero dnb-input-masked"
     >
       <span
         className="dnb-input__inner"
@@ -618,7 +618,8 @@ legend.dnb-form-label {
     display: flex;
     align-items: center;
     overflow: hidden;
-    border: var(--input-border-width) solid var(--color-sea-green-alt); }
+    border: var(--input-border-width) solid var(--color-sea-green-alt);
+    line-height: var(--input-height); }
   .dnb-input__input {
     border: none;
     outline: none;
@@ -627,7 +628,6 @@ legend.dnb-form-label {
     user-select: none; }
   .dnb-input__shell, .dnb-input__input {
     height: var(--input-height);
-    line-height: var(--input-height);
     border-radius: var(--input-border-radius); }
   .dnb-input__placeholder, .dnb-input__input {
     width: 100%;
@@ -636,7 +636,6 @@ legend.dnb-form-label {
     text-align: left;
     color: inherit;
     font-size: inherit;
-    line-height: inherit;
     background-color: transparent;
     transform: translateY(var(--input-border-width));
     font-variant-numeric: lining-nums;
@@ -649,11 +648,14 @@ legend.dnb-form-label {
     left: 0;
     overflow: hidden;
     white-space: nowrap;
-    text-overflow: ellipsis; }
+    text-overflow: ellipsis;
+    line-height: inherit; }
   .dnb-input__input::-webkit-search-cancel-button {
     display: none; }
   .dnb-input__input::-ms-clear {
     display: none; }
+  .dnb-core-style .dnb-input__input {
+    line-height: 1em; }
   .dnb-input--has-submit-button .dnb-input__placeholder,
   .dnb-input--has-submit-button .dnb-input__input {
     padding-right: calc(var(--input-padding) * 2.5); }
@@ -670,10 +672,11 @@ legend.dnb-form-label {
     margin-left: calc(1px - 1px - var(--input-height)); }
     .dnb-input__submit-button__button {
       border-radius: 50%; }
+  .dnb-input--medium .dnb-input__shell {
+    line-height: var(--input-height--medium); }
   .dnb-input--medium .dnb-input__shell,
   .dnb-input--medium .dnb-input__input {
     height: var(--input-height--medium);
-    line-height: var(--input-height--medium);
     border-radius: var(--input-border-radius--medium); }
   .dnb-input--medium .dnb-input__placeholder,
   .dnb-input--medium .dnb-input__input {
@@ -688,10 +691,11 @@ legend.dnb-form-label {
   .dnb-input--medium.dnb-input--has-submit-button .dnb-input__placeholder,
   .dnb-input--medium.dnb-input--has-submit-button .dnb-input__input {
     padding-right: calc(var(--input-padding--medium) * 2.5); }
+  .dnb-input--large .dnb-input__shell {
+    line-height: var(--input-height--large); }
   .dnb-input--large .dnb-input__shell,
   .dnb-input--large .dnb-input__input {
     height: var(--input-height--large);
-    line-height: var(--input-height--large);
     border-radius: var(--input-border-radius--large); }
   .dnb-input--large .dnb-input__placeholder,
   .dnb-input--large .dnb-input__input {
@@ -732,13 +736,19 @@ legend.dnb-form-label {
     align-items: flex-start; }
     .dnb-input[class*='__status'] > .dnb-form-label {
       margin-top: 0.25rem; }
+  @media (max-width: 40em) {
+    .dnb-input {
+      flex-direction: column;
+      align-items: flex-start; }
+      .dnb-input > .dnb-form-label {
+        margin-bottom: 0.5rem; } }
   @media screen and (-ms-high-contrast: none) {
     .dnb-input {
       vertical-align: baseline; }
       .dnb-form-row--horizontal .dnb-input, .dnb-input:not(.dnb-input--stretch) {
         flex: none; }
-      .dnb-input__placeholder, .dnb-input__input {
-        transform: translateY(-0.125rem); } }
+      .dnb-input__input, .dnb-input__placeholder {
+        transform: translateY(-0.0625rem); } }
 
 .dnb-input-masked {
   font-family: var(--font-family-default);
diff --git a/packages/dnb-ui-lib/src/components/input/Input.js b/packages/dnb-ui-lib/src/components/input/Input.js
index 11e06d6300a..198ee8cb738 100644
--- a/packages/dnb-ui-lib/src/components/input/Input.js
+++ b/packages/dnb-ui-lib/src/components/input/Input.js
@@ -36,7 +36,11 @@ export const propTypes = {
   size: PropTypes.string,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   id: PropTypes.string,
-  label: PropTypes.string,
+  label: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func,
+    PropTypes.node
+  ]),
   label_direction: PropTypes.oneOf(['horizontal', 'vertical']),
   status: PropTypes.oneOfType([
     PropTypes.string,
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 8bad368e778..93aede89f0e 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
@@ -99,7 +99,7 @@ exports[`Input component have to match type="search" snapshot 1`] = `
   value="test"
 >
   <span
-    className="dnb-input dnb-input--search dnb-input--has-submit-button"
+    className="dnb-input dnb-input--search dnb-input--has-submit-button dnb-space__disabled--zero dnb-space__readOnly--zero"
   >
     <span
       className="dnb-input__inner"
@@ -234,7 +234,7 @@ exports[`Input component have to match type="search" snapshot 1`] = `
               variant="secondary"
             >
               <button
-                className="dnb-button dnb-button--secondary dnb-button--size-medium dnb-button--icon-position-right dnb-button--has-icon dnb-input__submit-button__button"
+                className="dnb-button dnb-button--secondary dnb-button--size-medium dnb-button--icon-position-right dnb-button--has-icon dnb-space__bounding--zero dnb-input__submit-button__button"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -287,7 +287,7 @@ exports[`Input component have to match type="search" snapshot 1`] = `
                       alt="search"
                       aria-hidden={false}
                       aria-label="search"
-                      className="dnb-icon dnb-button__icon"
+                      className="dnb-icon dnb-space__aria-hidden--zero dnb-button__icon"
                       role="img"
                     >
                       <search>
@@ -433,7 +433,7 @@ exports[`Input component have to match type="text" snapshot 1`] = `
   value="test"
 >
   <span
-    className="dnb-input dnb-input--text"
+    className="dnb-input dnb-input--text dnb-space__disabled--zero dnb-space__readOnly--zero"
   >
     <span
       className="dnb-input__inner"
@@ -1044,7 +1044,8 @@ legend.dnb-form-label {
     display: flex;
     align-items: center;
     overflow: hidden;
-    border: var(--input-border-width) solid var(--color-sea-green-alt); }
+    border: var(--input-border-width) solid var(--color-sea-green-alt);
+    line-height: var(--input-height); }
   .dnb-input__input {
     border: none;
     outline: none;
@@ -1053,7 +1054,6 @@ legend.dnb-form-label {
     user-select: none; }
   .dnb-input__shell, .dnb-input__input {
     height: var(--input-height);
-    line-height: var(--input-height);
     border-radius: var(--input-border-radius); }
   .dnb-input__placeholder, .dnb-input__input {
     width: 100%;
@@ -1062,7 +1062,6 @@ legend.dnb-form-label {
     text-align: left;
     color: inherit;
     font-size: inherit;
-    line-height: inherit;
     background-color: transparent;
     transform: translateY(var(--input-border-width));
     font-variant-numeric: lining-nums;
@@ -1075,11 +1074,14 @@ legend.dnb-form-label {
     left: 0;
     overflow: hidden;
     white-space: nowrap;
-    text-overflow: ellipsis; }
+    text-overflow: ellipsis;
+    line-height: inherit; }
   .dnb-input__input::-webkit-search-cancel-button {
     display: none; }
   .dnb-input__input::-ms-clear {
     display: none; }
+  .dnb-core-style .dnb-input__input {
+    line-height: 1em; }
   .dnb-input--has-submit-button .dnb-input__placeholder,
   .dnb-input--has-submit-button .dnb-input__input {
     padding-right: calc(var(--input-padding) * 2.5); }
@@ -1096,10 +1098,11 @@ legend.dnb-form-label {
     margin-left: calc(1px - 1px - var(--input-height)); }
     .dnb-input__submit-button__button {
       border-radius: 50%; }
+  .dnb-input--medium .dnb-input__shell {
+    line-height: var(--input-height--medium); }
   .dnb-input--medium .dnb-input__shell,
   .dnb-input--medium .dnb-input__input {
     height: var(--input-height--medium);
-    line-height: var(--input-height--medium);
     border-radius: var(--input-border-radius--medium); }
   .dnb-input--medium .dnb-input__placeholder,
   .dnb-input--medium .dnb-input__input {
@@ -1114,10 +1117,11 @@ legend.dnb-form-label {
   .dnb-input--medium.dnb-input--has-submit-button .dnb-input__placeholder,
   .dnb-input--medium.dnb-input--has-submit-button .dnb-input__input {
     padding-right: calc(var(--input-padding--medium) * 2.5); }
+  .dnb-input--large .dnb-input__shell {
+    line-height: var(--input-height--large); }
   .dnb-input--large .dnb-input__shell,
   .dnb-input--large .dnb-input__input {
     height: var(--input-height--large);
-    line-height: var(--input-height--large);
     border-radius: var(--input-border-radius--large); }
   .dnb-input--large .dnb-input__placeholder,
   .dnb-input--large .dnb-input__input {
@@ -1158,12 +1162,18 @@ legend.dnb-form-label {
     align-items: flex-start; }
     .dnb-input[class*='__status'] > .dnb-form-label {
       margin-top: 0.25rem; }
+  @media (max-width: 40em) {
+    .dnb-input {
+      flex-direction: column;
+      align-items: flex-start; }
+      .dnb-input > .dnb-form-label {
+        margin-bottom: 0.5rem; } }
   @media screen and (-ms-high-contrast: none) {
     .dnb-input {
       vertical-align: baseline; }
       .dnb-form-row--horizontal .dnb-input, .dnb-input:not(.dnb-input--stretch) {
         flex: none; }
-      .dnb-input__placeholder, .dnb-input__input {
-        transform: translateY(-0.125rem); } }
+      .dnb-input__input, .dnb-input__placeholder {
+        transform: translateY(-0.0625rem); } }
 "
 `;
diff --git a/packages/dnb-ui-lib/src/components/input/style/_input.scss b/packages/dnb-ui-lib/src/components/input/style/_input.scss
index f20e99534d3..62d0ef4a366 100644
--- a/packages/dnb-ui-lib/src/components/input/style/_input.scss
+++ b/packages/dnb-ui-lib/src/components/input/style/_input.scss
@@ -40,6 +40,8 @@
     overflow: hidden;
 
     border: var(--input-border-width) solid var(--color-sea-green-alt);
+
+    line-height: var(--input-height);
   }
 
   &__input {
@@ -55,7 +57,6 @@
   &__shell,
   &__input {
     height: var(--input-height);
-    line-height: var(--input-height);
     border-radius: var(--input-border-radius);
   }
 
@@ -69,7 +70,6 @@
 
     color: inherit;
     font-size: inherit;
-    line-height: inherit;
     background-color: transparent;
 
     // because of vertical centering and the current font
@@ -89,6 +89,8 @@
 
     white-space: nowrap;
     text-overflow: ellipsis;
+
+    line-height: inherit;
   }
 
   // hide the clear button on input type="search"
@@ -99,6 +101,11 @@
     display: none;
   }
 
+  // to make Safari selection not appear all to the top
+  .dnb-core-style &__input {
+    line-height: 1em;
+  }
+
   &--has-submit-button &__placeholder,
   &--has-submit-button &__input {
     padding-right: calc(var(--input-padding) * 2.5);
@@ -106,7 +113,6 @@
 
   &__row {
     display: inline-flex;
-    // flex-direction: column;
     align-items: baseline;
   }
 
@@ -129,10 +135,12 @@
   }
 
   &--medium {
+    .dnb-input__shell {
+      line-height: var(--input-height--medium);
+    }
     .dnb-input__shell,
     .dnb-input__input {
       height: var(--input-height--medium);
-      line-height: var(--input-height--medium);
       border-radius: var(--input-border-radius--medium);
     }
     .dnb-input__placeholder,
@@ -155,10 +163,12 @@
   }
 
   &--large {
+    .dnb-input__shell {
+      line-height: var(--input-height--large);
+    }
     .dnb-input__shell,
     .dnb-input__input {
       height: var(--input-height--large);
-      line-height: var(--input-height--large);
       border-radius: var(--input-border-radius--large);
     }
     .dnb-input__placeholder,
@@ -233,6 +243,14 @@
     }
   }
 
+  @media (max-width: 40em) {
+    flex-direction: column;
+    align-items: flex-start;
+    > .dnb-form-label {
+      margin-bottom: 0.5rem;
+    }
+  }
+
   // IE fix
   @media screen and (-ms-high-contrast: none) {
     vertical-align: baseline;
@@ -240,9 +258,9 @@
     &:not(#{&}--stretch) {
       flex: none;
     }
-    &__placeholder,
-    &__input {
-      transform: translateY(-0.125rem);
+    &__input,
+    &__placeholder {
+      transform: translateY(-0.0625rem);
     }
   }
 }
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 18b9e587c4b..705d701338c 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
@@ -128,7 +128,7 @@ exports[`Modal component have to match snapshot 1`] = `
     >
       <button
         aria-label="Modal"
-        className="dnb-button dnb-button--secondary dnb-button--size-medium dnb-button--icon-position-left dnb-button--has-icon dnb-modal__trigger"
+        className="dnb-button dnb-button--secondary dnb-button--size-medium dnb-button--icon-position-left dnb-button--has-icon dnb-space__disabled--zero dnb-space__bounding--zero dnb-modal__trigger"
         id="modal_id"
         onClick={[Function]}
         onMouseOut={[Function]}
@@ -177,7 +177,7 @@ exports[`Modal component have to match snapshot 1`] = `
               alt="Modal"
               aria-hidden={false}
               aria-label="Modal"
-              className="dnb-icon dnb-icon--default dnb-button__icon"
+              className="dnb-icon dnb-icon--default dnb-space__aria-hidden--zero dnb-button__icon"
               role="img"
             >
               <question>
@@ -430,7 +430,7 @@ exports[`Modal component have to match snapshot 1`] = `
               >
                 <button
                   aria-label="close_title"
-                  className="dnb-button dnb-button--secondary dnb-button--size-medium dnb-button--icon-position-right dnb-button--has-icon dnb-modal__close-button"
+                  className="dnb-button dnb-button--secondary dnb-button--size-medium dnb-button--icon-position-right dnb-button--has-icon dnb-space__bounding--zero dnb-modal__close-button"
                   onClick={[Function]}
                   onMouseOut={[Function]}
                   title="close_title"
@@ -478,7 +478,7 @@ exports[`Modal component have to match snapshot 1`] = `
                         alt="close_title"
                         aria-hidden={false}
                         aria-label="close_title"
-                        className="dnb-icon dnb-icon--medium dnb-button__icon"
+                        className="dnb-icon dnb-icon--medium dnb-space__aria-hidden--zero dnb-button__icon"
                         role="img"
                       >
                         <close_medium>
diff --git a/packages/dnb-ui-lib/src/components/progress-indicator/__tests__/__snapshots__/ProgressIndicator.test.js.snap b/packages/dnb-ui-lib/src/components/progress-indicator/__tests__/__snapshots__/ProgressIndicator.test.js.snap
index c388d246b91..9da2ac55e51 100644
--- a/packages/dnb-ui-lib/src/components/progress-indicator/__tests__/__snapshots__/ProgressIndicator.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/progress-indicator/__tests__/__snapshots__/ProgressIndicator.test.js.snap
@@ -23,7 +23,7 @@ exports[`Circular ProgressIndicator component have to match snapshot 1`] = `
   visible={true}
 >
   <div
-    className="dnb-progress-indicator dnb-progress-indicator--visible"
+    className="dnb-progress-indicator dnb-progress-indicator--visible dnb-space__no_animation--zero"
   >
     <ProgressIndicatorCircular
       callOnCompleteHandler={[Function]}
diff --git a/packages/dnb-ui-lib/src/components/radio/Radio.js b/packages/dnb-ui-lib/src/components/radio/Radio.js
index 24923a9a38c..8ee191e1d05 100644
--- a/packages/dnb-ui-lib/src/components/radio/Radio.js
+++ b/packages/dnb-ui-lib/src/components/radio/Radio.js
@@ -28,7 +28,11 @@ const renderProps = {
 }
 
 export const propTypes = {
-  label: PropTypes.string,
+  label: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func,
+    PropTypes.node
+  ]),
   label_position: PropTypes.oneOf(['left', 'right']),
   title: PropTypes.string,
   checked: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
diff --git a/packages/dnb-ui-lib/src/components/radio/RadioGroup.js b/packages/dnb-ui-lib/src/components/radio/RadioGroup.js
index 60f22e33457..4a1e60fb804 100644
--- a/packages/dnb-ui-lib/src/components/radio/RadioGroup.js
+++ b/packages/dnb-ui-lib/src/components/radio/RadioGroup.js
@@ -24,7 +24,11 @@ const renderProps = {
 }
 
 export const propTypes = {
-  label: PropTypes.string,
+  label: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func,
+    PropTypes.node
+  ]),
   label_direction: PropTypes.oneOf(['horizontal', 'vertical']),
   label_position: PropTypes.oneOf(['left', 'right']),
   title: PropTypes.string,
diff --git a/packages/dnb-ui-lib/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap b/packages/dnb-ui-lib/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap
index 4a66b6cb6e2..ec2e6cc3785 100644
--- a/packages/dnb-ui-lib/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap
@@ -24,7 +24,7 @@ exports[`Radio component have to match snapshot 1`] = `
   value="value"
 >
   <span
-    className="dnb-radio dnb-radio--label-position-left className class"
+    className="dnb-radio dnb-radio--label-position-left dnb-space__readOnly--zero className class"
   >
     <span
       className="dnb-radio__order"
@@ -46,14 +46,14 @@ exports[`Radio component have to match snapshot 1`] = `
       >
         <Element
           aria-hidden={false}
-          className="dnb-form-label"
+          className="dnb-form-label dnb-space__aria-hidden--zero"
           htmlFor="radio"
           id="radio-label"
           is="label"
         >
           <label
             aria-hidden={false}
-            className="dnb-form-label"
+            className="dnb-form-label dnb-space__aria-hidden--zero"
             htmlFor="radio"
             id="radio-label"
           >
@@ -145,6 +145,7 @@ exports[`Radio group component have to match group snapshot 1`] = `
       indent={null}
       indent_offset={null}
       label="Label"
+      label_class={null}
       label_direction={null}
       label_id="group"
       no_fieldset={true}
@@ -164,7 +165,7 @@ exports[`Radio group component have to match group snapshot 1`] = `
           className={null}
         >
           <div
-            className="dnb-form-row"
+            className="dnb-form-row dnb-space__no_label--zero"
           >
             <FormLabel
               class={null}
@@ -181,13 +182,13 @@ exports[`Radio group component have to match group snapshot 1`] = `
               vertical={null}
             >
               <Element
-                className="dnb-form-label dnb-form-row__label"
+                className="dnb-form-label dnb-space__disabled--zero dnb-form-row__label"
                 htmlFor="group"
                 id="group-label"
                 is="label"
               >
                 <label
-                  className="dnb-form-label dnb-form-row__label"
+                  className="dnb-form-label dnb-space__disabled--zero dnb-form-row__label"
                   htmlFor="group"
                   id="group-label"
                 >
@@ -226,7 +227,7 @@ exports[`Radio group component have to match group snapshot 1`] = `
                   value=""
                 >
                   <span
-                    className="dnb-radio dnb-radio--label-position-right"
+                    className="dnb-radio dnb-radio--label-position-right dnb-space__disabled--zero dnb-space__readOnly--zero"
                   >
                     <span
                       className="dnb-radio__order"
@@ -248,14 +249,14 @@ exports[`Radio group component have to match group snapshot 1`] = `
                       >
                         <Element
                           aria-hidden={true}
-                          className="dnb-form-label"
+                          className="dnb-form-label dnb-space__disabled--zero"
                           htmlFor="radio-1"
                           id="radio-1-label"
                           is="label"
                         >
                           <label
                             aria-hidden={true}
-                            className="dnb-form-label"
+                            className="dnb-form-label dnb-space__disabled--zero"
                             htmlFor="radio-1"
                             id="radio-1-label"
                           >
@@ -330,7 +331,7 @@ exports[`Radio group component have to match group snapshot 1`] = `
                   value=""
                 >
                   <span
-                    className="dnb-radio dnb-radio--label-position-right"
+                    className="dnb-radio dnb-radio--label-position-right dnb-space__disabled--zero dnb-space__readOnly--zero"
                   >
                     <span
                       className="dnb-radio__order"
@@ -352,14 +353,14 @@ exports[`Radio group component have to match group snapshot 1`] = `
                       >
                         <Element
                           aria-hidden={true}
-                          className="dnb-form-label"
+                          className="dnb-form-label dnb-space__disabled--zero"
                           htmlFor="radio-2"
                           id="radio-2-label"
                           is="label"
                         >
                           <label
                             aria-hidden={true}
-                            className="dnb-form-label"
+                            className="dnb-form-label dnb-space__disabled--zero"
                             htmlFor="radio-2"
                             id="radio-2-label"
                           >
diff --git a/packages/dnb-ui-lib/src/components/slider/Slider.js b/packages/dnb-ui-lib/src/components/slider/Slider.js
index b3b5556c3a8..4fd4d9b84a9 100644
--- a/packages/dnb-ui-lib/src/components/slider/Slider.js
+++ b/packages/dnb-ui-lib/src/components/slider/Slider.js
@@ -32,7 +32,11 @@ const renderProps = {
 
 export const propTypes = {
   id: PropTypes.string,
-  label: PropTypes.string,
+  label: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func,
+    PropTypes.node
+  ]),
   label_direction: PropTypes.oneOf(['horizontal', 'vertical']),
   status: PropTypes.oneOfType([
     PropTypes.string,
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 faa071d1105..f05116259f1 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
@@ -29,7 +29,7 @@ exports[`Slider component have to match snapshot 1`] = `
   vertical="vertical"
 >
   <span
-    className="dnb-slider dnb-slider__label--horizontal className class"
+    className="dnb-slider dnb-slider__label--horizontal dnb-space__min--zero className class"
   >
     <FormLabel
       class={null}
@@ -46,13 +46,13 @@ exports[`Slider component have to match snapshot 1`] = `
       vertical={null}
     >
       <Element
-        className="dnb-form-label"
+        className="dnb-form-label dnb-space__disabled--zero"
         htmlFor="id"
         id="id-label"
         is="label"
       >
         <label
-          className="dnb-form-label"
+          className="dnb-form-label dnb-space__disabled--zero"
           htmlFor="id"
           id="id-label"
         >
@@ -89,7 +89,7 @@ exports[`Slider component have to match snapshot 1`] = `
         >
           <button
             aria-label="subtract_title"
-            className="dnb-button dnb-button--secondary dnb-button--size-medium dnb-button--icon-position-right dnb-button--has-icon dnb-slider__button dnb-slider__button--subtract"
+            className="dnb-button dnb-button--secondary dnb-button--size-medium dnb-button--icon-position-right dnb-button--has-icon dnb-space__bounding--zero dnb-slider__button dnb-slider__button--subtract"
             onClick={[Function]}
             onMouseOut={[Function]}
             title="subtract_title"
@@ -137,7 +137,7 @@ exports[`Slider component have to match snapshot 1`] = `
                   alt="subtract_title"
                   aria-hidden={false}
                   aria-label="subtract_title"
-                  className="dnb-icon dnb-icon--default dnb-button__icon"
+                  className="dnb-icon dnb-icon--default dnb-space__aria-hidden--zero dnb-button__icon"
                   role="img"
                 >
                   <subtract>
@@ -209,7 +209,7 @@ exports[`Slider component have to match snapshot 1`] = `
             >
               <button
                 aria-label="thump_title"
-                className="dnb-button dnb-button--secondary"
+                className="dnb-button dnb-button--secondary dnb-space__bounding--zero"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -288,7 +288,7 @@ exports[`Slider component have to match snapshot 1`] = `
         >
           <button
             aria-label="add_title"
-            className="dnb-button dnb-button--secondary dnb-button--size-medium dnb-button--icon-position-right dnb-button--has-icon dnb-slider__button dnb-slider__button--add"
+            className="dnb-button dnb-button--secondary dnb-button--size-medium dnb-button--icon-position-right dnb-button--has-icon dnb-space__bounding--zero dnb-slider__button dnb-slider__button--add"
             onClick={[Function]}
             onMouseOut={[Function]}
             title="add_title"
@@ -336,7 +336,7 @@ exports[`Slider component have to match snapshot 1`] = `
                   alt="add_title"
                   aria-hidden={false}
                   aria-label="add_title"
-                  className="dnb-icon dnb-icon--default dnb-button__icon"
+                  className="dnb-icon dnb-icon--default dnb-space__aria-hidden--zero dnb-button__icon"
                   role="img"
                 >
                   <add>
@@ -971,6 +971,12 @@ legend.dnb-form-label {
     margin-top: 0.5rem; }
   .dnb-slider--vertical .dnb-form-status {
     margin-top: 1rem; }
+  @media (max-width: 40em) {
+    .dnb-slider {
+      flex-direction: column;
+      align-items: flex-start; }
+      .dnb-slider > .dnb-form-label {
+        margin-bottom: 0.5rem; } }
   @media screen and (-ms-high-contrast: none) {
     .dnb-slider__wrapper {
       flex: none; } }
diff --git a/packages/dnb-ui-lib/src/components/slider/style/_slider.scss b/packages/dnb-ui-lib/src/components/slider/style/_slider.scss
index 1d921b0702e..61bb934c2eb 100644
--- a/packages/dnb-ui-lib/src/components/slider/style/_slider.scss
+++ b/packages/dnb-ui-lib/src/components/slider/style/_slider.scss
@@ -223,6 +223,14 @@
     margin-top: 1rem;
   }
 
+  @media (max-width: 40em) {
+    flex-direction: column;
+    align-items: flex-start;
+    > .dnb-form-label {
+      margin-bottom: 0.5rem;
+    }
+  }
+
   // IE fix
   @media screen and (-ms-high-contrast: none) {
     &__wrapper {
diff --git a/packages/dnb-ui-lib/src/components/space/Space.js b/packages/dnb-ui-lib/src/components/space/Space.js
index c6f180790d7..4c34defdd0f 100644
--- a/packages/dnb-ui-lib/src/components/space/Space.js
+++ b/packages/dnb-ui-lib/src/components/space/Space.js
@@ -8,7 +8,6 @@ import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import {
   isTrue,
-  extend,
   extendPropsWithContext,
   registerElement,
   validateDOMAttributes
@@ -24,10 +23,27 @@ export const propTypes = {
   id: PropTypes.string,
   element: PropTypes.string,
   inline: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  top: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  right: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  bottom: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  left: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  collapse: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  top: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.bool
+  ]),
+  right: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.bool
+  ]),
+  bottom: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.bool
+  ]),
+  left: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.bool
+  ]),
   class: PropTypes.string,
 
   /** React props */
@@ -45,7 +61,8 @@ export const propTypes = {
 export const defaultProps = {
   id: null,
   element: 'div',
-  inline: false,
+  inline: null,
+  collapse: null,
   top: null,
   right: null,
   bottom: null,
@@ -79,21 +96,17 @@ export default class Space extends PureComponent {
       : props.children
   }
 
-  constructor(props) {
-    super(props)
-    this._id = props.id || `dnb-space-${Math.round(Math.random() * 999)}` // cause we need an id anyway
-  }
-
   render() {
-    // consume the formRow context
-    const props = this.context.formRow
+    // consume the space context
+    const props = this.context.space
       ? // use only the props from context, who are available here anyway
-        extendPropsWithContext(this.props, this.context.formRow)
+        extendPropsWithContext(this.props, this.context.space)
       : this.props
 
     let {
       element,
       inline,
+      collapse,
       top,
       right,
       bottom,
@@ -108,7 +121,6 @@ export default class Space extends PureComponent {
     // in case we have a label already, we split this out and use this one instead
     const children = Space.getContent(this.props)
 
-    const id = this._id
     const params = {
       className: classnames(
         'dnb-space',
@@ -123,41 +135,30 @@ export default class Space extends PureComponent {
     // also used for code markup simulation
     validateDOMAttributes(this.props, params)
 
-    const context = extend(this.context, {
-      formRow: {
-        useId: () => {
-          if (this.isIsUsed) {
-            // make a new ID, as we used one
-            return `dnb-space-${Math.round(Math.random() * 999)}` // cause we need an id anyway
-          }
-          this.isIsUsed = true
-          return id
-        },
-        top,
-        right,
-        bottom,
-        left
-      }
-    })
-
     return (
-      <Context.Provider value={context}>
-        <Element element={element} {...params}>
-          {children}
-        </Element>
-      </Context.Provider>
+      <Element element={element} collapse={collapse} {...params}>
+        {children}
+      </Element>
     )
   }
 }
 
-const Element = ({ element: E, children, ...props }) => {
-  return <E {...props}>{children}</E>
+const Element = ({ element: E, collapse, children, ...props }) => {
+  return collapse === false || collapse === 'false' ? (
+    <E className="dnb-space--no-collapse">
+      <E {...props}>{children}</E>
+    </E>
+  ) : (
+    <E {...props}>{children}</E>
+  )
 }
 Element.propTypes = {
   children: PropTypes.node,
-  element: PropTypes.string
+  element: PropTypes.string,
+  collapse: PropTypes.bool
 }
 Element.defaultProps = {
   children: null,
-  element: 'div'
+  element: 'div',
+  collapse: true
 }
diff --git a/packages/dnb-ui-lib/src/components/space/SpacingHelper.js b/packages/dnb-ui-lib/src/components/space/SpacingHelper.js
index a87d0da8009..c44563c2608 100644
--- a/packages/dnb-ui-lib/src/components/space/SpacingHelper.js
+++ b/packages/dnb-ui-lib/src/components/space/SpacingHelper.js
@@ -138,7 +138,9 @@ export const isValidSpaceProp = prop =>
 // Creates a valid space CSS class out from given space types
 export const createSpacingClasses = props =>
   Object.entries(props).reduce((acc, [direction, cur]) => {
-    if (cur && isValidSpaceProp(direction)) {
+    if (String(cur) === '0' || String(cur) === 'false') {
+      acc.push(`dnb-space__${direction}--zero`)
+    } else if (cur && isValidSpaceProp(direction)) {
       const typeModifyers = createTypeModifyers(cur)
 
       // get the total sum
diff --git a/packages/dnb-ui-lib/src/components/space/__tests__/Space.screenshot.test.js b/packages/dnb-ui-lib/src/components/space/__tests__/Space.screenshot.test.js
index 4ad1e3a1da4..07ea7e9e131 100644
--- a/packages/dnb-ui-lib/src/components/space/__tests__/Space.screenshot.test.js
+++ b/packages/dnb-ui-lib/src/components/space/__tests__/Space.screenshot.test.js
@@ -12,6 +12,7 @@ describe('Space screenshot', () => {
   setupPageScreenshot({
     url: '/uilib/components/space'
   })
+  // looks like this is not working well
   it.skip('have to match the spacing patterns', async () => {
     const screenshot = await testPageScreenshot({
       waitFor: 200,
@@ -25,4 +26,22 @@ describe('Space screenshot', () => {
     })
     expect(screenshot).toMatchImageSnapshot()
   })
+  it('have to match the spacing method 1', async () => {
+    const screenshot = await testPageScreenshot({
+      selector: '[data-dnb-test="spacing-method-space"]'
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+  it('have to match the spacing method 2', async () => {
+    const screenshot = await testPageScreenshot({
+      selector: '[data-dnb-test="spacing-method-form-row"]'
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+  it('have to match the spacing method 3', async () => {
+    const screenshot = await testPageScreenshot({
+      selector: '[data-dnb-test="spacing-method-component"]'
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
 })
diff --git a/packages/dnb-ui-lib/src/components/space/__tests__/Space.test.js b/packages/dnb-ui-lib/src/components/space/__tests__/Space.test.js
index ba7997f78ac..90f1c4da81d 100644
--- a/packages/dnb-ui-lib/src/components/space/__tests__/Space.test.js
+++ b/packages/dnb-ui-lib/src/components/space/__tests__/Space.test.js
@@ -22,6 +22,7 @@ const props = fakeProps(require.resolve('../Space'), {
 })
 props.id = 'space'
 props.element = 'div'
+props.collapse = false
 
 describe('Space component', () => {
   const Comp = mount(<Component {...props} />)
@@ -36,6 +37,13 @@ describe('Space component', () => {
       Comp.find('span.dnb-space').hasClass('dnb-space__top--large')
     ).toBe(true)
   })
+
+  it('should have collapse CSS classe', () => {
+    const Comp = mount(
+      <Component {...props} top="large" collapse={false} />
+    )
+    expect(Comp.find('.dnb-space--no-collapse').exists()).toBe(true)
+  })
 })
 
 describe('Space scss', () => {
diff --git a/packages/dnb-ui-lib/src/components/space/__tests__/__snapshots__/Space.test.js.snap b/packages/dnb-ui-lib/src/components/space/__tests__/__snapshots__/Space.test.js.snap
index 3d810f001b6..27fb9156fe5 100644
--- a/packages/dnb-ui-lib/src/components/space/__tests__/__snapshots__/Space.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/space/__tests__/__snapshots__/Space.test.js.snap
@@ -5,6 +5,7 @@ exports[`Space component have to match snapshot 1`] = `
   bottom="bottom"
   class="class"
   className="className"
+  collapse={false}
   element="div"
   id="space"
   inline="inline"
@@ -15,12 +16,17 @@ exports[`Space component have to match snapshot 1`] = `
 >
   <Element
     className="dnb-space className class"
+    collapse={false}
     element="div"
   >
     <div
-      className="dnb-space className class"
+      className="dnb-space--no-collapse"
     >
-      children
+      <div
+        className="dnb-space className class"
+      >
+        children
+      </div>
     </div>
   </Element>
 </Space>
@@ -92,9 +98,11 @@ exports[`Space scss have to match snapshot 1`] = `
 /*
  * Space component
  *
+ * TODO: Set spacing in the theme file, as theme comes later in the stack
+ *
  */
-.dnb-core-style .dnb-space--inline {
-  display: inline-block; }
+.dnb-core-style .dnb-space__top--zero {
+  margin-top: 0; }
 
 .dnb-core-style .dnb-space__top--x-small {
   margin-top: 0.5rem; }
@@ -156,6 +164,9 @@ exports[`Space scss have to match snapshot 1`] = `
 .dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--x-large {
   margin-top: 10rem; }
 
+.dnb-core-style .dnb-space__right--zero {
+  margin-right: 0; }
+
 .dnb-core-style .dnb-space__right--x-small {
   margin-right: 0.5rem; }
 
@@ -216,6 +227,9 @@ exports[`Space scss have to match snapshot 1`] = `
 .dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--x-large {
   margin-right: 10rem; }
 
+.dnb-core-style .dnb-space__bottom--zero {
+  margin-bottom: 0; }
+
 .dnb-core-style .dnb-space__bottom--x-small {
   margin-bottom: 0.5rem; }
 
@@ -276,6 +290,9 @@ exports[`Space scss have to match snapshot 1`] = `
 .dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--x-large {
   margin-bottom: 10rem; }
 
+.dnb-core-style .dnb-space__left--zero {
+  margin-left: 0; }
+
 .dnb-core-style .dnb-space__left--x-small {
   margin-left: 0.5rem; }
 
@@ -340,6 +357,15 @@ exports[`Space scss have to match snapshot 1`] = `
 .dnb-space--inline {
   display: inline-block; }
 
+.dnb-space--no-collapse {
+  display: flow-root; }
+  @media screen and (-ms-high-contrast: none) {
+    .dnb-space--no-collapse {
+      overflow: auto; } }
+
+.dnb-space__top--zero {
+  margin-top: 0; }
+
 .dnb-space__top--x-small {
   margin-top: 0.5rem; }
 
@@ -400,6 +426,9 @@ exports[`Space scss have to match snapshot 1`] = `
 .dnb-space__top--xx-large-x2.dnb-space__top--x-large {
   margin-top: 10rem; }
 
+.dnb-space__right--zero {
+  margin-right: 0; }
+
 .dnb-space__right--x-small {
   margin-right: 0.5rem; }
 
@@ -460,6 +489,9 @@ exports[`Space scss have to match snapshot 1`] = `
 .dnb-space__right--xx-large-x2.dnb-space__right--x-large {
   margin-right: 10rem; }
 
+.dnb-space__bottom--zero {
+  margin-bottom: 0; }
+
 .dnb-space__bottom--x-small {
   margin-bottom: 0.5rem; }
 
@@ -520,6 +552,9 @@ exports[`Space scss have to match snapshot 1`] = `
 .dnb-space__bottom--xx-large-x2.dnb-space__bottom--x-large {
   margin-bottom: 10rem; }
 
+.dnb-space__left--zero {
+  margin-left: 0; }
+
 .dnb-space__left--x-small {
   margin-left: 0.5rem; }
 
diff --git a/packages/dnb-ui-lib/src/components/space/__tests__/__snapshots__/space-screenshot-test-js-space-screenshot-have-to-match-the-spacing-method-1-1-14557.snap.png b/packages/dnb-ui-lib/src/components/space/__tests__/__snapshots__/space-screenshot-test-js-space-screenshot-have-to-match-the-spacing-method-1-1-14557.snap.png
new file mode 100644
index 00000000000..46bf2904fb8
Binary files /dev/null and b/packages/dnb-ui-lib/src/components/space/__tests__/__snapshots__/space-screenshot-test-js-space-screenshot-have-to-match-the-spacing-method-1-1-14557.snap.png differ
diff --git a/packages/dnb-ui-lib/src/components/space/__tests__/__snapshots__/space-screenshot-test-js-space-screenshot-have-to-match-the-spacing-method-2-1-a70c2.snap.png b/packages/dnb-ui-lib/src/components/space/__tests__/__snapshots__/space-screenshot-test-js-space-screenshot-have-to-match-the-spacing-method-2-1-a70c2.snap.png
new file mode 100644
index 00000000000..01150c6cf85
Binary files /dev/null and b/packages/dnb-ui-lib/src/components/space/__tests__/__snapshots__/space-screenshot-test-js-space-screenshot-have-to-match-the-spacing-method-2-1-a70c2.snap.png differ
diff --git a/packages/dnb-ui-lib/src/components/space/__tests__/__snapshots__/space-screenshot-test-js-space-screenshot-have-to-match-the-spacing-method-3-1-995dd.snap.png b/packages/dnb-ui-lib/src/components/space/__tests__/__snapshots__/space-screenshot-test-js-space-screenshot-have-to-match-the-spacing-method-3-1-995dd.snap.png
new file mode 100644
index 00000000000..1ed65b45927
Binary files /dev/null and b/packages/dnb-ui-lib/src/components/space/__tests__/__snapshots__/space-screenshot-test-js-space-screenshot-have-to-match-the-spacing-method-3-1-995dd.snap.png differ
diff --git a/packages/dnb-ui-lib/src/components/space/style/_space.scss b/packages/dnb-ui-lib/src/components/space/style/_space.scss
index 5efcfeb620e..2b2da6d6f68 100644
--- a/packages/dnb-ui-lib/src/components/space/style/_space.scss
+++ b/packages/dnb-ui-lib/src/components/space/style/_space.scss
@@ -1,9 +1,15 @@
 /*
  * Space component
  *
+ * TODO: Set spacing in the theme file, as theme comes later in the stack
+ *
  */
 
 @mixin direction($direction) {
+  // 0rem
+  &--zero {
+    margin-#{$direction}: 0;
+  }
   // 0.5rem
   &--x-small {
     margin-#{$direction}: 0.5rem;
@@ -142,9 +148,6 @@
 }
 
 .dnb-core-style .dnb-space {
-  &--inline {
-    display: inline-block;
-  }
   &__top {
     @include direction(top);
   }
@@ -164,6 +167,13 @@
   &--inline {
     display: inline-block;
   }
+  &--no-collapse {
+    display: flow-root;
+    // IE fix
+    @media screen and (-ms-high-contrast: none) {
+      overflow: auto;
+    }
+  }
   &__top {
     @include direction(top);
   }
diff --git a/packages/dnb-ui-lib/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap b/packages/dnb-ui-lib/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap
index 60ecf29216f..f95d82df1de 100644
--- a/packages/dnb-ui-lib/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap
@@ -25,7 +25,7 @@ exports[`StepIndicator component with buttons have to match snapshot 1`] = `
   use_navigation={true}
 >
   <div
-    className="dnb-step-indicator"
+    className="dnb-step-indicator dnb-space__hide_numbers--zero"
   >
     <ul
       className="dnb-step-indicator__list"
diff --git a/packages/dnb-ui-lib/src/components/switch/Switch.js b/packages/dnb-ui-lib/src/components/switch/Switch.js
index a5b0234c20b..d37ba457e6c 100644
--- a/packages/dnb-ui-lib/src/components/switch/Switch.js
+++ b/packages/dnb-ui-lib/src/components/switch/Switch.js
@@ -26,7 +26,11 @@ const renderProps = {
 }
 
 export const propTypes = {
-  label: PropTypes.string,
+  label: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func,
+    PropTypes.node
+  ]),
   label_position: PropTypes.oneOf(['left', 'right']),
   title: PropTypes.string,
   default_state: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
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 852595e721b..668c18d8ec5 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
@@ -24,7 +24,7 @@ exports[`Switch component have to match snapshot 1`] = `
   value="value"
 >
   <span
-    className="dnb-switch dnb-switch--label-position-left className class"
+    className="dnb-switch dnb-switch--label-position-left dnb-space__readOnly--zero className class"
   >
     <span
       className="dnb-switch__order"
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 5007cd6c660..49d5cd11e85 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
@@ -81,7 +81,7 @@ exports[`Tabs component have to match snapshot 1`] = `
 >
   <TabsWrapper>
     <div
-      className="dnb-tabs"
+      className="dnb-tabs dnb-space__use_hash--zero"
     >
       <TabsList>
         <div
diff --git a/packages/dnb-ui-lib/src/components/textarea/Textarea.js b/packages/dnb-ui-lib/src/components/textarea/Textarea.js
index 7192c232b6d..08cf3b00ae2 100644
--- a/packages/dnb-ui-lib/src/components/textarea/Textarea.js
+++ b/packages/dnb-ui-lib/src/components/textarea/Textarea.js
@@ -30,7 +30,11 @@ const renderProps = {
 export const propTypes = {
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   id: PropTypes.string,
-  label: PropTypes.string,
+  label: PropTypes.oneOfType([
+  PropTypes.string,
+  PropTypes.func,
+  PropTypes.node
+]),
   label_direction: PropTypes.oneOf(['horizontal', 'vertical']),
   status: PropTypes.oneOfType([
     PropTypes.string,
diff --git a/packages/dnb-ui-lib/src/components/textarea/__tests__/__snapshots__/Textarea.test.js.snap b/packages/dnb-ui-lib/src/components/textarea/__tests__/__snapshots__/Textarea.test.js.snap
index bcfc19308d8..17e0981587b 100644
--- a/packages/dnb-ui-lib/src/components/textarea/__tests__/__snapshots__/Textarea.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/textarea/__tests__/__snapshots__/Textarea.test.js.snap
@@ -62,7 +62,7 @@ exports[`Textarea component have to match snapshot 1`] = `
   value="test"
 >
   <span
-    className="dnb-textarea dnb-textarea--virgin dnb-textarea--has-content"
+    className="dnb-textarea dnb-textarea--virgin dnb-textarea--has-content dnb-space__disabled--zero dnb-space__readOnly--zero"
   >
     <span
       className="dnb-textarea__inner"
@@ -600,6 +600,12 @@ textarea.dnb-textarea {
     flex: 1; }
   .dnb-textarea--stretch .dnb-textarea__shell, .dnb-textarea--stretch .dnb-textarea__textarea {
     width: 100%; }
+  @media (max-width: 40em) {
+    .dnb-textarea {
+      flex-direction: column;
+      align-items: flex-start; }
+      .dnb-textarea > .dnb-form-label {
+        margin-bottom: 0.5rem; } }
   @media screen and (-ms-high-contrast: none) {
     .dnb-textarea__inner {
       margin: 0; }
diff --git a/packages/dnb-ui-lib/src/components/textarea/style/_textarea.scss b/packages/dnb-ui-lib/src/components/textarea/style/_textarea.scss
index 750829b312c..f695f83724e 100644
--- a/packages/dnb-ui-lib/src/components/textarea/style/_textarea.scss
+++ b/packages/dnb-ui-lib/src/components/textarea/style/_textarea.scss
@@ -121,6 +121,14 @@
     }
   }
 
+  @media (max-width: 40em) {
+    flex-direction: column;
+    align-items: flex-start;
+    > .dnb-form-label {
+      margin-bottom: 0.5rem;
+    }
+  }
+
   // IE fix
   @media screen and (-ms-high-contrast: none) {
     &__inner {
diff --git a/packages/dnb-ui-lib/src/components/toggle-button/ToggleButton.js b/packages/dnb-ui-lib/src/components/toggle-button/ToggleButton.js
index dd2ca44ca0c..d18addd70c6 100644
--- a/packages/dnb-ui-lib/src/components/toggle-button/ToggleButton.js
+++ b/packages/dnb-ui-lib/src/components/toggle-button/ToggleButton.js
@@ -32,7 +32,11 @@ const renderProps = {
 
 export const propTypes = {
   text: PropTypes.string,
-  label: PropTypes.string,
+  label: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func,
+    PropTypes.node
+  ]),
   label_direction: PropTypes.oneOf(['horizontal', 'vertical']),
   title: PropTypes.string,
   checked: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
diff --git a/packages/dnb-ui-lib/src/components/toggle-button/ToggleButtonGroup.js b/packages/dnb-ui-lib/src/components/toggle-button/ToggleButtonGroup.js
index 5f798b68015..d11c3206e8c 100644
--- a/packages/dnb-ui-lib/src/components/toggle-button/ToggleButtonGroup.js
+++ b/packages/dnb-ui-lib/src/components/toggle-button/ToggleButtonGroup.js
@@ -25,7 +25,11 @@ const renderProps = {
 }
 
 export const propTypes = {
-  label: PropTypes.string,
+  label: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func,
+    PropTypes.node
+  ]),
   label_direction: PropTypes.oneOf(['horizontal', 'vertical']),
   title: PropTypes.string,
   multiselect: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
diff --git a/packages/dnb-ui-lib/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap b/packages/dnb-ui-lib/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap
index 9e56815e2d9..24abd703c79 100644
--- a/packages/dnb-ui-lib/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap
@@ -27,7 +27,7 @@ exports[`ToggleButton component have to match snapshot 1`] = `
   variant="checkbox"
 >
   <span
-    className="dnb-toggle-button dnb-toggle-button--horizontal className class"
+    className="dnb-toggle-button dnb-toggle-button--horizontal dnb-space__readOnly--zero className class"
   >
     <FormLabel
       class={null}
@@ -92,7 +92,7 @@ exports[`ToggleButton component have to match snapshot 1`] = `
           <button
             aria-disabled={true}
             aria-pressed="false"
-            className="dnb-button dnb-button--secondary dnb-button--icon-position-right dnb-button--has-text dnb-button--has-icon dnb-toggle-button__button"
+            className="dnb-button dnb-button--secondary dnb-button--icon-position-right dnb-button--has-text dnb-button--has-icon dnb-space__aria-pressed--zero dnb-space__bounding--zero dnb-toggle-button__button"
             id="toggle-button"
             onClick={[Function]}
             onKeyDown={[Function]}
@@ -183,7 +183,7 @@ exports[`ToggleButton component have to match snapshot 1`] = `
                   value={null}
                 >
                   <span
-                    className="dnb-checkbox"
+                    className="dnb-checkbox dnb-space__checked--zero dnb-space__readOnly--zero"
                   >
                     <span
                       className="dnb-checkbox__order"
@@ -313,6 +313,7 @@ exports[`ToggleButton group component have to match group snapshot 1`] = `
       indent={null}
       indent_offset={null}
       label="Label"
+      label_class={null}
       label_direction={null}
       label_id="group"
       no_fieldset={null}
@@ -332,7 +333,7 @@ exports[`ToggleButton group component have to match group snapshot 1`] = `
           className="dnb-form-row__fieldset"
         >
           <div
-            className="dnb-form-row"
+            className="dnb-form-row dnb-space__no_label--zero"
           >
             <FormLabel
               class={null}
@@ -349,12 +350,12 @@ exports[`ToggleButton group component have to match group snapshot 1`] = `
               vertical={null}
             >
               <Element
-                className="dnb-form-label dnb-form-row__label"
+                className="dnb-form-label dnb-space__disabled--zero dnb-form-row__label"
                 id="group-label"
                 is="legend"
               >
                 <legend
-                  className="dnb-form-label dnb-form-row__label"
+                  className="dnb-form-label dnb-space__disabled--zero dnb-form-row__label"
                   id="group-label"
                 >
                   Label
@@ -396,7 +397,7 @@ exports[`ToggleButton group component have to match group snapshot 1`] = `
                   variant={null}
                 >
                   <span
-                    className="dnb-toggle-button dnb-toggle-button--checked"
+                    className="dnb-toggle-button dnb-toggle-button--checked dnb-space__readOnly--zero"
                   >
                     <span
                       className="dnb-toggle-button__inner"
@@ -430,7 +431,7 @@ exports[`ToggleButton group component have to match group snapshot 1`] = `
                         >
                           <button
                             aria-pressed="true"
-                            className="dnb-button dnb-button--secondary dnb-button--has-text dnb-toggle-button__button"
+                            className="dnb-button dnb-button--secondary dnb-button--has-text dnb-space__bounding--zero dnb-toggle-button__button"
                             id="toggle-button-1"
                             onClick={[Function]}
                             onKeyDown={[Function]}
@@ -503,7 +504,7 @@ exports[`ToggleButton group component have to match group snapshot 1`] = `
                   variant={null}
                 >
                   <span
-                    className="dnb-toggle-button dnb-toggle-button--checked"
+                    className="dnb-toggle-button dnb-toggle-button--checked dnb-space__readOnly--zero"
                   >
                     <span
                       className="dnb-toggle-button__inner"
@@ -537,7 +538,7 @@ exports[`ToggleButton group component have to match group snapshot 1`] = `
                         >
                           <button
                             aria-pressed="true"
-                            className="dnb-button dnb-button--secondary dnb-button--has-text dnb-toggle-button__button"
+                            className="dnb-button dnb-button--secondary dnb-button--has-text dnb-space__bounding--zero dnb-toggle-button__button"
                             id="toggle-button-2"
                             onClick={[Function]}
                             onKeyDown={[Function]}
diff --git a/packages/dnb-ui-lib/src/core/jest/jestPuppeteerTeardown.js b/packages/dnb-ui-lib/src/core/jest/jestPuppeteerTeardown.js
index 44c3c4aeecb..a838cbb8339 100644
--- a/packages/dnb-ui-lib/src/core/jest/jestPuppeteerTeardown.js
+++ b/packages/dnb-ui-lib/src/core/jest/jestPuppeteerTeardown.js
@@ -30,6 +30,9 @@ module.exports = async function() {
 
   // commit a tar of the reports if we are on a CI
   if (isCi) {
+    console.log(
+      chalk.yellow('Will commit "jest-screenshot-report" to git.')
+    )
     const reportPath = path.resolve(
       packpath.self(),
       './jest-screenshot-report'
@@ -59,6 +62,10 @@ module.exports = async function() {
         filePathsWhitelist: [file],
         isNotAFeature: [file]
       })
+    } else {
+      console.log(
+        chalk.red(`reportPath did not exists commit: ${reportPath}`)
+      )
     }
   }
 
diff --git a/packages/dnb-ui-lib/src/shared/component-helper.js b/packages/dnb-ui-lib/src/shared/component-helper.js
index e84f85194ee..98b86d99e40 100644
--- a/packages/dnb-ui-lib/src/shared/component-helper.js
+++ b/packages/dnb-ui-lib/src/shared/component-helper.js
@@ -81,16 +81,16 @@ export const validateDOMAttributes = (props, params) => {
   if (params.disabled === null || String(params.disabled) === 'false') {
     delete params.disabled
   }
-  if (params.top) {
+  if (typeof params.top !== 'undefined') {
     delete params.top
   }
-  if (params.right) {
+  if (typeof params.right !== 'undefined') {
     delete params.right
   }
-  if (params.bottom) {
+  if (typeof params.bottom !== 'undefined') {
     delete params.bottom
   }
-  if (params.left) {
+  if (typeof params.left !== 'undefined') {
     delete params.left
   }
 
diff --git a/packages/dnb-ui-lib/src/style/elements/typography.scss b/packages/dnb-ui-lib/src/style/elements/typography.scss
index 8277f6efeb3..fcd4319f70c 100644
--- a/packages/dnb-ui-lib/src/style/elements/typography.scss
+++ b/packages/dnb-ui-lib/src/style/elements/typography.scss
@@ -109,13 +109,28 @@
   }
 }
 @mixin h1Spacing() {
-  margin: 3rem 0 2.5rem;
+  &:not([class*='space__top']) {
+    margin-top: 3rem;
+  }
+  &:not([class*='space__bottom']) {
+    margin-bottom: 2.5rem;
+  }
 }
 @mixin h2Spacing() {
-  margin: 3rem 0 1rem;
+  &:not([class*='space__top']) {
+    margin-top: 3rem;
+  }
+  &:not([class*='space__bottom']) {
+    margin-bottom: 1rem;
+  }
 }
 @mixin headingSpacing() {
-  margin: 2rem 0 1rem;
+  &:not([class*='space__top']) {
+    margin-top: 2rem;
+  }
+  &:not([class*='space__bottom']) {
+    margin-bottom: 1rem;
+  }
 }
 @mixin typographyTags() {
   h1,
@@ -163,25 +178,25 @@
   }
   .dnb-spacing {
     .dnb-h1,
-    .dnb-core-style .dnb-h1 {
+    .dnb-core-style & .dnb-h1 {
       @include h1Spacing();
     }
     .dnb-h2,
-    .dnb-core-style .dnb-h2 {
+    .dnb-core-style & .dnb-h2 {
       @include h2Spacing();
     }
     .dnb-h3,
     .dnb-h4,
     .dnb-h5,
     .dnb-h6,
-    .dnb-core-style .dnb-h3,
-    .dnb-core-style .dnb-h4,
-    .dnb-core-style .dnb-h5,
-    .dnb-core-style .dnb-h6 {
+    .dnb-core-style & .dnb-h3,
+    .dnb-core-style & .dnb-h4,
+    .dnb-core-style & .dnb-h5,
+    .dnb-core-style & .dnb-h6 {
       @include headingSpacing();
     }
     .dnb-p,
-    .dnb-core-style .dnb-p {
+    .dnb-core-style & .dnb-p {
       @include defaultSpacing();
     }
   }
diff --git a/packages/dnb-ui-lib/stories/components/FormRow.js b/packages/dnb-ui-lib/stories/components/FormRow.js
index 497a590dc93..8a9cf8b6fef 100644
--- a/packages/dnb-ui-lib/stories/components/FormRow.js
+++ b/packages/dnb-ui-lib/stories/components/FormRow.js
@@ -32,20 +32,25 @@ export default [
   () => (
     <Center>
       <Wrapper showOverflow>
-        <H2 bottom="small">Combine vertical and horizontal</H2>
         <Box>
           <Provider
             formRow={{
               vertical: true,
-
               label: 'Vertical input B'
             }}
           >
             <Input />
           </Provider>
+        </Box>
 
+        <Box>
+          <H2 bottom="large">Combine vertical and horizontal</H2>
           <FormRow
-            label="Vertical legend:"
+            label={
+              <H2 top={false} bottom="large">
+                Custom vertical legend:
+              </H2>
+            }
             vertical
             top="medium"
             // no_fieldset
@@ -69,13 +74,13 @@ export default [
           </FormRow>
         </Box>
 
-        <H2 bottom="small">Plain</H2>
         <Box>
+          <H2 bottom="large">Plain</H2>
           <AllComponents showText horizontal vertical />
         </Box>
 
-        <H2 bottom="small">Horizontal label</H2>
         <Box>
+          <H2 bottom="large">Horizontal label</H2>
           <FormRow
             // indent
             // indent_offset="large"
@@ -86,22 +91,22 @@ export default [
           </FormRow>
         </Box>
 
-        <H2 bottom="small">Vertical direction</H2>
         <Box>
+          <H2 bottom="large">Vertical direction</H2>
           <FormRow label="Vertical direction:" direction="vertical">
             <AllComponents showText />
           </FormRow>
         </Box>
 
-        <H2 bottom="small">Vertical everything</H2>
         <Box>
+          <H2 bottom="large">Vertical everything</H2>
           <FormRow label="Vertical everything:" vertical="true">
             <AllComponents showText />
           </FormRow>
         </Box>
 
-        <H2 bottom="small">Vertical label</H2>
         <Box>
+          <H2 bottom="large">Vertical label</H2>
           <FormRow label="Vertical Legend:" label_direction="vertical">
             <AllComponents showText horizontal />
           </FormRow>
diff --git a/packages/dnb-ui-lib/stories/components/Space.js b/packages/dnb-ui-lib/stories/components/Space.js
index f3707f56be3..26ffc617a55 100644
--- a/packages/dnb-ui-lib/stories/components/Space.js
+++ b/packages/dnb-ui-lib/stories/components/Space.js
@@ -16,6 +16,8 @@ import {
   // FormLabel,
   // FormRow
 } from '../../src/components'
+import { H1, H2 } from '../../src/elements'
+import Provider from '../../src/shared/Provider'
 
 export default [
   'Space',
@@ -31,6 +33,32 @@ export default [
           </VisualSpace>
         </CustomStyle>
       </Box>
+      <Box>
+        <Provider
+          space={{
+            collapse: false
+          }}
+        >
+          <Collapsing bottom="small">
+            <H1>H1</H1>
+          </Collapsing>
+          <Collapsing top="large">
+            <H2>H2</H2>
+          </Collapsing>
+        </Provider>
+      </Box>
+      <Box>
+        <Collapsing bottom="small" collapse={false}>
+          <div>
+            I have <code className="dnb-code">bottom="small"</code>
+          </div>
+        </Collapsing>
+        <Collapsing top="large">
+          <div>
+            I have <code className="dnb-code">top="large"</code>
+          </div>
+        </Collapsing>
+      </Box>
       <Box>
         <CustomStyle>
           <Space top="0.5">
@@ -206,7 +234,11 @@ const MagicBox = ({ label, ...rest }) => {
   )
 }
 MagicBox.propTypes = {
-  label: PropTypes.string
+  label: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func,
+    PropTypes.node
+  ])
 }
 MagicBox.defaultProps = {
   label: null
@@ -243,7 +275,11 @@ const VisualSpace = ({ label, children, ...rest }) => {
   )
 }
 VisualSpace.propTypes = {
-  label: PropTypes.string,
+  label: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func,
+    PropTypes.node
+  ]),
   children: PropTypes.node
 }
 VisualSpace.defaultProps = {
@@ -251,4 +287,8 @@ VisualSpace.defaultProps = {
   children: null
 }
 
+const Collapsing = styled(Space)`
+  border: 1px solid;
+`
+
 export { MagicBox, VisualSpace }