From 74dded767691ac4cb30734078996c45fb05f8a12 Mon Sep 17 00:00:00 2001
From: JesmoDev <26099018+JesmoDev@users.noreply.github.com>
Date: Fri, 23 Aug 2024 12:48:43 +0200
Subject: [PATCH] uui card wip

---
 packages/uui-card/lib/uui-card.stories.ts | 29 +++++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 packages/uui-card/lib/uui-card.stories.ts

diff --git a/packages/uui-card/lib/uui-card.stories.ts b/packages/uui-card/lib/uui-card.stories.ts
new file mode 100644
index 000000000..e7ace7157
--- /dev/null
+++ b/packages/uui-card/lib/uui-card.stories.ts
@@ -0,0 +1,29 @@
+import '.';
+import { html } from 'lit';
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { spread } from '../../../storyhelpers/spread-directive';
+
+const meta: Meta = {
+  id: 'uui-card',
+  component: 'uui-card',
+  title: 'Displays/Cards/Card',
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Card is a Component that provides the basics for a Card component. This can be extended in code to match a certain need.
+ */
+export const Default: Story = {
+  render: args => html`
+    <uui-card ${spread(args)} selectable>
+      <div>
+        <p>
+          This is an example of a simple card. It can be used to display
+          information in a structured way.
+        </p>
+      </div>
+    </uui-card>
+  `,
+};