diff --git a/examples/components/my-card/css/my-card.css b/examples/components/my-card/css/my-card.css
new file mode 100644
index 0000000000000000000000000000000000000000..2af872873d9ce43c25ce6e0f89959acf1b612ab7
--- /dev/null
+++ b/examples/components/my-card/css/my-card.css
@@ -0,0 +1,3 @@
+.cl-component--my-card {
+  max-width: 512px;
+}
diff --git a/examples/components/my-card/metadata.json b/examples/components/my-card/metadata.json
new file mode 100644
index 0000000000000000000000000000000000000000..d67b1d14a1aea69357895cfa9f803c8dcda77248
--- /dev/null
+++ b/examples/components/my-card/metadata.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://git.drupalcode.org/project/cl_components/-/raw/1.x/src/metadata.schema.json",
+  "machineName": "my-card",
+  "name": "Card",
+  "status": "BETA",
+  "schemas": {
+    "props": {
+      "type": "object",
+      "required": [
+        "header",
+        "children"
+      ],
+      "properties": {
+        "header": {
+          "type": "string",
+          "title": "Header",
+          "description": "The card header",
+          "examples": [
+            "I am a header!"
+          ]
+        }
+      }
+    }
+  }
+}
diff --git a/examples/components/my-card/my-card.stories.yml b/examples/components/my-card/my-card.stories.yml
new file mode 100644
index 0000000000000000000000000000000000000000..c042bebf18ed72560157dfad4646e86ae70cb678
--- /dev/null
+++ b/examples/components/my-card/my-card.stories.yml
@@ -0,0 +1,6 @@
+title: Deeply/Card
+stories:
+  - name: Default
+    args:
+      header: I am a header!
+      children: Lorem ipsum, dolor sit, amet ra. Quas praesentium inventore necessitatibus et beatae accusamus veniam officiis. Quisquam ut consectetur possimus recusandae.
diff --git a/examples/components/my-card/my-card.twig b/examples/components/my-card/my-card.twig
new file mode 100644
index 0000000000000000000000000000000000000000..867783db044e78873f40297b8ddf3885e38a6b97
--- /dev/null
+++ b/examples/components/my-card/my-card.twig
@@ -0,0 +1,6 @@
+<div {{ clAttributes }}>
+  <h2>{{ header }}</h2>
+  <div class="cl-components--my-card__body">
+    {{ children }}
+  </div>
+</div>