diff --git a/.changeset/stale-radios-punch.md b/.changeset/stale-radios-punch.md
index 368da8c0e9..c30f812966 100644
--- a/.changeset/stale-radios-punch.md
+++ b/.changeset/stale-radios-punch.md
@@ -5,4 +5,4 @@
 
 Refactor vertical space usage so consumers can control it.
 
-There's a new property named `height` (available values: `auto` and `100%`; the former is the default) that will allow consumers to control the vertical space usage of the component.
+There's a new property named `height` (available values: `expanded` and `collapsed`; the former is the default) that will allow consumers to control the vertical space usage of the component.
diff --git a/packages/components/card/src/card.tsx b/packages/components/card/src/card.tsx
index 653e981a3b..cc7234917a 100644
--- a/packages/components/card/src/card.tsx
+++ b/packages/components/card/src/card.tsx
@@ -55,7 +55,7 @@ const Card = (props: TCardProps) => (
       // This is mostly useful in case custom styles are targeting this element.
       <div>{props.children}</div>
     ) : (
-      <Inset scale={props.insetScale} height="100%">
+      <Inset scale={props.insetScale} height="expanded">
         {props.children}
       </Inset>
     )}
diff --git a/packages/components/card/src/card.visualroute.jsx b/packages/components/card/src/card.visualroute.jsx
index 04a7fe3407..6a37be219f 100644
--- a/packages/components/card/src/card.visualroute.jsx
+++ b/packages/components/card/src/card.visualroute.jsx
@@ -110,12 +110,8 @@ export const component = () => (
             height: 100%;
           `}
         >
-          <div>
-            {text}
-          </div>
-          <div>
-            {text}
-          </div>
+          <div>{text}</div>
+          <div>{text}</div>
         </div>
       </WrappedCard>
     </Spec>
diff --git a/packages/components/spacings/spacings-inset-squish/README.md b/packages/components/spacings/spacings-inset-squish/README.md
index 89df6c164a..d69109ffa0 100644
--- a/packages/components/spacings/spacings-inset-squish/README.md
+++ b/packages/components/spacings/spacings-inset-squish/README.md
@@ -36,11 +36,11 @@ import Spacings from '@commercetools-uikit/spacings';
 
 ## Properties
 
-| Props      | Type             | Required | Values            | Default |
-| ---------- | ---------------- | :------: | ----------------- | ------- |
-| `scale`    | `String`         |    -     | `['s', 'm', 'l']` | `m`     |
-| `height`   | `String`         |    -     | `auto`, `100%`    | `auto`  |
-| `children` | `PropTypes.node` |    -     | -                 | -       |
+| Props      | Type             | Required | Values                  | Default     |
+| ---------- | ---------------- | :------: | ----------------------- | ----------- |
+| `scale`    | `String`         |    -     | `['s', 'm', 'l']`       | `m`         |
+| `height`   | `String`         |    -     | `collapsed`, `expanded` | `collapsed` |
+| `children` | `PropTypes.node` |    -     | -                       | -           |
 
 ## Scales
 
diff --git a/packages/components/spacings/spacings-inset-squish/src/inset-squish.tsx b/packages/components/spacings/spacings-inset-squish/src/inset-squish.tsx
index 3ee99fd59f..6b02278e65 100644
--- a/packages/components/spacings/spacings-inset-squish/src/inset-squish.tsx
+++ b/packages/components/spacings/spacings-inset-squish/src/inset-squish.tsx
@@ -6,7 +6,7 @@ import { filterDataAttributes } from '@commercetools-uikit/utils';
 export type TScale = 's' | 'm' | 'l';
 export type TInsetSquishProps = {
   scale: TScale;
-  height: 'auto' | '100%';
+  height: 'collapsed' | 'expanded';
   children: ReactNode;
 };
 
@@ -27,7 +27,7 @@ const InsetSquish = (props: TInsetSquishProps) => (
   <div
     css={css`
       padding: ${getPadding(props.scale)};
-      height: ${props.height};
+      height: ${props.height === 'expanded' ? '100%' : 'auto'};
     `}
     {...filterDataAttributes(props)}
   >
@@ -36,7 +36,7 @@ const InsetSquish = (props: TInsetSquishProps) => (
 );
 const defaultProps: Pick<TInsetSquishProps, 'scale' | 'height'> = {
   scale: 'm',
-  height: 'auto',
+  height: 'collapsed',
 };
 InsetSquish.displayName = 'InsetSquish';
 InsetSquish.defaultProps = defaultProps;
diff --git a/packages/components/spacings/spacings-inset/README.md b/packages/components/spacings/spacings-inset/README.md
index 5c207de382..2a79b84f51 100644
--- a/packages/components/spacings/spacings-inset/README.md
+++ b/packages/components/spacings/spacings-inset/README.md
@@ -26,11 +26,11 @@ import Spacings from '@commercetools-uikit/spacings';
 
 ## Properties
 
-| Props      | Type             | Required | Values                        | Default |
-| ---------- | ---------------- | :------: | ----------------------------- | ------- |
-| `scale`    | `String`         |    -     | `['xs', 's', 'm', 'l', 'xl']` | `x`     |
-| `height`   | `String`         |    -     | `auto`, `100%`                | `auto`  |
-| `children` | `PropTypes.node` |    -     | -                             | -       |
+| Props      | Type             | Required | Values                        | Default     |
+| ---------- | ---------------- | :------: | ----------------------------- | ----------- |
+| `scale`    | `String`         |    -     | `['xs', 's', 'm', 'l', 'xl']` | `x`         |
+| `height`   | `String`         |    -     | `collapsed`, `expanded`       | `collapsed` |
+| `children` | `PropTypes.node` |    -     | -                             | -           |
 
 ## Scales
 
diff --git a/packages/components/spacings/spacings-inset/src/inset.tsx b/packages/components/spacings/spacings-inset/src/inset.tsx
index 457766d27a..0ee6e030ff 100644
--- a/packages/components/spacings/spacings-inset/src/inset.tsx
+++ b/packages/components/spacings/spacings-inset/src/inset.tsx
@@ -24,7 +24,7 @@ const getPadding = (scale?: TScale) => {
 
 export type TInsetProps = {
   scale: TScale;
-  height: 'auto' | '100%';
+  height: 'collapsed' | 'expanded';
   children?: ReactNode;
 };
 
@@ -32,7 +32,7 @@ const Inset = (props: TInsetProps) => (
   <div
     css={css`
       padding: ${getPadding(props.scale)};
-      height: ${props.height};
+      height: ${props.height === 'expanded' ? '100%' : 'auto'};
     `}
     {...filterDataAttributes(props)}
   >
@@ -41,7 +41,7 @@ const Inset = (props: TInsetProps) => (
 );
 const defaultProps: Pick<TInsetProps, 'scale' | 'height'> = {
   scale: 'm',
-  height: 'auto',
+  height: 'collapsed',
 };
 Inset.displayName = 'Inset';
 Inset.defaultProps = defaultProps;