diff --git a/packages/components/card/src/card.ts b/packages/components/card/src/card.ts
index 51dc83b8..10b43317 100644
--- a/packages/components/card/src/card.ts
+++ b/packages/components/card/src/card.ts
@@ -8,6 +8,7 @@ export const cardVariants = [
   'purple',
   'amber',
   'green',
+  'red',
   'default',
 ] as const
 
diff --git a/packages/components/card/stories/card.stories.ts b/packages/components/card/stories/card.stories.ts
index 4545c44a..d93d8ada 100644
--- a/packages/components/card/stories/card.stories.ts
+++ b/packages/components/card/stories/card.stories.ts
@@ -216,6 +216,33 @@ export const Green = {
   },
 }
 
+export const Red = {
+  render: Template,
+
+  args: {
+    variant: 'red',
+  },
+
+  parameters: {
+    docs: {
+      source: {
+        code: `
+  <!--VueJS Snippet-->
+  <puik-card variant="red">
+    Card content
+  </puik-card>
+
+  <!--HTML/CSS Snippet-->
+  <div class="puik-card puik-card--red">
+    Card content
+  </div>
+        `,
+        language: 'html',
+      },
+    },
+  },
+}
+
 export const WithPictureTitleTextAndAction: StoryObj = {
   render: (args: Args) => ({
     components: {
diff --git a/packages/theme/src/card.scss b/packages/theme/src/card.scss
index 01fdae3d..d47a71eb 100644
--- a/packages/theme/src/card.scss
+++ b/packages/theme/src/card.scss
@@ -19,4 +19,7 @@
   &--green {
     @apply bg-green-50 border-none;
   }
+  &--red {
+    @apply bg-red-50 border-none;
+  }
 }