diff --git a/.changeset/unlucky-grapes-count.md b/.changeset/unlucky-grapes-count.md
new file mode 100644
index 0000000000..3d15b166c8
--- /dev/null
+++ b/.changeset/unlucky-grapes-count.md
@@ -0,0 +1,5 @@
+---
+"sit-onyx": minor
+---
+
+feat: implement `OnyxCard` component
diff --git a/apps/demo-app/src/views/HomeView.vue b/apps/demo-app/src/views/HomeView.vue
index 87384161d0..f39718c0bb 100644
--- a/apps/demo-app/src/views/HomeView.vue
+++ b/apps/demo-app/src/views/HomeView.vue
@@ -7,6 +7,7 @@ import {
   OnyxBadge,
   OnyxBottomBar,
   OnyxButton,
+  OnyxCard,
   OnyxCheckboxGroup,
   OnyxDatePicker,
   OnyxEmpty,
@@ -45,6 +46,7 @@ const COMPONENTS = [
   "OnyxAvatar",
   "OnyxBadge",
   "OnyxButton",
+  "OnyxCard",
   "OnyxCheckboxGroup",
   "OnyxDatePicker",
   "OnyxEmpty",
@@ -171,6 +173,8 @@ const selectedDate = ref<DateValue>();
         <OnyxBadge v-if="show('OnyxBadge')">Badge</OnyxBadge>
         <OnyxButton v-if="show('OnyxButton')" label="Button" />
 
+        <OnyxCard v-if="show('OnyxCard')"> Card content... </OnyxCard>
+
         <template v-if="show('OnyxCheckboxGroup')">
           <OnyxCheckboxGroup
             v-model="checkboxState"
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxCard/Card-edge-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxCard/Card-edge-linux.png
new file mode 100644
index 0000000000..e32fadee88
Binary files /dev/null and b/packages/sit-onyx/playwright/snapshots/components/OnyxCard/Card-edge-linux.png differ
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxCard/Card-firefox-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxCard/Card-firefox-linux.png
new file mode 100644
index 0000000000..d3a2483de3
Binary files /dev/null and b/packages/sit-onyx/playwright/snapshots/components/OnyxCard/Card-firefox-linux.png differ
diff --git a/packages/sit-onyx/playwright/snapshots/components/OnyxCard/Card-webkit-linux.png b/packages/sit-onyx/playwright/snapshots/components/OnyxCard/Card-webkit-linux.png
new file mode 100644
index 0000000000..f58480c83b
Binary files /dev/null and b/packages/sit-onyx/playwright/snapshots/components/OnyxCard/Card-webkit-linux.png differ
diff --git a/packages/sit-onyx/src/components/OnyxCard/OnyxCard.ct.tsx b/packages/sit-onyx/src/components/OnyxCard/OnyxCard.ct.tsx
new file mode 100644
index 0000000000..42a44bdb7f
--- /dev/null
+++ b/packages/sit-onyx/src/components/OnyxCard/OnyxCard.ct.tsx
@@ -0,0 +1,26 @@
+import { test } from "../../playwright/a11y";
+import { executeMatrixScreenshotTest } from "../../playwright/screenshots";
+import OnyxHeadline from "../OnyxHeadline/OnyxHeadline.vue";
+import OnyxCard from "./OnyxCard.vue";
+
+test.describe("Screenshot tests", () => {
+  executeMatrixScreenshotTest({
+    name: "Card",
+    columns: ["default", "clickable"],
+    rows: ["default", "focus-visible"],
+    component: (column) => {
+      return (
+        <OnyxCard clickable={column === "clickable"} style={{ width: "16rem" }}>
+          <OnyxHeadline is="h2">Card</OnyxHeadline>
+          Lorem ipsum dolor sit amet consectetur. Id neque viverra faucibus ullamcorper dui
+          volutpat.
+        </OnyxCard>
+      );
+    },
+    hooks: {
+      beforeEach: async (component, page, column, row) => {
+        if (row === "focus-visible") await page.keyboard.press("Tab");
+      },
+    },
+  });
+});
diff --git a/packages/sit-onyx/src/components/OnyxCard/OnyxCard.stories.ts b/packages/sit-onyx/src/components/OnyxCard/OnyxCard.stories.ts
new file mode 100644
index 0000000000..8cbea80b41
--- /dev/null
+++ b/packages/sit-onyx/src/components/OnyxCard/OnyxCard.stories.ts
@@ -0,0 +1,37 @@
+import { withNativeEventLogging } from "@sit-onyx/storybook-utils";
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { h } from "vue";
+import OnyxCard from "./OnyxCard.vue";
+
+const meta: Meta<typeof OnyxCard> = {
+  title: "Basic/Card",
+  component: OnyxCard,
+  argTypes: {
+    style: { table: { disable: true } },
+    default: { control: { disable: true } },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof OnyxCard>;
+
+export const Default = {
+  args: {
+    style: "width: 20rem;",
+    default: h(
+      "span",
+      { style: "color: var(--onyx-color-text-icons-info-intense);" },
+      "Note: The card component is fully flexible. It can be adjusted with every content the project needs.",
+    ),
+  },
+} satisfies Story;
+
+export const Clickable = {
+  argTypes: {
+    ...withNativeEventLogging(["onClick"]),
+  },
+  args: {
+    ...Default.args,
+    clickable: true,
+  },
+} satisfies Story;
diff --git a/packages/sit-onyx/src/components/OnyxCard/OnyxCard.vue b/packages/sit-onyx/src/components/OnyxCard/OnyxCard.vue
new file mode 100644
index 0000000000..2956a976e0
--- /dev/null
+++ b/packages/sit-onyx/src/components/OnyxCard/OnyxCard.vue
@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import { useDensity } from "../../composables/density";
+import type { OnyxCardProps } from "./types";
+
+const props = withDefaults(defineProps<OnyxCardProps>(), {
+  clickable: false,
+});
+
+defineSlots<{
+  /**
+   * Card content.
+   */
+  default(): unknown;
+}>();
+
+const { densityClass } = useDensity(props);
+</script>
+
+<template>
+  <component
+    :is="props.clickable ? 'button' : 'div'"
+    :class="['onyx-component', 'onyx-card', densityClass, 'onyx-truncation-multiline', 'onyx-text']"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<style lang="scss">
+@use "../../styles/mixins/layers.scss";
+
+.onyx-card {
+  @include layers.component() {
+    --onyx-card-padding: var(--onyx-density-md);
+    --onyx-card-gap: var(--onyx-density-xs);
+
+    display: flex;
+    flex-direction: column;
+    padding: var(--onyx-card-padding);
+    gap: var(--onyx-card-gap);
+    border-radius: var(--onyx-radius-sm);
+    border: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral);
+    background-color: var(--onyx-color-base-background-blank);
+    font-family: var(--onyx-font-family);
+    color: var(--onyx-color-text-icons-neutral-intense);
+    max-width: 100%;
+
+    &:is(button) {
+      cursor: pointer;
+      text-align: initial;
+
+      &:focus-visible {
+        border-color: var(--onyx-color-component-focus-primary);
+        outline: var(--onyx-outline-width) solid var(--onyx-color-component-focus-primary);
+      }
+    }
+  }
+}
+</style>
diff --git a/packages/sit-onyx/src/components/OnyxCard/types.ts b/packages/sit-onyx/src/components/OnyxCard/types.ts
new file mode 100644
index 0000000000..2911f32e57
--- /dev/null
+++ b/packages/sit-onyx/src/components/OnyxCard/types.ts
@@ -0,0 +1,9 @@
+import type { DensityProp } from "../../composables/density";
+
+export type OnyxCardProps = DensityProp & {
+  /**
+   * Whether the whole card should be clickable (will render it as `<button>`).
+   * **Important**: If clickable, the card must not contain interactive elements like other buttons etc.
+   */
+  clickable?: boolean;
+};
diff --git a/packages/sit-onyx/src/components/examples/OnyxCard/OnyxCardExamples.stories.ts b/packages/sit-onyx/src/components/examples/OnyxCard/OnyxCardExamples.stories.ts
new file mode 100644
index 0000000000..a1275857f1
--- /dev/null
+++ b/packages/sit-onyx/src/components/examples/OnyxCard/OnyxCardExamples.stories.ts
@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { h } from "vue";
+import OnyxCard from "../../OnyxCard/OnyxCard.vue";
+import OnyxHeadline from "../../OnyxHeadline/OnyxHeadline.vue";
+
+const meta: Meta<typeof OnyxCard> = {
+  title: "Basic/Card/Examples",
+  component: OnyxCard,
+  tags: ["!autodocs"],
+  argTypes: {
+    style: { table: { disable: true } },
+    default: { control: { disable: true } },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof OnyxCard>;
+
+export const HeadlineAndText = {
+  args: {
+    style: "width: 20rem;",
+    default: [
+      h(OnyxHeadline, { is: "h2" }, "Example headline"),
+      "Lorem ipsum dolor sit amet consectetur. Id neque viverra faucibus ullamcorper dui volutpat. Vel nec aliquet lorem turpis eu dui. At pellentesque senectus sed volutpat vitae nulla. Nisl cursus dignissim sed eget neque tristique interdum pretium elit.",
+    ],
+  },
+} satisfies Story;
+
+export const ImageCard = {
+  args: {
+    style: "width: 20rem;",
+    default: [
+      h("img", {
+        src: "https://picsum.photos/256/128",
+        alt: "Example image",
+        style:
+          "border-radius: var(--onyx-radius-sm); margin-bottom: var(--onyx-card-gap); background-color: var(--onyx-color-base-neutral-200)",
+        height: 128,
+      }),
+      h(OnyxHeadline, { is: "h2" }, "Example headline"),
+      "Lorem ipsum dolor sit amet consectetur. Id neque viverra faucibus ullamcorper dui volutpat. Vel nec aliquet lorem turpis eu dui. At pellentesque senectus sed volutpat vitae nulla. Nisl cursus dignissim sed eget neque tristique interdum pretium elit.",
+    ],
+  },
+} satisfies Story;
diff --git a/packages/sit-onyx/src/index.ts b/packages/sit-onyx/src/index.ts
index dcf7a42cf2..1d5a1140ee 100644
--- a/packages/sit-onyx/src/index.ts
+++ b/packages/sit-onyx/src/index.ts
@@ -22,6 +22,9 @@ export * from "./components/OnyxBottomBar/types";
 export { default as OnyxButton } from "./components/OnyxButton/OnyxButton.vue";
 export * from "./components/OnyxButton/types";
 
+export { default as OnyxCard } from "./components/OnyxCard/OnyxCard.vue";
+export * from "./components/OnyxCard/types";
+
 export { default as OnyxCheckbox } from "./components/OnyxCheckbox/OnyxCheckbox.vue";
 export * from "./components/OnyxCheckbox/types";