diff --git a/CHANGELOG.md b/CHANGELOG.md
index 48929fe6..9ff67b3c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [2.2.0](https://github.com/silinternational/ui-components/releases/tag/v2.2.0) - 2021-07-14
+### Added
+- noPadding to card
+
+### Changed
+- README - updated component index
+
 ## [2.1.0](https://github.com/silinternational/ui-components/releases/tag/v2.1.0) - 2021-07-13
 ### Changed
 - README - updated installation instructions, bundler configuration and component index
diff --git a/README.md b/README.md
index bd13f18e..eba28898 100644
--- a/README.md
+++ b/README.md
@@ -48,7 +48,7 @@ A list of all components (subcomponents and js files for interfacing in []) foll
 
 Button (disabled, outlined, raised, prependIcon, appendIcon, url)
 
-Card (secondary, outlined, color, isClickable)
+Card (secondary, outlined, color, isClickable, noPadding)
 
 Checkbox (label, checked, disabled, uppercase)
 
diff --git a/components/mdc/Card/Card.svelte b/components/mdc/Card/Card.svelte
index 1a68f057..008790e2 100644
--- a/components/mdc/Card/Card.svelte
+++ b/components/mdc/Card/Card.svelte
@@ -4,6 +4,7 @@ export let secondary = ''
 export let outlined = false
 export let color = 'white'
 export let isClickable = false
+export let noPadding = false
 
 $: tabindex = isClickable ? '0' : undefined
 </script>
@@ -19,19 +20,22 @@ $: tabindex = isClickable ? '0' : undefined
   padding-left: 16px;
   padding-right: 16px;
 }
+.noPadding {
+  padding: 0;
+}
 </style>
 
 <div {tabindex} class="mdc-card mdc-typography {$$props.class}" style="background-color: {color}" class:mdc-card--outlined={outlined} class:mdc-card__primary-action={isClickable} on:click on:mousedown on:mouseup on:keypress>
   {#if secondary.length}
-    <div class="secondary-text uppercase gray">
+    <div class="secondary-text uppercase gray" class:noPadding>
       {secondary}
     </div>
   {/if}
-  <div class="supporting-text h-100">
+  <div class="supporting-text h-100" class:noPadding>
     <slot />
   </div>
   {#if $$slots.actions}
-    <div class="mdc-card__actions">
+    <div class="mdc-card__actions" class:noPadding>
       <slot name="actions" />
     </div>
   {/if}
diff --git a/package-lock.json b/package-lock.json
index 507f4823..45c673ba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@silintl/ui-components",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@silintl/ui-components",
-      "version": "2.0.0",
+      "version": "2.2.0",
       "license": "MIT",
       "devDependencies": {
         "@roxi/routify": "^2.x",
diff --git a/package.json b/package.json
index 559422bb..7fcb2205 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@silintl/ui-components",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Reusable Svelte components for some internal applications",
   "main": "index.js",
   "scripts": {