diff --git a/package-lock.json b/package-lock.json
index 8b9223985..b327fbd07 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@dabapps/roe",
-  "version": "0.9.18",
+  "version": "0.9.19",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 8adbf3864..a0e86752a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dabapps/roe",
-  "version": "0.9.18",
+  "version": "0.9.19",
   "description": "A Collection of React Components for Project Development",
   "main": "dist/js/index.js",
   "types": "dist/js/index.d.ts",
diff --git a/src/ts/components/misc/collapse.examples.md b/src/ts/components/misc/collapse.examples.md
index b579128f4..f0156822f 100644
--- a/src/ts/components/misc/collapse.examples.md
+++ b/src/ts/components/misc/collapse.examples.md
@@ -1,5 +1,7 @@
 #### Examples
 
+With lots of content:
+
 ```js
 class CollapseExample extends React.Component {
   constructor (props) {
@@ -45,3 +47,100 @@ class CollapseExample extends React.Component {
 
 <CollapseExample />
 ```
+
+With small content:
+
+```js
+class CollapseExample extends React.Component {
+  constructor (props) {
+    super(props);
+
+    this.state = {
+      open: false
+    };
+
+    this.onClickToggleCollapse = this.onClickToggleCollapse.bind(this);
+  }
+
+  onClickToggleCollapse () {
+    const { open } = this.state;
+
+    this.setState({
+      open: !open
+    });
+  }
+
+  render () {
+    const { open } = this.state;
+
+    return (
+      <div>
+        <Collapse
+          open={open}
+          maxCollapsedHeight={100}
+          fadeOut
+          fadeColor="#FFF"
+          fadeHeight={50}
+          animationDuration={200}
+        >
+          <DabIpsum count={1} />
+        </Collapse>
+        <Button className="primary margin-top-base" onClick={this.onClickToggleCollapse}>
+          {open ? 'Collapse' : 'Expand'}
+        </Button>
+      </div>
+    );
+  }
+}
+
+<CollapseExample />
+```
+
+With minimum height:
+
+```js
+class CollapseExample extends React.Component {
+  constructor (props) {
+    super(props);
+
+    this.state = {
+      open: false
+    };
+
+    this.onClickToggleCollapse = this.onClickToggleCollapse.bind(this);
+  }
+
+  onClickToggleCollapse () {
+    const { open } = this.state;
+
+    this.setState({
+      open: !open
+    });
+  }
+
+  render () {
+    const { open } = this.state;
+
+    return (
+      <div>
+        <Collapse
+          open={open}
+          maxCollapsedHeight={200}
+          minHeight={100}
+          fadeOut
+          fadeColor="#FFF"
+          fadeHeight={50}
+          animationDuration={200}
+        >
+          <DabIpsum count={1} />
+        </Collapse>
+        <Button className="primary margin-top-base" onClick={this.onClickToggleCollapse}>
+          {open ? 'Collapse' : 'Expand'}
+        </Button>
+      </div>
+    );
+  }
+}
+
+<CollapseExample />
+```
diff --git a/src/ts/components/misc/collapse.tsx b/src/ts/components/misc/collapse.tsx
index 8a1166875..1cc940405 100644
--- a/src/ts/components/misc/collapse.tsx
+++ b/src/ts/components/misc/collapse.tsx
@@ -27,7 +27,12 @@ export interface CollapseProps
    * Maximum height when collapsed
    * @default 0
    */
-  maxCollapsedHeight?: number;
+  maxCollapsedHeight?: number | string;
+  /**
+   * Minimum height
+   * @default auto
+   */
+  minHeight?: number | string;
   /**
    * Whether to fade out the content
    * @default false
@@ -52,7 +57,7 @@ export interface CollapseProps
 
 export interface CollapseState {
   // tslint:disable-line:no-unused-variable
-  height: number;
+  height: number | string;
   opened: boolean;
   opening: boolean;
 }
@@ -134,6 +139,7 @@ export class Collapse extends PureComponent<CollapseProps, CollapseState> {
       transparentColor = DEFAULT_TRANSPARENT_COLOR,
       open,
       maxCollapsedHeight,
+      minHeight = 'auto',
       animationDuration = DEFAULT_DURATION,
       component: Component = 'div',
       ...remainingProps
@@ -142,10 +148,11 @@ export class Collapse extends PureComponent<CollapseProps, CollapseState> {
     const { opening, opened, height } = this.state;
 
     const collapseStyle = {
-      height: opened ? 'auto' : height,
+      minHeight,
+      maxHeight: opened ? 'auto' : height,
       position: 'relative' as 'relative',
       overflow: 'hidden' as 'hidden',
-      transition: `ease-in-out ${animationDuration}ms height`,
+      transition: `ease-in-out ${animationDuration}ms max-height`,
     };
 
     const fadeStyle = {
diff --git a/tests/__snapshots__/collapse.tsx.snap b/tests/__snapshots__/collapse.tsx.snap
index 00eceba24..c9faafb14 100644
--- a/tests/__snapshots__/collapse.tsx.snap
+++ b/tests/__snapshots__/collapse.tsx.snap
@@ -9,10 +9,11 @@ exports[`Collapse should accept custom duration 1`] = `
     className="clearfix collapse"
     style={
       Object {
-        "height": 0,
+        "maxHeight": 0,
+        "minHeight": "auto",
         "overflow": "hidden",
         "position": "relative",
-        "transition": "ease-in-out 100ms height",
+        "transition": "ease-in-out 100ms max-height",
       }
     }
   />
@@ -28,10 +29,11 @@ exports[`Collapse should accept custom duration 2`] = `
     className="clearfix collapse collapse-open"
     style={
       Object {
-        "height": 0,
+        "maxHeight": 0,
+        "minHeight": "auto",
         "overflow": "hidden",
         "position": "relative",
-        "transition": "ease-in-out 100ms height",
+        "transition": "ease-in-out 100ms max-height",
       }
     }
   />
@@ -47,10 +49,11 @@ exports[`Collapse should accept custom duration 3`] = `
     className="clearfix collapse collapse-open"
     style={
       Object {
-        "height": 0,
+        "maxHeight": 0,
+        "minHeight": "auto",
         "overflow": "hidden",
         "position": "relative",
-        "transition": "ease-in-out 100ms height",
+        "transition": "ease-in-out 100ms max-height",
       }
     }
   />
@@ -67,10 +70,11 @@ exports[`Collapse should close to custom height 1`] = `
     className="clearfix collapse collapse-open"
     style={
       Object {
-        "height": "auto",
+        "maxHeight": "auto",
+        "minHeight": "auto",
         "overflow": "hidden",
         "position": "relative",
-        "transition": "ease-in-out 200ms height",
+        "transition": "ease-in-out 200ms max-height",
       }
     }
   />
@@ -87,10 +91,11 @@ exports[`Collapse should close to custom height 2`] = `
     className="clearfix collapse"
     style={
       Object {
-        "height": 500,
+        "maxHeight": 500,
+        "minHeight": "auto",
         "overflow": "hidden",
         "position": "relative",
-        "transition": "ease-in-out 200ms height",
+        "transition": "ease-in-out 200ms max-height",
       }
     }
   >
@@ -122,10 +127,11 @@ exports[`Collapse should close to custom height 3`] = `
     className="clearfix collapse"
     style={
       Object {
-        "height": 100,
+        "maxHeight": 100,
+        "minHeight": "auto",
         "overflow": "hidden",
         "position": "relative",
-        "transition": "ease-in-out 200ms height",
+        "transition": "ease-in-out 200ms max-height",
       }
     }
   >
@@ -157,10 +163,11 @@ exports[`Collapse should close to custom height 4`] = `
     className="clearfix collapse"
     style={
       Object {
-        "height": 100,
+        "maxHeight": 100,
+        "minHeight": "auto",
         "overflow": "hidden",
         "position": "relative",
-        "transition": "ease-in-out 200ms height",
+        "transition": "ease-in-out 200ms max-height",
       }
     }
   >
@@ -191,10 +198,11 @@ exports[`Collapse should close to default height 1`] = `
     className="clearfix collapse collapse-open"
     style={
       Object {
-        "height": "auto",
+        "maxHeight": "auto",
+        "minHeight": "auto",
         "overflow": "hidden",
         "position": "relative",
-        "transition": "ease-in-out 200ms height",
+        "transition": "ease-in-out 200ms max-height",
       }
     }
   />
@@ -210,10 +218,11 @@ exports[`Collapse should close to default height 2`] = `
     className="clearfix collapse"
     style={
       Object {
-        "height": 500,
+        "maxHeight": 500,
+        "minHeight": "auto",
         "overflow": "hidden",
         "position": "relative",
-        "transition": "ease-in-out 200ms height",
+        "transition": "ease-in-out 200ms max-height",
       }
     }
   >
@@ -244,10 +253,11 @@ exports[`Collapse should close to default height 3`] = `
     className="clearfix collapse"
     style={
       Object {
-        "height": 0,
+        "maxHeight": 0,
+        "minHeight": "auto",
         "overflow": "hidden",
         "position": "relative",
-        "transition": "ease-in-out 200ms height",
+        "transition": "ease-in-out 200ms max-height",
       }
     }
   >
@@ -278,10 +288,11 @@ exports[`Collapse should close to default height 4`] = `
     className="clearfix collapse"
     style={
       Object {
-        "height": 0,
+        "maxHeight": 0,
+        "minHeight": "auto",
         "overflow": "hidden",
         "position": "relative",
-        "transition": "ease-in-out 200ms height",
+        "transition": "ease-in-out 200ms max-height",
       }
     }
   >
@@ -308,10 +319,11 @@ exports[`Collapse should match snapshot when collapsed 1`] = `
   className="clearfix collapse"
   style={
     Object {
-      "height": 0,
+      "maxHeight": 0,
+      "minHeight": "auto",
       "overflow": "hidden",
       "position": "relative",
-      "transition": "ease-in-out 200ms height",
+      "transition": "ease-in-out 200ms max-height",
     }
   }
 />
@@ -322,10 +334,11 @@ exports[`Collapse should match snapshot when expanded 1`] = `
   className="clearfix collapse collapse-open"
   style={
     Object {
-      "height": "auto",
+      "maxHeight": "auto",
+      "minHeight": "auto",
       "overflow": "hidden",
       "position": "relative",
-      "transition": "ease-in-out 200ms height",
+      "transition": "ease-in-out 200ms max-height",
     }
   }
 />
@@ -336,10 +349,26 @@ exports[`Collapse should match snapshot with custom collapsed height 1`] = `
   className="clearfix collapse"
   style={
     Object {
-      "height": 100,
+      "maxHeight": 100,
+      "minHeight": "auto",
       "overflow": "hidden",
       "position": "relative",
-      "transition": "ease-in-out 200ms height",
+      "transition": "ease-in-out 200ms max-height",
+    }
+  }
+/>
+`;
+
+exports[`Collapse should match snapshot with custom min height 1`] = `
+<div
+  className="clearfix collapse"
+  style={
+    Object {
+      "maxHeight": 0,
+      "minHeight": 100,
+      "overflow": "hidden",
+      "position": "relative",
+      "transition": "ease-in-out 200ms max-height",
     }
   }
 />
@@ -350,10 +379,11 @@ exports[`Collapse should match snapshot with customized fade out 1`] = `
   className="clearfix collapse"
   style={
     Object {
-      "height": 0,
+      "maxHeight": 0,
+      "minHeight": "auto",
       "overflow": "hidden",
       "position": "relative",
-      "transition": "ease-in-out 200ms height",
+      "transition": "ease-in-out 200ms max-height",
     }
   }
 >
@@ -379,10 +409,11 @@ exports[`Collapse should match snapshot with fade out 1`] = `
   className="clearfix collapse"
   style={
     Object {
-      "height": 0,
+      "maxHeight": 0,
+      "minHeight": "auto",
       "overflow": "hidden",
       "position": "relative",
-      "transition": "ease-in-out 200ms height",
+      "transition": "ease-in-out 200ms max-height",
     }
   }
 >
@@ -413,10 +444,11 @@ exports[`Collapse should open from custom height 1`] = `
     className="clearfix collapse"
     style={
       Object {
-        "height": 100,
+        "maxHeight": 100,
+        "minHeight": "auto",
         "overflow": "hidden",
         "position": "relative",
-        "transition": "ease-in-out 200ms height",
+        "transition": "ease-in-out 200ms max-height",
       }
     }
   >
@@ -448,10 +480,11 @@ exports[`Collapse should open from custom height 2`] = `
     className="clearfix collapse collapse-open"
     style={
       Object {
-        "height": 100,
+        "maxHeight": 100,
+        "minHeight": "auto",
         "overflow": "hidden",
         "position": "relative",
-        "transition": "ease-in-out 200ms height",
+        "transition": "ease-in-out 200ms max-height",
       }
     }
   >
@@ -483,10 +516,11 @@ exports[`Collapse should open from custom height 3`] = `
     className="clearfix collapse collapse-open"
     style={
       Object {
-        "height": 500,
+        "maxHeight": 500,
+        "minHeight": "auto",
         "overflow": "hidden",
         "position": "relative",
-        "transition": "ease-in-out 200ms height",
+        "transition": "ease-in-out 200ms max-height",
       }
     }
   >
@@ -518,10 +552,11 @@ exports[`Collapse should open from custom height 4`] = `
     className="clearfix collapse collapse-open"
     style={
       Object {
-        "height": "auto",
+        "maxHeight": "auto",
+        "minHeight": "auto",
         "overflow": "hidden",
         "position": "relative",
-        "transition": "ease-in-out 200ms height",
+        "transition": "ease-in-out 200ms max-height",
       }
     }
   />
@@ -537,10 +572,11 @@ exports[`Collapse should open from default height 1`] = `
     className="clearfix collapse"
     style={
       Object {
-        "height": 0,
+        "maxHeight": 0,
+        "minHeight": "auto",
         "overflow": "hidden",
         "position": "relative",
-        "transition": "ease-in-out 200ms height",
+        "transition": "ease-in-out 200ms max-height",
       }
     }
   >
@@ -571,10 +607,11 @@ exports[`Collapse should open from default height 2`] = `
     className="clearfix collapse collapse-open"
     style={
       Object {
-        "height": 0,
+        "maxHeight": 0,
+        "minHeight": "auto",
         "overflow": "hidden",
         "position": "relative",
-        "transition": "ease-in-out 200ms height",
+        "transition": "ease-in-out 200ms max-height",
       }
     }
   >
@@ -605,10 +642,11 @@ exports[`Collapse should open from default height 3`] = `
     className="clearfix collapse collapse-open"
     style={
       Object {
-        "height": 500,
+        "maxHeight": 500,
+        "minHeight": "auto",
         "overflow": "hidden",
         "position": "relative",
-        "transition": "ease-in-out 200ms height",
+        "transition": "ease-in-out 200ms max-height",
       }
     }
   >
@@ -639,10 +677,11 @@ exports[`Collapse should open from default height 4`] = `
     className="clearfix collapse collapse-open"
     style={
       Object {
-        "height": "auto",
+        "maxHeight": "auto",
+        "minHeight": "auto",
         "overflow": "hidden",
         "position": "relative",
-        "transition": "ease-in-out 200ms height",
+        "transition": "ease-in-out 200ms max-height",
       }
     }
   />
@@ -654,10 +693,11 @@ exports[`Collapse should take regular element attributes 1`] = `
   className="clearfix collapse my-class"
   style={
     Object {
-      "height": 0,
+      "maxHeight": 0,
+      "minHeight": "auto",
       "overflow": "hidden",
       "position": "relative",
-      "transition": "ease-in-out 200ms height",
+      "transition": "ease-in-out 200ms max-height",
     }
   }
 />
diff --git a/tests/collapse.tsx b/tests/collapse.tsx
index 432a115ff..df0430e05 100644
--- a/tests/collapse.tsx
+++ b/tests/collapse.tsx
@@ -29,6 +29,12 @@ describe('Collapse', () => {
     expect(tree).toMatchSnapshot();
   });
 
+  it('should match snapshot with custom min height', () => {
+    const tree = renderer.create(<Collapse open={false} minHeight={100} />);
+
+    expect(tree).toMatchSnapshot();
+  });
+
   it('should accept custom duration', () => {
     jest.useFakeTimers();