diff --git a/apps/vr-tests-react-components/src/stories/Card.stories.tsx b/apps/vr-tests-react-components/src/stories/Card.stories.tsx
deleted file mode 100644
index bc4a4db56f324f..00000000000000
--- a/apps/vr-tests-react-components/src/stories/Card.stories.tsx
+++ /dev/null
@@ -1,334 +0,0 @@
-import { storiesOf } from '@storybook/react';
-import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
-import { Card, CardHeader, CardFooter, CardPreview } from '@fluentui/react-card';
-import { MoreHorizontal24Filled, Open16Regular, Share16Regular } from '@fluentui/react-icons';
-import { Body1, Caption1 } from '@fluentui/react-text';
-import { Button } from '@fluentui/react-button';
-import { action } from '@storybook/addon-actions';
-
-const ASSET_URL =
-  'https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card/stories/assets/';
-
-const powerpointLogoURL = ASSET_URL + 'powerpoint_logo.svg';
-const salesPresentationTemplateURL = ASSET_URL + 'sales_template.png';
-
-const SampleCardContent = () => (
-  <>
-    <CardHeader
-      image={{ as: 'img', src: powerpointLogoURL, alt: 'Microsoft PowerPoint logo' }}
-      header={
-        <Body1>
-          <b>App Name</b>
-        </Body1>
-      }
-      description={<Caption1>Developer</Caption1>}
-    />
-    <div>
-      Donut chocolate bar oat cake. Dragée tiramisu lollipop bear claw. Marshmallow pastry jujubes toffee sugar plum.
-    </div>
-    <CardFooter>
-      <Button appearance="primary" icon={<Open16Regular />}>
-        Open
-      </Button>
-      <Button icon={<Share16Regular />}>Share</Button>
-    </CardFooter>
-  </>
-);
-
-storiesOf('Card Converged', module)
-  .addDecorator(story => (
-    <Screener steps={new Screener.Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>
-      <div className="testWrapper" style={{ width: '600px' }}>
-        {story()}
-      </div>
-    </Screener>
-  ))
-  .addStory('card templates', () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-      <Card>
-        <CardPreview>
-          <img src={salesPresentationTemplateURL} alt="sales presentation preview" />
-        </CardPreview>
-        <CardHeader
-          image={{ as: 'img', src: powerpointLogoURL, alt: 'Microsoft PowerPoint logo' }}
-          header={
-            <Body1>
-              <b>Sales analysis 2019 presentation</b>
-            </Body1>
-          }
-          description={<Caption1>Folder &gt; Presentations</Caption1>}
-        />
-      </Card>
-    </div>
-  ))
-  .addStory(
-    'appearance',
-    () => (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-        <div>
-          <h1>Filled</h1>
-          <Card appearance="filled">
-            <SampleCardContent />
-          </Card>
-        </div>
-        <div>
-          <h1>Filled alternative</h1>
-          <Card appearance="filled-alternative">
-            <SampleCardContent />
-          </Card>
-        </div>
-        <div>
-          <h1>Outline</h1>
-          <Card appearance="outline">
-            <SampleCardContent />
-          </Card>
-        </div>
-        <div>
-          <h1>Subtle</h1>
-          <Card appearance="subtle">
-            <SampleCardContent />
-          </Card>
-        </div>
-      </div>
-    ),
-    {
-      includeRtl: true,
-      includeHighContrast: true,
-      includeDarkMode: true,
-    },
-  )
-  .addStory('size', () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-      <Card size="small">
-        <SampleCardContent />
-      </Card>
-      <Card size="medium">
-        <SampleCardContent />
-      </Card>
-      <Card size="large">
-        <SampleCardContent />
-      </Card>
-    </div>
-  ))
-  .addStory('orientation', () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-      <div>
-        <h1>Vertical</h1>
-        <Card orientation="vertical">
-          <SampleCardContent />
-        </Card>
-      </div>
-      <div>
-        <h1>Horizontal</h1>
-        <Card orientation="horizontal">
-          <SampleCardContent />
-        </Card>
-      </div>
-    </div>
-  ))
-  .addStory('CardHeader', () => (
-    <Card>
-      <CardHeader
-        image={{ as: 'img', src: powerpointLogoURL, alt: 'Microsoft PowerPoint logo' }}
-        header={
-          <Body1>
-            <b>App Name</b>
-          </Body1>
-        }
-        description={<Caption1>Developer</Caption1>}
-        action={<Button appearance="transparent" icon={<MoreHorizontal24Filled />} />}
-      />
-      <CardHeader
-        header={
-          <Body1>
-            <b>App Name</b>
-          </Body1>
-        }
-        description={<Caption1>Developer</Caption1>}
-        action={<Button appearance="transparent" icon={<MoreHorizontal24Filled />} />}
-      />
-      <CardHeader
-        image={{ as: 'img', src: powerpointLogoURL, alt: 'Microsoft PowerPoint logo' }}
-        header={
-          <Body1>
-            <b>App Name</b>
-          </Body1>
-        }
-        action={<Button appearance="transparent" icon={<MoreHorizontal24Filled />} />}
-      />
-      <CardHeader
-        image={{ as: 'img', src: powerpointLogoURL, alt: 'Microsoft PowerPoint logo' }}
-        header={
-          <Body1>
-            <b>App Name</b>
-          </Body1>
-        }
-        description={<Caption1>Developer</Caption1>}
-      />
-      <CardHeader
-        header={
-          <Body1>
-            <b>App Name</b>
-          </Body1>
-        }
-        action={<Button appearance="transparent" icon={<MoreHorizontal24Filled />} />}
-      />
-      <CardHeader
-        image={{ as: 'img', src: powerpointLogoURL, alt: 'Microsoft PowerPoint logo' }}
-        header={
-          <Body1>
-            <b>App Name</b>
-          </Body1>
-        }
-      />
-      <CardHeader
-        header={
-          <Body1>
-            <b>App Name</b>
-          </Body1>
-        }
-      />
-    </Card>
-  ));
-
-storiesOf('Card Converged - Interactive', module)
-  .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
-        .snapshot('normal', { cropTo: '.testWrapper' })
-        .hover('[role="group"]')
-        .snapshot('hover', { cropTo: '.testWrapper' })
-        .mouseDown('[role="group"]')
-        .snapshot('click', { cropTo: '.testWrapper' })
-        .end()}
-    >
-      <div className="testWrapper" style={{ width: '300px' }}>
-        {story()}
-      </div>
-    </Screener>
-  ))
-  .addStory(
-    'appearance interactive - Filled',
-    () => (
-      <Card onClick={action('filled card clicked')} appearance="filled">
-        <SampleCardContent />
-      </Card>
-    ),
-    {
-      includeHighContrast: true,
-      includeDarkMode: true,
-    },
-  )
-  .addStory(
-    'appearance interactive - Filled Alternative',
-    () => (
-      <Card onClick={action('filled alternative card clicked')} appearance="filled-alternative">
-        <SampleCardContent />
-      </Card>
-    ),
-    {
-      includeHighContrast: true,
-      includeDarkMode: true,
-    },
-  )
-  .addStory(
-    'appearance interactive - Outline',
-    () => (
-      <Card onClick={action('outline card clicked')} appearance="outline">
-        <SampleCardContent />
-      </Card>
-    ),
-    {
-      includeHighContrast: true,
-      includeDarkMode: true,
-    },
-  )
-  .addStory(
-    'appearance interactive - Subtle',
-    () => (
-      <Card onClick={action('subtle card clicked')} appearance="subtle">
-        <SampleCardContent />
-      </Card>
-    ),
-    {
-      includeHighContrast: true,
-      includeDarkMode: true,
-    },
-  );
-
-storiesOf('Card Converged - Selectable', module)
-  .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
-        .snapshot('normal', { cropTo: '.testWrapper' })
-        .hover('[role="group"]')
-        .snapshot('hover', { cropTo: '.testWrapper' })
-        .mouseDown('[role="group"]')
-        .snapshot('click', { cropTo: '.testWrapper' })
-        .mouseUp('[role="group"]')
-        .snapshot('selected', { cropTo: '.testWrapper' })
-        .end()}
-    >
-      <div className="testWrapper" style={{ width: '300px' }}>
-        {story()}
-      </div>
-    </Screener>
-  ))
-  .addStory(
-    'appearance selectable - Filled',
-    () => (
-      <Card defaultSelected={false} appearance="filled">
-        <SampleCardContent />
-      </Card>
-    ),
-    {
-      includeRtl: true,
-      includeHighContrast: true,
-      includeDarkMode: true,
-    },
-  )
-  .addStory(
-    'appearance selectable - Filled Alternative',
-    () => (
-      <Card defaultSelected={false} appearance="filled-alternative">
-        <SampleCardContent />
-      </Card>
-    ),
-    {
-      includeRtl: true,
-      includeHighContrast: true,
-      includeDarkMode: true,
-    },
-  )
-  .addStory(
-    'appearance selectable - Outline',
-    () => (
-      <Card defaultSelected={false} appearance="outline">
-        <SampleCardContent />
-      </Card>
-    ),
-    {
-      includeRtl: true,
-      includeHighContrast: true,
-      includeDarkMode: true,
-    },
-  )
-  .addStory(
-    'appearance selectable - Subtle',
-    () => (
-      <Card defaultSelected={false} appearance="subtle">
-        <SampleCardContent />
-      </Card>
-    ),
-    {
-      includeRtl: true,
-      includeHighContrast: true,
-      includeDarkMode: true,
-    },
-  )
-  .addStory('appearance focusable + selectable', () => (
-    <Card focusMode="no-tab" defaultSelected={false}>
-      <SampleCardContent />
-    </Card>
-  ));
diff --git a/apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx b/apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx
new file mode 100644
index 00000000000000..12f1bb416a430a
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx
@@ -0,0 +1,181 @@
+import * as React from 'react';
+import Screener from 'screener-storybook/src/screener';
+import { Card, CardHeader, CardPreview } from '@fluentui/react-card';
+import { MoreHorizontal24Filled } from '@fluentui/react-icons';
+import { Body1, Caption1 } from '@fluentui/react-text';
+import { Button } from '@fluentui/react-button';
+import { powerpointLogoURL, salesPresentationTemplateURL, SampleCardContent } from './utils';
+import { ComponentMeta } from '@storybook/react';
+import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
+
+export default {
+  title: 'Card Converged',
+
+  decorators: [
+    story => (
+      <Screener steps={new Screener.Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>
+        <div className="testWrapper" style={{ width: '600px' }}>
+          {story()}
+        </div>
+      </Screener>
+    ),
+  ],
+} as ComponentMeta<typeof Card>;
+
+export const CardTemplates = () => (
+  <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+    <Card>
+      <CardPreview>
+        <img src={salesPresentationTemplateURL} alt="sales presentation preview" />
+      </CardPreview>
+      <CardHeader
+        image={{ as: 'img', src: powerpointLogoURL, alt: 'Microsoft PowerPoint logo' }}
+        header={
+          <Body1>
+            <b>Sales analysis 2019 presentation</b>
+          </Body1>
+        }
+        description={<Caption1>Folder &gt; Presentations</Caption1>}
+      />
+    </Card>
+  </div>
+);
+
+CardTemplates.storyName = 'card templates';
+
+export const Appearance = () => (
+  <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', marginLeft: '10px', marginRight: '10px' }}>
+    <div>
+      <h1>Filled</h1>
+      <Card appearance="filled">
+        <SampleCardContent />
+      </Card>
+    </div>
+    <div>
+      <h1>Filled alternative</h1>
+      <Card appearance="filled-alternative">
+        <SampleCardContent />
+      </Card>
+    </div>
+    <div>
+      <h1>Outline</h1>
+      <Card appearance="outline">
+        <SampleCardContent />
+      </Card>
+    </div>
+    <div>
+      <h1>Subtle</h1>
+      <Card appearance="subtle">
+        <SampleCardContent />
+      </Card>
+    </div>
+  </div>
+);
+
+Appearance.storyName = 'appearance';
+
+export const AppearanceDarkMode = getStoryVariant(Appearance, DARK_MODE);
+export const AppearanceHighContrast = getStoryVariant(Appearance, HIGH_CONTRAST);
+export const AppearanceRTL = getStoryVariant(Appearance, RTL);
+
+export const Size = () => (
+  <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+    <Card size="small">
+      <SampleCardContent />
+    </Card>
+    <Card size="medium">
+      <SampleCardContent />
+    </Card>
+    <Card size="large">
+      <SampleCardContent />
+    </Card>
+  </div>
+);
+
+Size.storyName = 'size';
+
+export const Orientation = () => (
+  <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+    <div>
+      <h1>Vertical</h1>
+      <Card orientation="vertical">
+        <SampleCardContent />
+      </Card>
+    </div>
+    <div>
+      <h1>Horizontal</h1>
+      <Card orientation="horizontal">
+        <SampleCardContent />
+      </Card>
+    </div>
+  </div>
+);
+
+Orientation.storyName = 'orientation';
+
+export const _CardHeader = () => (
+  <Card>
+    <CardHeader
+      image={{ as: 'img', src: powerpointLogoURL, alt: 'Microsoft PowerPoint logo' }}
+      header={
+        <Body1>
+          <b>App Name</b>
+        </Body1>
+      }
+      description={<Caption1>Developer</Caption1>}
+      action={<Button appearance="transparent" icon={<MoreHorizontal24Filled />} />}
+    />
+    <CardHeader
+      header={
+        <Body1>
+          <b>App Name</b>
+        </Body1>
+      }
+      description={<Caption1>Developer</Caption1>}
+      action={<Button appearance="transparent" icon={<MoreHorizontal24Filled />} />}
+    />
+    <CardHeader
+      image={{ as: 'img', src: powerpointLogoURL, alt: 'Microsoft PowerPoint logo' }}
+      header={
+        <Body1>
+          <b>App Name</b>
+        </Body1>
+      }
+      action={<Button appearance="transparent" icon={<MoreHorizontal24Filled />} />}
+    />
+    <CardHeader
+      image={{ as: 'img', src: powerpointLogoURL, alt: 'Microsoft PowerPoint logo' }}
+      header={
+        <Body1>
+          <b>App Name</b>
+        </Body1>
+      }
+      description={<Caption1>Developer</Caption1>}
+    />
+    <CardHeader
+      header={
+        <Body1>
+          <b>App Name</b>
+        </Body1>
+      }
+      action={<Button appearance="transparent" icon={<MoreHorizontal24Filled />} />}
+    />
+    <CardHeader
+      image={{ as: 'img', src: powerpointLogoURL, alt: 'Microsoft PowerPoint logo' }}
+      header={
+        <Body1>
+          <b>App Name</b>
+        </Body1>
+      }
+    />
+    <CardHeader
+      header={
+        <Body1>
+          <b>App Name</b>
+        </Body1>
+      }
+    />
+  </Card>
+);
+
+_CardHeader.storyName = 'CardHeader';
diff --git a/apps/vr-tests-react-components/src/stories/Card/CardInteractive.stories.tsx b/apps/vr-tests-react-components/src/stories/Card/CardInteractive.stories.tsx
new file mode 100644
index 00000000000000..2a4946ff607a45
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Card/CardInteractive.stories.tsx
@@ -0,0 +1,79 @@
+import * as React from 'react';
+import Screener from 'screener-storybook/src/screener';
+import { Card } from '@fluentui/react-card';
+import { action } from '@storybook/addon-actions';
+import { SampleCardContent } from './utils';
+import { ComponentMeta } from '@storybook/react';
+import { getStoryVariant, DARK_MODE, HIGH_CONTRAST } from '../../utilities';
+
+export default {
+  title: 'Card Converged - Interactive',
+
+  decorators: [
+    story => (
+      <Screener
+        steps={new Screener.Steps()
+          .snapshot('normal', { cropTo: '.testWrapper' })
+          .hover('[role="group"]')
+          .snapshot('hover', { cropTo: '.testWrapper' })
+          .mouseDown('[role="group"]')
+          .snapshot('click', { cropTo: '.testWrapper' })
+          .end()}
+      >
+        <div className="testWrapper" style={{ width: '300px' }}>
+          {story()}
+        </div>
+      </Screener>
+    ),
+  ],
+} as ComponentMeta<typeof Card>;
+
+export const AppearanceInteractiveFilled = () => (
+  <Card onClick={action('filled card clicked')} appearance="filled">
+    <SampleCardContent />
+  </Card>
+);
+
+AppearanceInteractiveFilled.storyName = 'appearance interactive - Filled';
+
+export const AppearanceInteractiveFilledDarkMode = getStoryVariant(AppearanceInteractiveFilled, DARK_MODE);
+export const AppearanceInteractiveFilledHighContrast = getStoryVariant(AppearanceInteractiveFilled, HIGH_CONTRAST);
+
+export const AppearanceInteractiveFilledAlternative = () => (
+  <Card onClick={action('filled alternative card clicked')} appearance="filled-alternative">
+    <SampleCardContent />
+  </Card>
+);
+
+AppearanceInteractiveFilledAlternative.storyName = 'appearance interactive - Filled Alternative';
+
+export const AppearanceInteractiveFilledAlternativeDarkMode = getStoryVariant(
+  AppearanceInteractiveFilledAlternative,
+  DARK_MODE,
+);
+export const AppearanceInteractiveFilledAlternativeHighContrast = getStoryVariant(
+  AppearanceInteractiveFilledAlternative,
+  HIGH_CONTRAST,
+);
+
+export const AppearanceInteractiveOutline = () => (
+  <Card onClick={action('outline card clicked')} appearance="outline">
+    <SampleCardContent />
+  </Card>
+);
+
+AppearanceInteractiveOutline.storyName = 'appearance interactive - Outline';
+
+export const AppearanceInteractiveOutlineDarkMode = getStoryVariant(AppearanceInteractiveOutline, DARK_MODE);
+export const AppearanceInteractiveOutlineHighContrast = getStoryVariant(AppearanceInteractiveOutline, HIGH_CONTRAST);
+
+export const AppearanceInteractiveSubtle = () => (
+  <Card onClick={action('subtle card clicked')} appearance="subtle">
+    <SampleCardContent />
+  </Card>
+);
+
+AppearanceInteractiveSubtle.storyName = 'appearance interactive - Subtle';
+
+export const AppearanceInteractiveSubtleDarkMode = getStoryVariant(AppearanceInteractiveSubtle, DARK_MODE);
+export const AppearanceInteractiveSubtleHighContrast = getStoryVariant(AppearanceInteractiveSubtle, HIGH_CONTRAST);
diff --git a/apps/vr-tests-react-components/src/stories/Card/CardSelectable.stories.tsx b/apps/vr-tests-react-components/src/stories/Card/CardSelectable.stories.tsx
new file mode 100644
index 00000000000000..8ffcbb067ec181
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Card/CardSelectable.stories.tsx
@@ -0,0 +1,92 @@
+import * as React from 'react';
+import Screener from 'screener-storybook/src/screener';
+import { Card } from '@fluentui/react-card';
+import { SampleCardContent } from './utils';
+import { ComponentMeta } from '@storybook/react';
+import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
+
+export default {
+  title: 'Card Converged - Selectable',
+
+  decorators: [
+    story => (
+      <Screener
+        steps={new Screener.Steps()
+          .snapshot('normal', { cropTo: '.testWrapper' })
+          .hover('[role="group"]')
+          .snapshot('hover', { cropTo: '.testWrapper' })
+          .mouseDown('[role="group"]')
+          .snapshot('click', { cropTo: '.testWrapper' })
+          .mouseUp('[role="group"]')
+          .snapshot('selected', { cropTo: '.testWrapper' })
+          .end()}
+      >
+        <div className="testWrapper" style={{ width: '300px' }}>
+          {story()}
+        </div>
+      </Screener>
+    ),
+  ],
+} as ComponentMeta<typeof Card>;
+
+export const AppearanceSelectableFilled = () => (
+  <Card defaultSelected={false} appearance="filled">
+    <SampleCardContent />
+  </Card>
+);
+
+AppearanceSelectableFilled.storyName = 'appearance selectable - Filled';
+
+export const AppearanceSelectableFilledDarkMode = getStoryVariant(AppearanceSelectableFilled, DARK_MODE);
+export const AppearanceSelectableFilledHighContrast = getStoryVariant(AppearanceSelectableFilled, HIGH_CONTRAST);
+export const AppearanceSelectableFilledRTL = getStoryVariant(AppearanceSelectableFilled, RTL);
+
+export const AppearanceSelectableFilledAlternative = () => (
+  <Card defaultSelected={false} appearance="filled-alternative">
+    <SampleCardContent />
+  </Card>
+);
+
+AppearanceSelectableFilledAlternative.storyName = 'appearance selectable - Filled Alternative';
+
+export const AppearanceSelectableFilledAlternativeDarkMode = getStoryVariant(
+  AppearanceSelectableFilledAlternative,
+  DARK_MODE,
+);
+export const AppearanceSelectableFilledAlternativeHighContrast = getStoryVariant(
+  AppearanceSelectableFilledAlternative,
+  HIGH_CONTRAST,
+);
+export const AppearanceSelectableFilledAlternativeRTL = getStoryVariant(AppearanceSelectableFilledAlternative, RTL);
+
+export const AppearanceSelectableOutline = () => (
+  <Card defaultSelected={false} appearance="outline">
+    <SampleCardContent />
+  </Card>
+);
+
+AppearanceSelectableOutline.storyName = 'appearance selectable - Outline';
+
+export const AppearanceSelectableOutlineDarkMode = getStoryVariant(AppearanceSelectableOutline, DARK_MODE);
+export const AppearanceSelectableOutlineHighContrast = getStoryVariant(AppearanceSelectableOutline, HIGH_CONTRAST);
+export const AppearanceSelectableOutlineRTL = getStoryVariant(AppearanceSelectableOutline, RTL);
+
+export const AppearanceSelectableSubtle = () => (
+  <Card defaultSelected={false} appearance="subtle">
+    <SampleCardContent />
+  </Card>
+);
+
+AppearanceSelectableSubtle.storyName = 'appearance selectable - Subtle';
+
+export const AppearanceSelectableSubtleDarkMode = getStoryVariant(AppearanceSelectableSubtle, DARK_MODE);
+export const AppearanceSelectableSubtleHighContrast = getStoryVariant(AppearanceSelectableSubtle, HIGH_CONTRAST);
+export const AppearanceSelectableSubtleRTL = getStoryVariant(AppearanceSelectableSubtle, RTL);
+
+export const AppearanceFocusableSelectable = () => (
+  <Card focusMode="no-tab" defaultSelected={false}>
+    <SampleCardContent />
+  </Card>
+);
+
+AppearanceFocusableSelectable.storyName = 'appearance focusable + selectable';
diff --git a/apps/vr-tests-react-components/src/stories/Card/utils.tsx b/apps/vr-tests-react-components/src/stories/Card/utils.tsx
new file mode 100644
index 00000000000000..6515a3132d02e7
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Card/utils.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { CardHeader, CardFooter } from '@fluentui/react-card';
+import { Body1, Caption1 } from '@fluentui/react-text';
+import { Button } from '@fluentui/react-button';
+import { Open16Regular, Share16Regular } from '@fluentui/react-icons';
+
+const ASSET_URL =
+  'https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card/stories/assets/';
+
+export const powerpointLogoURL = ASSET_URL + 'powerpoint_logo.svg';
+export const salesPresentationTemplateURL = ASSET_URL + 'sales_template.png';
+
+export const SampleCardContent = () => (
+  <>
+    <CardHeader
+      image={{ as: 'img', src: powerpointLogoURL, alt: 'Microsoft PowerPoint logo' }}
+      header={
+        <Body1>
+          <b>App Name</b>
+        </Body1>
+      }
+      description={<Caption1>Developer</Caption1>}
+    />
+    <div>
+      Donut chocolate bar oat cake. Dragée tiramisu lollipop bear claw. Marshmallow pastry jujubes toffee sugar plum.
+    </div>
+    <CardFooter>
+      <Button appearance="primary" icon={<Open16Regular />}>
+        Open
+      </Button>
+      <Button icon={<Share16Regular />}>Share</Button>
+    </CardFooter>
+  </>
+);