From 01a68a10e1c25a7ceb6169007df45024f7f9ac35 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Dias?= <andredias@microsoft.com>
Date: Wed, 29 Sep 2021 16:39:46 +0200
Subject: [PATCH 1/3] Add margin adjustmentes with fixed className

---
 packages/react-card/src/components/Card.stories.tsx       | 2 +-
 packages/react-card/src/components/Card/useCardStyles.ts  | 8 ++++++++
 .../src/components/CardPreview/useCardPreviewStyles.ts    | 2 +-
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/react-card/src/components/Card.stories.tsx b/packages/react-card/src/components/Card.stories.tsx
index 3ba0d8157ead1..ff2a10608fb3d 100644
--- a/packages/react-card/src/components/Card.stories.tsx
+++ b/packages/react-card/src/components/Card.stories.tsx
@@ -96,7 +96,7 @@ export const GridviewCard = () => (
       maxWidth: '368px',
     }}
   >
-    <CardPreview style={{ marginTop: '-12px' }}>
+    <CardPreview>
       <img src="./sales_template.png" alt="Preview of a sales slide deck" />
     </CardPreview>
     <CardHeader
diff --git a/packages/react-card/src/components/Card/useCardStyles.ts b/packages/react-card/src/components/Card/useCardStyles.ts
index 0a77f09fff0e5..ad22922cc9cbf 100644
--- a/packages/react-card/src/components/Card/useCardStyles.ts
+++ b/packages/react-card/src/components/Card/useCardStyles.ts
@@ -20,6 +20,14 @@ const useStyles = makeStyles({
     padding: '12px',
     gap: '12px',
     borderRadius: theme.global.borderRadius.medium,
+
+    '> .fluentui-react-card-preview': {
+      marginLeft: '-12px',
+      marginRight: '-12px',
+      '&:first-child': {
+        marginTop: '-12px',
+      },
+    },
   }),
 
   interactive: theme => ({
diff --git a/packages/react-card/src/components/CardPreview/useCardPreviewStyles.ts b/packages/react-card/src/components/CardPreview/useCardPreviewStyles.ts
index 8e3a5111cc90e..1779e64c00d2d 100644
--- a/packages/react-card/src/components/CardPreview/useCardPreviewStyles.ts
+++ b/packages/react-card/src/components/CardPreview/useCardPreviewStyles.ts
@@ -30,7 +30,7 @@ const useStyles = makeStyles({
  */
 export const useCardPreviewStyles = (state: CardPreviewState): CardPreviewState => {
   const styles = useStyles();
-  state.className = mergeClasses(styles.root, state.className);
+  state.className = mergeClasses('fluentui-react-card-preview', styles.root, state.className);
 
   if (state.logo) {
     state.logo.className = mergeClasses(styles.logo, state.logo.className);

From 955596fa23e662f1acc61fe495eda68063fc3b85 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Dias?= <andredias@microsoft.com>
Date: Wed, 29 Sep 2021 16:40:22 +0200
Subject: [PATCH 2/3] Change files

---
 ...ui-react-card-eef6d228-043e-411b-87c8-94969a3e7cab.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-card-eef6d228-043e-411b-87c8-94969a3e7cab.json

diff --git a/change/@fluentui-react-card-eef6d228-043e-411b-87c8-94969a3e7cab.json b/change/@fluentui-react-card-eef6d228-043e-411b-87c8-94969a3e7cab.json
new file mode 100644
index 0000000000000..68216fb09d3e8
--- /dev/null
+++ b/change/@fluentui-react-card-eef6d228-043e-411b-87c8-94969a3e7cab.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "CardPreview removes own top margin when the first element in a Card",
+  "packageName": "@fluentui/react-card",
+  "email": "andredias@microsoft.com",
+  "dependentChangeType": "patch"
+}

From f2cb3b75ffe9ec827a9619b0f98b8dc10af5d91b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Dias?= <andredias@microsoft.com>
Date: Wed, 29 Sep 2021 16:58:18 +0200
Subject: [PATCH 3/3] Update snapshots

---
 .../CardPreview/__snapshots__/CardPreview.test.tsx.snap         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-card/src/components/CardPreview/__snapshots__/CardPreview.test.tsx.snap b/packages/react-card/src/components/CardPreview/__snapshots__/CardPreview.test.tsx.snap
index 5fe994eb2f2e7..89df4c0b92ec7 100644
--- a/packages/react-card/src/components/CardPreview/__snapshots__/CardPreview.test.tsx.snap
+++ b/packages/react-card/src/components/CardPreview/__snapshots__/CardPreview.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`CardPreview renders a default state 1`] = `
 <div>
   <div
-    class=""
+    class="fluentui-react-card-preview"
   >
     Default CardPreview
     <div