Added margin to Card Footer

UNRELEASED.md

@@ -17,6 +17,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 ### Bug fixes
 
 - Fixed the `DataTable` sort direction not reversing on second sort of the initially sorted column ([#918](https://github.com/Shopify/polaris-react/pull/918)) (thanks [@tabrez96](https://github.com/tabrez96) for the [issue report](https://github.com/Shopify/polaris-react/issues/873))
+- Adjusted top and bottom padding to the header, footer and sections in `Card` to add space between action buttons in the header and footer and the card sections. ([#962](https://github.com/Shopify/polaris-react/pull/962))
 
 ### Documentation
 

src/components/Card/Card.scss

@@ -17,18 +17,19 @@
 }
 
 .Header {
-  padding: spacing() spacing() 0;
+  padding: spacing() spacing() rem(12px) spacing();
 
   @include page-content-when-not-fully-condensed {
-    padding: spacing(loose) spacing(loose) 0;
+    padding-right: spacing(loose);
+    padding-left: spacing(loose);
   }
 }
 
 .Section {
   padding: spacing();
 
   @include page-content-when-not-fully-condensed {
-    padding: spacing(loose);
+    padding: spacing() spacing(loose);
   }
 
   + .Section {
@@ -42,6 +43,7 @@
 
 .Section-subdued {
   background-color: color('sky', 'lighter');
+  border-top: border-width() solid color('sky');
 }
 
 .SectionHeader {
@@ -61,9 +63,14 @@
 .Footer {
   display: flex;
   justify-content: flex-end;
-  padding: 0 spacing() spacing();
+  padding: rem(12px) spacing() spacing() spacing();
 
   @include page-content-when-not-fully-condensed {
-    padding: 0 spacing(loose) spacing(loose);
+    padding-right: spacing(loose);
+    padding-left: spacing(loose);
+  }
+
+  .Section-subdued + & {
+    border-top: border-width() solid color('sky');
   }
 }