diff --git a/src/components/card/Card.css b/src/components/card/Card.css
index 573e4e4..3602ed3 100644
--- a/src/components/card/Card.css
+++ b/src/components/card/Card.css
@@ -5,3 +5,7 @@
     border-bottom: none;
   }
 }
+
+.ant-card-type-inner {
+  background-color: var(--j2-color-bg-layout);
+}
diff --git a/src/components/card/Card.stories.ts b/src/components/card/Card.stories.tsx
similarity index 79%
rename from src/components/card/Card.stories.ts
rename to src/components/card/Card.stories.tsx
index c2f407b..772a49f 100644
--- a/src/components/card/Card.stories.ts
+++ b/src/components/card/Card.stories.tsx
@@ -50,3 +50,19 @@ export const Borderless: Story = {
     bordered: false,
   },
 }
+
+export const Inner: Story = {
+  args: {
+    ...Default.args,
+    type: 'inner',
+    title: 'Innie',
+    children: <p>I'm an innie</p>,
+  },
+  render: (args) => {
+    return (
+      <Card title="Outie">
+        <Card {...args} />
+      </Card>
+    )
+  },
+}