diff --git a/docs/src/components/views/Card/DisabledDoc.vue b/docs/src/components/views/Card/DisabledDoc.vue
new file mode 100644
index 0000000..94a97d0
--- /dev/null
+++ b/docs/src/components/views/Card/DisabledDoc.vue
@@ -0,0 +1,50 @@
+<template>
+  <DocSection label="Disabled" :code="code">
+    <template #description>
+      A card may show its content is disabled
+    </template>
+    <template #example>
+      <Card disabled>
+        <CardContent header="Kristy">
+          <template #meta>
+            <span class="date">Joined in 2013</span>
+          </template>
+          <template #description>
+            Kristy is an art director living in New York.
+          </template>
+        </CardContent>
+        <CardContent extra>
+          <Icon name="user" />
+          22 Friends
+        </CardContent>
+      </Card>
+    </template>
+  </DocSection>
+</template>
+
+<script setup lang="ts">
+import DocSection from '@/components/doc/DocSection.vue'
+
+import {
+  Card,
+  CardContent,
+  Icon,
+} from 'vue-fomantic-ui'
+
+const code = `<template>
+  <Card disabled>
+    <CardContent header="Kristy">
+      <template #meta>
+        <span class="date">Joined in 2013</span>
+      </template>
+      <template #description>
+        Kristy is an art director living in New York.
+      </template>
+    </CardContent>
+    <CardContent extra>
+      <Icon name="user" />
+      22 Friends
+    </CardContent>
+  </Card>
+<\/template>`
+</script>
diff --git a/docs/src/pages/views/Card.vue b/docs/src/pages/views/Card.vue
index 2ce3537..7f8c53d 100644
--- a/docs/src/pages/views/Card.vue
+++ b/docs/src/pages/views/Card.vue
@@ -23,6 +23,7 @@ import DescriptionDoc from '@/components/views/Card/DescriptionDoc.vue'
 import ExtraContentDoc from '@/components/views/Card/ExtraContentDoc.vue'
 
 // States
+import DisabledDoc from '@/components/views/Card/DisabledDoc.vue'
 
 // Variations
 import FluidCardDoc from '@/components/views/Card/FluidCardDoc.vue'
@@ -93,6 +94,12 @@ const docs = [
     category: 'Content',
     component: ExtraContentDoc,
   },
+  {
+    id: 'disabled',
+    label: 'Disabled',
+    category: 'States',
+    component: DisabledDoc,
+  },
   {
     id: 'fluid-card',
     label: 'Fluid Card',