diff --git a/src/components/SistentNavigation/content.js b/src/components/SistentNavigation/content.js
index 5b6acd280869f..cf3c09940119f 100644
--- a/src/components/SistentNavigation/content.js
+++ b/src/components/SistentNavigation/content.js
@@ -49,6 +49,10 @@ export const content = [
   { id: 35, link: "/projects/sistent/components/button-group/guidance", text: "Button Group" },
   { id: 36, link: "/projects/sistent/components/button-group/code", text: "Button Group" },
 
+  { id: 121, link: "/projects/sistent/components/card", text: "Card" },
+  { id: 122, link: "/projects/sistent/components/card/guidance", text: "Card" },
+  { id: 123, link: "/projects/sistent/components/card/code", text: "Card" },
+
   { id: 37, link: "/projects/sistent/components/chip", text: "Chip" },
   { id: 38, link: "/projects/sistent/components/chip/guidance", text: "Chip" },
   { id: 39, link: "/projects/sistent/components/chip/code", text: "Chip" },
diff --git a/src/sections/Projects/Sistent/components/card/code.js b/src/sections/Projects/Sistent/components/card/code.js
new file mode 100644
index 0000000000000..a6defe0e326bd
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/card/code.js
@@ -0,0 +1,241 @@
+import React from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+
+import {
+  SistentThemeProvider,
+  Card,
+  CardHeader,
+  CardContent,
+  CardActions,
+  Button,
+  Typography,
+} from "@sistent/sistent";
+import { CodeBlock } from "../button/code-block";
+import { SistentLayout } from "../../sistent-layout";
+
+import TabButton from "../../../../../reusecore/Button";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
+
+const codes = [
+  `<SistentThemeProvider>
+  <Card sx={{ maxWidth: 345 }}>
+    <CardContent>
+      <Typography variant="h5" component="div">
+        Basic Card
+      </Typography>
+      <Typography variant="body2" color="text.secondary">
+        This is a simple card with only content inside it.
+      </Typography>
+    </CardContent>
+  </Card>
+</SistentThemeProvider>`,
+  `<SistentThemeProvider>
+  <Card sx={{ maxWidth: 345 }}>
+    <CardHeader
+      title="Card Title"
+      subheader="Card Subheader"
+    />
+    <CardContent>
+      <Typography variant="body2" color="text.secondary">
+        This card includes a header with a title and subheader,
+        followed by descriptive body content.
+      </Typography>
+    </CardContent>
+  </Card>
+</SistentThemeProvider>`,
+  `<SistentThemeProvider>
+  <Card sx={{ maxWidth: 345 }}>
+    <CardMedia
+      component="img"
+      height="140"
+      image="https://source.unsplash.com/random/345x140"
+      alt="Card media"
+    />
+    <CardContent>
+      <Typography variant="h5" component="div">
+        Card with Media
+      </Typography>
+      <Typography variant="body2" color="text.secondary">
+        This card uses CardMedia to display an image at the top.
+      </Typography>
+    </CardContent>
+  </Card>
+</SistentThemeProvider>`,
+  `<SistentThemeProvider>
+  <Card sx={{ maxWidth: 345 }}>
+    <CardContent>
+      <Typography variant="h5" component="div">
+        Card with Actions
+      </Typography>
+      <Typography variant="body2" color="text.secondary">
+        Cards can include action buttons at the bottom for user interaction.
+      </Typography>
+    </CardContent>
+    <CardActions>
+      <Button size="small">Learn More</Button>
+      <Button size="small">Share</Button>
+    </CardActions>
+  </Card>
+</SistentThemeProvider>`,
+];
+
+const CardCode = () => {
+  const location = useLocation();
+  const { isDark } = useStyledDarkMode();
+
+  return (
+    <SistentLayout title="Card">
+      <div className="content">
+        <a id="Identity">
+          <h2>Card</h2>
+        </a>
+        <p>
+          The <code>Card</code> component is a surface that displays content and
+          actions on a single topic. Cards are composed of sub-components such
+          as <code>CardHeader</code>, <code>CardContent</code>,{" "}
+          <code>CardActions</code>, and <code>CardMedia</code>, which can be
+          combined to create a variety of layouts.
+        </p>
+        <div className="filterBtns">
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/card"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/card")}
+            title="Overview"
+          />
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/card/guidance"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/card/guidance")
+            }
+            title="Guidance"
+          />
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/card/code"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/card/code")}
+            title="Code"
+          />
+        </div>
+        <div className="main-content">
+          <p>
+            The following examples demonstrate the different ways to use the{" "}
+            <code>Card</code> component and its sub-components.
+          </p>
+          <a id="Basic Card">
+            <h2>Basic Card</h2>
+          </a>
+          <p>
+            A minimal card with only <code>CardContent</code> displaying a title
+            and description.
+          </p>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <Card sx={{ maxWidth: 345 }}>
+                  <CardContent>
+                    <Typography variant="h5" component="div">
+                      Basic Card
+                    </Typography>
+                    <Typography variant="body2" color="text.secondary">
+                      This is a simple card with only content inside it.
+                    </Typography>
+                  </CardContent>
+                </Card>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="card-basic" code={codes[0]} />
+          </div>
+          <a id="Card with Header and Content">
+            <h2>Card with Header and Content</h2>
+          </a>
+          <p>
+            Combining <code>CardHeader</code> and <code>CardContent</code> to
+            present a titled card with body text.
+          </p>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <Card sx={{ maxWidth: 345 }}>
+                  <CardHeader title="Card Title" subheader="Card Subheader" />
+                  <CardContent>
+                    <Typography variant="body2" color="text.secondary">
+                      This card includes a header with a title and subheader,
+                      followed by descriptive body content.
+                    </Typography>
+                  </CardContent>
+                </Card>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="card-header-content" code={codes[1]} />
+          </div>
+          <a id="Card with Media">
+            <h2>Card with Media</h2>
+          </a>
+          <p>
+            Use <code>CardMedia</code> to embed an image within the card.
+          </p>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <Card sx={{ maxWidth: 345 }}>
+                  <CardContent>
+                    <Typography variant="h5" component="div">
+                      Card with Media
+                    </Typography>
+                    <Typography variant="body2" color="text.secondary">
+                      This card uses CardMedia to display an image at the top.
+                    </Typography>
+                  </CardContent>
+                </Card>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="card-media" code={codes[2]} />
+          </div>
+          <a id="Card with Actions">
+            <h2>Card with Actions</h2>
+          </a>
+          <p>
+            Use <code>CardActions</code> to place interactive buttons at the
+            bottom of the card.
+          </p>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <Card sx={{ maxWidth: 345 }}>
+                  <CardContent>
+                    <Typography variant="h5" component="div">
+                      Card with Actions
+                    </Typography>
+                    <Typography variant="body2" color="text.secondary">
+                      Cards can include action buttons at the bottom for user
+                      interaction.
+                    </Typography>
+                  </CardContent>
+                  <CardActions>
+                    <Button size="small">Learn More</Button>
+                    <Button size="small">Share</Button>
+                  </CardActions>
+                </Card>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="card-actions" code={codes[3]} />
+          </div>
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};
+
+export default CardCode;
diff --git a/src/sections/Projects/Sistent/components/card/guidance.js b/src/sections/Projects/Sistent/components/card/guidance.js
new file mode 100644
index 0000000000000..8b2e42f98bf10
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/card/guidance.js
@@ -0,0 +1,211 @@
+import React from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+import { Row } from "../../../../../reusecore/Layout";
+import {
+  SistentThemeProvider,
+  Card,
+  CardHeader,
+  CardContent,
+  CardActions,
+  Button,
+  Typography,
+} from "@sistent/sistent";
+import { SistentLayout } from "../../sistent-layout";
+
+import TabButton from "../../../../../reusecore/Button";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
+
+const CardGuidance = () => {
+  const location = useLocation();
+  const { isDark } = useStyledDarkMode();
+
+  return (
+    <SistentLayout title="Card">
+      <div className="content">
+        <a id="Identity">
+          <h2>Card</h2>
+        </a>
+        <p>
+          The <code>Card</code> component is a surface that displays content and
+          actions on a single topic. Cards are composed of sub-components such
+          as <code>CardHeader</code>, <code>CardContent</code>,{" "}
+          <code>CardActions</code>, and <code>CardMedia</code>, which can be
+          combined to create a variety of layouts.
+        </p>
+        <div className="filterBtns">
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/card"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/card")}
+            title="Overview"
+          />
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/card/guidance"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/card/guidance")
+            }
+            title="Guidance"
+          />
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/card/code"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/card/code")}
+            title="Code"
+          />
+        </div>
+
+        <div className="main-content">
+          <p>
+            Cards provide a structured and visually distinct container for
+            related information. They are ideal for presenting items such as
+            user profiles, product listings, blog posts, or settings panels.
+          </p>
+
+          <a id="Best Practices">
+            <h2>Best Practices</h2>
+          </a>
+          <h3>When to Use Cards</h3>
+          <p>Cards are best suited for:</p>
+          <ul>
+            <li>Displaying a collection of similar items in a grid or list</li>
+            <li>Presenting a summary with an option to view more details</li>
+            <li>Grouping related content and actions together</li>
+            <li>Profile previews, product tiles, or news articles</li>
+          </ul>
+
+          <a id="Sub-components">
+            <h2>Sub-components</h2>
+          </a>
+          <p>
+            The Card component is composed of the following sub-components that
+            can be combined to build flexible layouts:
+          </p>
+          <ul>
+            <li>
+              <strong>CardHeader</strong>: Renders a title, optional subheader,
+              and an optional avatar or action icon at the top of the card.
+            </li>
+            <li>
+              <strong>CardContent</strong>: The primary content area. Use it to
+              place text, descriptions, and other information.
+            </li>
+            <li>
+              <strong>CardActions</strong>: A dedicated area for buttons and
+              interactive controls, placed at the bottom of the card.
+            </li>
+            <li>
+              <strong>CardMedia</strong>: Embeds an image or other media at the
+              top or within the card.
+            </li>
+          </ul>
+
+          <a id="CardHeader">
+            <h3>CardHeader</h3>
+          </a>
+          <p>
+            Use <code>CardHeader</code> when the card needs a clearly labeled
+            title and optional metadata such as a date or author name.
+          </p>
+          <Row className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <Card sx={{ minWidth: 275, maxWidth: 345 }}>
+                <CardHeader
+                  title="Component Guide"
+                  subheader="Last updated: March 2026"
+                />
+                <CardContent>
+                  <Typography variant="body2" color="text.secondary">
+                    This card demonstrates the CardHeader sub-component with a
+                    title and subheader.
+                  </Typography>
+                </CardContent>
+              </Card>
+            </SistentThemeProvider>
+          </Row>
+
+          <a id="CardContent">
+            <h3>CardContent</h3>
+          </a>
+          <p>
+            <code>CardContent</code> is the main body of the card. It accepts
+            any child elements and provides consistent padding.
+          </p>
+          <Row className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <Card sx={{ minWidth: 275, maxWidth: 345 }}>
+                <CardContent>
+                  <Typography variant="h6" gutterBottom>
+                    CardContent Example
+                  </Typography>
+                  <Typography variant="body2" color="text.secondary">
+                    Use CardContent to wrap descriptive text, lists, or any
+                    other content that belongs inside the card.
+                  </Typography>
+                </CardContent>
+              </Card>
+            </SistentThemeProvider>
+          </Row>
+
+          <a id="CardActions">
+            <h3>CardActions</h3>
+          </a>
+          <p>
+            <code>CardActions</code> anchors interactive elements like buttons
+            to the bottom of the card. Use <code>disableSpacing</code> for
+            manual spacing control.
+          </p>
+          <Row className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <Card sx={{ minWidth: 275, maxWidth: 345 }}>
+                <CardContent>
+                  <Typography variant="body2" color="text.secondary">
+                    A card with action buttons at the bottom.
+                  </Typography>
+                </CardContent>
+                <CardActions>
+                  <Button size="small" variant="contained">
+                    Accept
+                  </Button>
+                  <Button size="small" variant="outlined">
+                    Decline
+                  </Button>
+                </CardActions>
+              </Card>
+            </SistentThemeProvider>
+          </Row>
+
+          <a id="Accessibility">
+            <h2>Accessibility</h2>
+          </a>
+          <ul>
+            <li>
+              Ensure card headings use semantic HTML (e.g., <code>h2</code>,{" "}
+              <code>h3</code>) for screen reader compatibility.
+            </li>
+            <li>
+              Interactive elements inside cards must be keyboard-focusable and
+              have descriptive labels.
+            </li>
+            <li>
+              Avoid placing too many actions inside a single card to reduce
+              cognitive load.
+            </li>
+          </ul>
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};
+
+export default CardGuidance;
diff --git a/src/sections/Projects/Sistent/components/card/index.js b/src/sections/Projects/Sistent/components/card/index.js
new file mode 100644
index 0000000000000..b803abafc4115
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/card/index.js
@@ -0,0 +1,149 @@
+import React from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+
+import {
+  SistentThemeProvider,
+  Card,
+  CardHeader,
+  CardContent,
+  CardActions,
+  Button,
+  Typography,
+} from "@sistent/sistent";
+import TabButton from "../../../../../reusecore/Button";
+import { SistentLayout } from "../../sistent-layout";
+import { Row } from "../../../../../reusecore/Layout";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
+
+const SistentCard = () => {
+  const location = useLocation();
+  const { isDark } = useStyledDarkMode();
+
+  return (
+    <SistentLayout title="Card">
+      <div className="content">
+        <a id="Identity">
+          <h2>Card</h2>
+        </a>
+        <p>
+          The <code>Card</code> component is a surface that displays content and
+          actions on a single topic. Cards are composed of sub-components such
+          as <code>CardHeader</code>, <code>CardContent</code>,{" "}
+          <code>CardActions</code>, and <code>CardMedia</code>, which can be
+          combined to create a variety of layouts.
+        </p>
+        <div className="filterBtns">
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/card"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/card")}
+            title="Overview"
+          />
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/card/guidance"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/card/guidance")
+            }
+            title="Guidance"
+          />
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/card/code"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/card/code")}
+            title="Code"
+          />
+        </div>
+        <div className="main-content">
+          <p>
+            Cards are used to group related information in a flexible container.
+            They support rich media, headers, body text, and action buttons.
+          </p>
+          <a id="Usage">
+            <h2>Usage</h2>
+          </a>
+          <h3>Basic Card</h3>
+          <p>
+            A basic <code>Card</code> wraps content in an elevated surface with
+            shadow and rounded corners.
+          </p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <Card sx={{ maxWidth: 345 }}>
+                <CardContent>
+                  <Typography variant="h5" component="div">
+                    Basic Card
+                  </Typography>
+                  <Typography variant="body2" color="text.secondary">
+                    This is a simple card with only content inside it.
+                  </Typography>
+                </CardContent>
+              </Card>
+            </SistentThemeProvider>
+          </Row>
+
+          <h3>Card with Header and Content</h3>
+          <p>
+            Use <code>CardHeader</code> to add a title and subheader above the
+            card content.
+          </p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <Card sx={{ maxWidth: 345 }}>
+                <CardHeader title="Card Title" subheader="Card Subheader" />
+                <CardContent>
+                  <Typography variant="body2" color="text.secondary">
+                    This card includes a header with a title and subheader,
+                    followed by descriptive body content.
+                  </Typography>
+                </CardContent>
+              </Card>
+            </SistentThemeProvider>
+          </Row>
+
+          <a id="Customization">
+            <h2>Customization</h2>
+          </a>
+          <p>
+            Cards can be customized with actions using <code>CardActions</code>,
+            which places buttons or other interactive elements at the bottom of
+            the card.
+          </p>
+
+          <h3>Card with Actions</h3>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <Card sx={{ maxWidth: 345 }}>
+                <CardContent>
+                  <Typography variant="h5" component="div">
+                    Card with Actions
+                  </Typography>
+                  <Typography variant="body2" color="text.secondary">
+                    Cards can include action buttons at the bottom for user
+                    interaction.
+                  </Typography>
+                </CardContent>
+                <CardActions>
+                  <Button size="small">Learn More</Button>
+                  <Button size="small">Share</Button>
+                </CardActions>
+              </Card>
+            </SistentThemeProvider>
+          </Row>
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};
+
+export default SistentCard;
diff --git a/src/sections/Projects/Sistent/components/content.js b/src/sections/Projects/Sistent/components/content.js
index 7bea8ebf1ab0c..3b78a2ab3f393 100644
--- a/src/sections/Projects/Sistent/components/content.js
+++ b/src/sections/Projects/Sistent/components/content.js
@@ -154,14 +154,16 @@ const componentsData = [
   {
     id: 20,
     name: "Switch",
-    description: "The Switch component allows users to toggle the state of a single setting on or off.",
+    description:
+      "The Switch component allows users to toggle the state of a single setting on or off.",
     url: "/projects/sistent/components/switch",
-    src: "/switch"
+    src: "/switch",
   },
   {
     id: 21,
     name: "Tabs",
-    description: "Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.",
+    description:
+      "Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.",
     url: "/projects/sistent/components/tabs",
     src: "/tabs",
   },
@@ -184,7 +186,8 @@ const componentsData = [
   {
     id: 24,
     name: "Badge",
-    description: "A badge is a small component that displays a number or status indicator, often used to show notifications or messages.",
+    description:
+      "A badge is a small component that displays a number or status indicator, often used to show notifications or messages.",
     url: "/projects/sistent/components/badge",
     src: "/badge",
   },
@@ -197,72 +200,81 @@ const componentsData = [
     src: "/toolbar",
   },
   {
-    "id": 26,
-    "name": "RadioGroup",
-    "description": "Sistent offers a well-structured RadioGroup component that allows users to select one option from a set.",
-    "url": "/projects/sistent/components/radiogroup",
-    "src": "/radiogroup"
+    id: 26,
+    name: "RadioGroup",
+    description:
+      "Sistent offers a well-structured RadioGroup component that allows users to select one option from a set.",
+    url: "/projects/sistent/components/radiogroup",
+    src: "/radiogroup",
   },
   {
-    "id": 27,
-    "name": "Grid",
-    "description": "The Grid component in Sistent provides a flexible and responsive layout system for arranging content in rows and columns.",
-    "url": "/projects/sistent/components/grid",
-    "src": "/grid"
+    id: 27,
+    name: "Grid",
+    description:
+      "The Grid component in Sistent provides a flexible and responsive layout system for arranging content in rows and columns.",
+    url: "/projects/sistent/components/grid",
+    src: "/grid",
   },
   {
-    "id": 28,
-    "name": "List",
-    "description": "Lists are essential UI elements that allow items to be organized sequentially in a structured and readable way. They help users view, select, and interact with multiple items conveniently.",
-    "url": "/projects/sistent/components/list",
-    "src": "/list",
+    id: 28,
+    name: "List",
+    description:
+      "Lists are essential UI elements that allow items to be organized sequentially in a structured and readable way. They help users view, select, and interact with multiple items conveniently.",
+    url: "/projects/sistent/components/list",
+    src: "/list",
   },
   {
-    "id": 29,
-    "name": "Chip",
-    "description": "Chips are compact elements that represent an input, attribute, or action. They are often used for tags, contacts, or filters.",
-    "url": "/projects/sistent/components/chip",
-    "src": "/chip",
+    id: 29,
+    name: "Chip",
+    description:
+      "Chips are compact elements that represent an input, attribute, or action. They are often used for tags, contacts, or filters.",
+    url: "/projects/sistent/components/chip",
+    src: "/chip",
   },
   {
-    "id": 30,
-    "name": "Collapse",
-    "description": "The Collapse component is used to create expandable/collapsible content sections. It smoothly animates the height of its children from zero to full height when expanded.",
-    "url": "/projects/sistent/components/collapse",
-    "src": "/collapse",
+    id: 30,
+    name: "Collapse",
+    description:
+      "The Collapse component is used to create expandable/collapsible content sections. It smoothly animates the height of its children from zero to full height when expanded.",
+    url: "/projects/sistent/components/collapse",
+    src: "/collapse",
   },
   {
-    "id": 31,
-    "name": "FormControlLabel",
-    "description": "A control + label pair used for checkboxes or radio buttons.",
-    "url": "/projects/sistent/components/formcontrollabel",
-    "src": "/formcontrollabel",
+    id: 31,
+    name: "FormControlLabel",
+    description: "A control + label pair used for checkboxes or radio buttons.",
+    url: "/projects/sistent/components/formcontrollabel",
+    src: "/formcontrollabel",
   },
   {
     id: 32,
     name: "IconButton",
-    description: "IconButton provides an interactive button component that displays only an icon, ideal for compact UIs where space is limited and actions are easily recognizable through iconography.",
+    description:
+      "IconButton provides an interactive button component that displays only an icon, ideal for compact UIs where space is limited and actions are easily recognizable through iconography.",
     url: "/projects/sistent/components/iconbutton",
     src: "/iconbutton",
   },
   {
     id: 33,
     name: "Stepper",
-    description: "Stepper provides a way to display progress through a sequence of logical steps.",
+    description:
+      "Stepper provides a way to display progress through a sequence of logical steps.",
     url: "/projects/sistent/components/stepper",
     src: "/stepper",
   },
   {
     id: 34,
     name: "Stack",
-    description: "Stack is a layout component that arranges elements in a one-dimensional flow with customizable spacing and direction.",
+    description:
+      "Stack is a layout component that arranges elements in a one-dimensional flow with customizable spacing and direction.",
     url: "/projects/sistent/components/stack",
     src: "/stack",
   },
   {
     id: 35,
     name: "Accordion",
-    description: "An accordion is a vertically stacked list of headers that can be clicked to reveal or hide associated content, allowing users to toggle between hiding and showing large amounts of content in a compact space.",
+    description:
+      "An accordion is a vertically stacked list of headers that can be clicked to reveal or hide associated content, allowing users to toggle between hiding and showing large amounts of content in a compact space.",
     url: "/projects/sistent/components/accordion",
     src: "/accordion",
   },
@@ -274,6 +286,14 @@ const componentsData = [
     url: "/projects/sistent/components/divider",
     src: "/divider",
   },
+  {
+    id: 37,
+    name: "Card",
+    description:
+      "Cards are surfaces that display content and actions on a single topic.",
+    url: "/projects/sistent/components/card",
+    src: "/card",
+  },
 ];
 
 module.exports = { componentsData };