From 52c24bed7ecc93d7191e4ecdbcd96c48e579c0c7 Mon Sep 17 00:00:00 2001
From: shteypandey28-hue <shteypandey28@gmail.com>
Date: Wed, 4 Mar 2026 22:52:24 +0530
Subject: [PATCH 1/4] [Sistent] Add Card component documentation

Signed-off-by: shteypandey28-hue <shteypandey28@gmail.com>
---
 src/components/SistentNavigation/content.js   | 381 +++++++++++++++---
 .../Projects/Sistent/components/card/code.js  | 241 +++++++++++
 .../Sistent/components/card/guidance.js       | 200 +++++++++
 .../Projects/Sistent/components/card/index.js | 149 +++++++
 .../Projects/Sistent/components/content.js    |  96 +++--
 5 files changed, 964 insertions(+), 103 deletions(-)
 create mode 100644 src/sections/Projects/Sistent/components/card/code.js
 create mode 100644 src/sections/Projects/Sistent/components/card/guidance.js
 create mode 100644 src/sections/Projects/Sistent/components/card/index.js

diff --git a/src/components/SistentNavigation/content.js b/src/components/SistentNavigation/content.js
index 5b6acd280869f..39042eeae555b 100644
--- a/src/components/SistentNavigation/content.js
+++ b/src/components/SistentNavigation/content.js
@@ -1,7 +1,11 @@
 export const content = [
   // Getting Started
   { id: 0, link: "/projects/sistent/getting-started/about", text: "About" },
-  { id: 1, link: "/projects/sistent/getting-started/installation", text: "Installation" },
+  {
+    id: 1,
+    link: "/projects/sistent/getting-started/installation",
+    text: "Installation",
+  },
   { id: 2, link: "/projects/sistent/getting-started/usage", text: "Usage" },
   { id: 3, link: "/projects/sistent/getting-started/tokens", text: "Tokens" },
 
@@ -10,31 +14,78 @@ export const content = [
   { id: 5, link: "/projects/sistent/identity/color/guidance", text: "Colors" },
   { id: 6, link: "/projects/sistent/identity/color/code", text: "Colors" },
   { id: 7, link: "/projects/sistent/identity/spacing", text: "Spacing" },
-  { id: 8, link: "/projects/sistent/identity/spacing/guidance", text: "Spacing" },
+  {
+    id: 8,
+    link: "/projects/sistent/identity/spacing/guidance",
+    text: "Spacing",
+  },
   { id: 9, link: "/projects/sistent/identity/spacing/code", text: "Spacing" },
   { id: 10, link: "/projects/sistent/identity/typography", text: "Typography" },
-  { id: 11, link: "/projects/sistent/identity/typography/guidance", text: "Typography" },
-  { id: 12, link: "/projects/sistent/identity/typography/code", text: "Typography" },
+  {
+    id: 11,
+    link: "/projects/sistent/identity/typography/guidance",
+    text: "Typography",
+  },
+  {
+    id: 12,
+    link: "/projects/sistent/identity/typography/code",
+    text: "Typography",
+  },
 
   // Components
   { id: 13, link: "/projects/sistent/components/accordion", text: "Accordion" },
-  { id: 14, link: "/projects/sistent/components/accordion/guidance", text: "Accordion" },
-  { id: 15, link: "/projects/sistent/components/accordion/code", text: "Accordion" },
+  {
+    id: 14,
+    link: "/projects/sistent/components/accordion/guidance",
+    text: "Accordion",
+  },
+  {
+    id: 15,
+    link: "/projects/sistent/components/accordion/code",
+    text: "Accordion",
+  },
 
   { id: 16, link: "/projects/sistent/components/avatar", text: "Avatar" },
-  { id: 17, link: "/projects/sistent/components/avatar/guidance", text: "Avatar" },
+  {
+    id: 17,
+    link: "/projects/sistent/components/avatar/guidance",
+    text: "Avatar",
+  },
   { id: 18, link: "/projects/sistent/components/avatar/code", text: "Avatar" },
-  { id: 19, link: "/projects/sistent/components/avatar-group", text: "Avatar Group" },
-  { id: 20, link: "/projects/sistent/components/avatar-group/guidance", text: "Avatar Group" },
-  { id: 21, link: "/projects/sistent/components/avatar-group/code", text: "Avatar Group" },
-
+  {
+    id: 19,
+    link: "/projects/sistent/components/avatar-group",
+    text: "Avatar Group",
+  },
+  {
+    id: 20,
+    link: "/projects/sistent/components/avatar-group/guidance",
+    text: "Avatar Group",
+  },
+  {
+    id: 21,
+    link: "/projects/sistent/components/avatar-group/code",
+    text: "Avatar Group",
+  },
 
   { id: 22, link: "/projects/sistent/components/backdrop", text: "Backdrop" },
-  { id: 23, link: "/projects/sistent/components/backdrop/guidance", text: "Backdrop" },
-  { id: 24, link: "/projects/sistent/components/backdrop/code", text: "Backdrop" },
+  {
+    id: 23,
+    link: "/projects/sistent/components/backdrop/guidance",
+    text: "Backdrop",
+  },
+  {
+    id: 24,
+    link: "/projects/sistent/components/backdrop/code",
+    text: "Backdrop",
+  },
 
   { id: 25, link: "/projects/sistent/components/badge", text: "Badge" },
-  { id: 26, link: "/projects/sistent/components/badge/guidance", text: "Badge" },
+  {
+    id: 26,
+    link: "/projects/sistent/components/badge/guidance",
+    text: "Badge",
+  },
   { id: 27, link: "/projects/sistent/components/badge/code", text: "Badge" },
 
   { id: 28, link: "/projects/sistent/components/box", text: "Box" },
@@ -42,55 +93,143 @@ export const content = [
   { id: 30, link: "/projects/sistent/components/box/code", text: "Box" },
 
   { id: 31, link: "/projects/sistent/components/button", text: "Button" },
-  { id: 32, link: "/projects/sistent/components/button/guidance", text: "Button" },
+  {
+    id: 32,
+    link: "/projects/sistent/components/button/guidance",
+    text: "Button",
+  },
   { id: 33, link: "/projects/sistent/components/button/code", text: "Button" },
 
-  { id: 34, link: "/projects/sistent/components/button-group", text: "Button Group" },
-  { 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: 34,
+    link: "/projects/sistent/components/button-group",
+    text: "Button Group",
+  },
+  {
+    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: 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" },
 
-  { id: 40, link: "/projects/sistent/components/circularprogress", text: "Circular Progress" },
-  { id: 41, link: "/projects/sistent/components/circularprogress/guidance", text: "Circular Progress" },
-  { id: 42, link: "/projects/sistent/components/circularprogress/code", text: "Circular Progress" },
+  {
+    id: 40,
+    link: "/projects/sistent/components/circularprogress",
+    text: "Circular Progress",
+  },
+  {
+    id: 41,
+    link: "/projects/sistent/components/circularprogress/guidance",
+    text: "Circular Progress",
+  },
+  {
+    id: 42,
+    link: "/projects/sistent/components/circularprogress/code",
+    text: "Circular Progress",
+  },
 
   { id: 43, link: "/projects/sistent/components/collapse", text: "Collapse" },
-  { id: 44, link: "/projects/sistent/components/collapse/guidance", text: "Collapse" },
-  { id: 45, link: "/projects/sistent/components/collapse/code", text: "Collapse" },
+  {
+    id: 44,
+    link: "/projects/sistent/components/collapse/guidance",
+    text: "Collapse",
+  },
+  {
+    id: 45,
+    link: "/projects/sistent/components/collapse/code",
+    text: "Collapse",
+  },
 
   { id: 46, link: "/projects/sistent/components/container", text: "Container" },
-  { id: 47, link: "/projects/sistent/components/container/guidance", text: "Container" },
-  { id: 48, link: "/projects/sistent/components/container/code", text: "Container" },
+  {
+    id: 47,
+    link: "/projects/sistent/components/container/guidance",
+    text: "Container",
+  },
+  {
+    id: 48,
+    link: "/projects/sistent/components/container/code",
+    text: "Container",
+  },
 
   { id: 49, link: "/projects/sistent/components/dialog", text: "Dialog" },
-  { id: 50, link: "/projects/sistent/components/dialog/guidance", text: "Dialog" },
+  {
+    id: 50,
+    link: "/projects/sistent/components/dialog/guidance",
+    text: "Dialog",
+  },
   { id: 51, link: "/projects/sistent/components/dialog/code", text: "Dialog" },
 
   { id: 52, link: "/projects/sistent/components/divider", text: "Divider" },
-  { id: 53, link: "/projects/sistent/components/divider/guidance", text: "Divider" },
-  { id: 54, link: "/projects/sistent/components/divider/code", text: "Divider" },
+  {
+    id: 53,
+    link: "/projects/sistent/components/divider/guidance",
+    text: "Divider",
+  },
+  {
+    id: 54,
+    link: "/projects/sistent/components/divider/code",
+    text: "Divider",
+  },
 
   { id: 55, link: "/projects/sistent/components/drawer", text: "Drawer" },
-  { id: 56, link: "/projects/sistent/components/drawer/guidance", text: "Drawer" },
+  {
+    id: 56,
+    link: "/projects/sistent/components/drawer/guidance",
+    text: "Drawer",
+  },
   { id: 57, link: "/projects/sistent/components/drawer/code", text: "Drawer" },
 
-  { id: 58, link: "/projects/sistent/components/formcontrollabel", text: "FormControlLabel" },
-  { id: 59, link: "/projects/sistent/components/formcontrollabel/guidance", text: "FormControlLabel" },
-  { id: 60, link: "/projects/sistent/components/formcontrollabel/code", text: "FormControlLabel" },
+  {
+    id: 58,
+    link: "/projects/sistent/components/formcontrollabel",
+    text: "FormControlLabel",
+  },
+  {
+    id: 59,
+    link: "/projects/sistent/components/formcontrollabel/guidance",
+    text: "FormControlLabel",
+  },
+  {
+    id: 60,
+    link: "/projects/sistent/components/formcontrollabel/code",
+    text: "FormControlLabel",
+  },
 
   { id: 61, link: "/projects/sistent/components/grid", text: "Grid" },
   { id: 62, link: "/projects/sistent/components/grid/guidance", text: "Grid" },
   { id: 63, link: "/projects/sistent/components/grid/code", text: "Grid" },
 
-  { id: 64, link: "/projects/sistent/components/iconbutton", text: "IconButton" },
-  { id: 65, link: "/projects/sistent/components/iconbutton/guidance", text: "IconButton" },
-  { id: 66, link: "/projects/sistent/components/iconbutton/code", text: "IconButton" },
+  {
+    id: 64,
+    link: "/projects/sistent/components/iconbutton",
+    text: "IconButton",
+  },
+  {
+    id: 65,
+    link: "/projects/sistent/components/iconbutton/guidance",
+    text: "IconButton",
+  },
+  {
+    id: 66,
+    link: "/projects/sistent/components/iconbutton/code",
+    text: "IconButton",
+  },
 
   { id: 67, link: "/projects/sistent/components/icons", text: "Icons" },
-  { id: 68, link: "/projects/sistent/components/icons/guidance", text: "Icons" },
+  {
+    id: 68,
+    link: "/projects/sistent/components/icons/guidance",
+    text: "Icons",
+  },
   { id: 69, link: "/projects/sistent/components/icons/code", text: "Icons" },
 
   { id: 70, link: "/projects/sistent/components/link", text: "Link" },
@@ -102,62 +241,174 @@ export const content = [
   { id: 75, link: "/projects/sistent/components/list/code", text: "List" },
 
   { id: 76, link: "/projects/sistent/components/modal", text: "Modal" },
-  { id: 77, link: "/projects/sistent/components/modal/guidance", text: "Modal" },
+  {
+    id: 77,
+    link: "/projects/sistent/components/modal/guidance",
+    text: "Modal",
+  },
   { id: 78, link: "/projects/sistent/components/modal/code", text: "Modal" },
 
-  { id: 79, link: "/projects/sistent/components/pagination", text: "Pagination" },
-  { id: 80, link: "/projects/sistent/components/pagination/guidance", text: "Pagination" },
-  { id: 81, link: "/projects/sistent/components/pagination/code", text: "Pagination" },
+  {
+    id: 79,
+    link: "/projects/sistent/components/pagination",
+    text: "Pagination",
+  },
+  {
+    id: 80,
+    link: "/projects/sistent/components/pagination/guidance",
+    text: "Pagination",
+  },
+  {
+    id: 81,
+    link: "/projects/sistent/components/pagination/code",
+    text: "Pagination",
+  },
 
   { id: 82, link: "/projects/sistent/components/paper", text: "Paper" },
-  { id: 83, link: "/projects/sistent/components/paper/guidance", text: "Paper" },
+  {
+    id: 83,
+    link: "/projects/sistent/components/paper/guidance",
+    text: "Paper",
+  },
   { id: 84, link: "/projects/sistent/components/paper/code", text: "Paper" },
 
   { id: 85, link: "/projects/sistent/components/popper", text: "Popper" },
-  { id: 86, link: "/projects/sistent/components/popper/guidance", text: "Popper" },
+  {
+    id: 86,
+    link: "/projects/sistent/components/popper/guidance",
+    text: "Popper",
+  },
   { id: 87, link: "/projects/sistent/components/popper/code", text: "Popper" },
 
-  { id: 88, link: "/projects/sistent/components/radiogroup", text: "RadioGroup" },
-  { id: 89, link: "/projects/sistent/components/radiogroup/guidance", text: "RadioGroup" },
-  { id: 90, link: "/projects/sistent/components/radiogroup/code", text: "RadioGroup" },
+  {
+    id: 88,
+    link: "/projects/sistent/components/radiogroup",
+    text: "RadioGroup",
+  },
+  {
+    id: 89,
+    link: "/projects/sistent/components/radiogroup/guidance",
+    text: "RadioGroup",
+  },
+  {
+    id: 90,
+    link: "/projects/sistent/components/radiogroup/code",
+    text: "RadioGroup",
+  },
 
   { id: 91, link: "/projects/sistent/components/select", text: "Select" },
-  { id: 92, link: "/projects/sistent/components/select/guidance", text: "Select" },
+  {
+    id: 92,
+    link: "/projects/sistent/components/select/guidance",
+    text: "Select",
+  },
   { id: 93, link: "/projects/sistent/components/select/code", text: "Select" },
 
   { id: 94, link: "/projects/sistent/components/stack", text: "Stack" },
-  { id: 95, link: "/projects/sistent/components/stack/guidance", text: "Stack" },
+  {
+    id: 95,
+    link: "/projects/sistent/components/stack/guidance",
+    text: "Stack",
+  },
   { id: 96, link: "/projects/sistent/components/stack/code", text: "Stack" },
 
   { id: 97, link: "/projects/sistent/components/stepper", text: "Stepper" },
-  { id: 98, link: "/projects/sistent/components/stepper/guidance", text: "Stepper" },
-  { id: 99, link: "/projects/sistent/components/stepper/code", text: "Stepper" },
+  {
+    id: 98,
+    link: "/projects/sistent/components/stepper/guidance",
+    text: "Stepper",
+  },
+  {
+    id: 99,
+    link: "/projects/sistent/components/stepper/code",
+    text: "Stepper",
+  },
 
   { id: 100, link: "/projects/sistent/components/switch", text: "Switch" },
-  { id: 101, link: "/projects/sistent/components/switch/guidance", text: "Switch" },
+  {
+    id: 101,
+    link: "/projects/sistent/components/switch/guidance",
+    text: "Switch",
+  },
   { id: 102, link: "/projects/sistent/components/switch/code", text: "Switch" },
 
   { id: 103, link: "/projects/sistent/components/tabs", text: "Tabs" },
   { id: 104, link: "/projects/sistent/components/tabs/guidance", text: "Tabs" },
   { id: 105, link: "/projects/sistent/components/tabs/code", text: "Tabs" },
 
-  { id: 106, link: "/projects/sistent/components/text-field", text: "Text Field" },
-  { id: 107, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" },
-  { id: 108, link: "/projects/sistent/components/text-field/code", text: "Text Field" },
-
-  { id: 109, link: "/projects/sistent/components/text-input", text: "Text Input" },
-  { id: 110, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" },
-  { id: 111, link: "/projects/sistent/components/text-input/code", text: "Text Input" },
-
-  { id: 112, link: "/projects/sistent/components/toggle-button", text: "Toggle Button" },
-  { id: 113, link: "/projects/sistent/components/toggle-button/guidance", text: "Toggle Button" },
-  { id: 114, link: "/projects/sistent/components/toggle-button/code", text: "Toggle Button" },
+  {
+    id: 106,
+    link: "/projects/sistent/components/text-field",
+    text: "Text Field",
+  },
+  {
+    id: 107,
+    link: "/projects/sistent/components/text-field/guidance",
+    text: "Text Field",
+  },
+  {
+    id: 108,
+    link: "/projects/sistent/components/text-field/code",
+    text: "Text Field",
+  },
+
+  {
+    id: 109,
+    link: "/projects/sistent/components/text-input",
+    text: "Text Input",
+  },
+  {
+    id: 110,
+    link: "/projects/sistent/components/text-input/guidance",
+    text: "Text Input",
+  },
+  {
+    id: 111,
+    link: "/projects/sistent/components/text-input/code",
+    text: "Text Input",
+  },
+
+  {
+    id: 112,
+    link: "/projects/sistent/components/toggle-button",
+    text: "Toggle Button",
+  },
+  {
+    id: 113,
+    link: "/projects/sistent/components/toggle-button/guidance",
+    text: "Toggle Button",
+  },
+  {
+    id: 114,
+    link: "/projects/sistent/components/toggle-button/code",
+    text: "Toggle Button",
+  },
 
   { id: 115, link: "/projects/sistent/components/toolbar", text: "Toolbar" },
-  { id: 116, link: "/projects/sistent/components/toolbar/guidance", text: "Toolbar" },
-  { id: 117, link: "/projects/sistent/components/toolbar/code", text: "Toolbar" },
+  {
+    id: 116,
+    link: "/projects/sistent/components/toolbar/guidance",
+    text: "Toolbar",
+  },
+  {
+    id: 117,
+    link: "/projects/sistent/components/toolbar/code",
+    text: "Toolbar",
+  },
 
   { id: 118, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
-  { id: 119, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
-  { id: 120, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },
+  {
+    id: 119,
+    link: "/projects/sistent/components/tooltip/guidance",
+    text: "Tooltip",
+  },
+  {
+    id: 120,
+    link: "/projects/sistent/components/tooltip/code",
+    text: "Tooltip",
+  },
+
+  { 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" },
 ];
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..00b13afb0df47
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/card/guidance.js
@@ -0,0 +1,200 @@
+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>
+
+          <h3>Sub-components</h3>
+          <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>
+
+          <h3>CardHeader</h3>
+          <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 $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <Card sx={{ 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>
+
+          <h3>CardContent</h3>
+          <p>
+            <code>CardContent</code> is the main body of the card. It accepts
+            any child elements and provides consistent padding.
+          </p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <Card sx={{ 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>
+
+          <h3>CardActions</h3>
+          <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 $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <Card sx={{ 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 };

From af2971abafa61285da24d6e99a31d8a324795996 Mon Sep 17 00:00:00 2001
From: shteypandey28-hue <shteypandey28@gmail.com>
Date: Thu, 5 Mar 2026 00:29:40 +0530
Subject: [PATCH 2/4] [Sistent] Fix Card guidance page alignment

Signed-off-by: shteypandey28-hue <shteypandey28@gmail.com>
---
 .../Sistent/components/card/guidance.js       | 33 ++++++++++++-------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/sections/Projects/Sistent/components/card/guidance.js b/src/sections/Projects/Sistent/components/card/guidance.js
index 00b13afb0df47..8b2e42f98bf10 100644
--- a/src/sections/Projects/Sistent/components/card/guidance.js
+++ b/src/sections/Projects/Sistent/components/card/guidance.js
@@ -75,7 +75,6 @@ const CardGuidance = () => {
           <a id="Best Practices">
             <h2>Best Practices</h2>
           </a>
-
           <h3>When to Use Cards</h3>
           <p>Cards are best suited for:</p>
           <ul>
@@ -85,7 +84,13 @@ const CardGuidance = () => {
             <li>Profile previews, product tiles, or news articles</li>
           </ul>
 
-          <h3>Sub-components</h3>
+          <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,
@@ -105,14 +110,16 @@ const CardGuidance = () => {
             </li>
           </ul>
 
-          <h3>CardHeader</h3>
+          <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 $Hcenter className="image-container">
+          <Row className="image-container">
             <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
-              <Card sx={{ maxWidth: 345 }}>
+              <Card sx={{ minWidth: 275, maxWidth: 345 }}>
                 <CardHeader
                   title="Component Guide"
                   subheader="Last updated: March 2026"
@@ -127,14 +134,16 @@ const CardGuidance = () => {
             </SistentThemeProvider>
           </Row>
 
-          <h3>CardContent</h3>
+          <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 $Hcenter className="image-container">
+          <Row className="image-container">
             <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
-              <Card sx={{ maxWidth: 345 }}>
+              <Card sx={{ minWidth: 275, maxWidth: 345 }}>
                 <CardContent>
                   <Typography variant="h6" gutterBottom>
                     CardContent Example
@@ -148,15 +157,17 @@ const CardGuidance = () => {
             </SistentThemeProvider>
           </Row>
 
-          <h3>CardActions</h3>
+          <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 $Hcenter className="image-container">
+          <Row className="image-container">
             <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
-              <Card sx={{ maxWidth: 345 }}>
+              <Card sx={{ minWidth: 275, maxWidth: 345 }}>
                 <CardContent>
                   <Typography variant="body2" color="text.secondary">
                     A card with action buttons at the bottom.

From 1b2d639e620b2c4cb2f6438cc269800c1466bbd3 Mon Sep 17 00:00:00 2001
From: shteypandey28-hue <shteypandey28@gmail.com>
Date: Fri, 6 Mar 2026 19:24:47 +0530
Subject: [PATCH 3/4] [Sistent] Fix Card navigation order in SistentNavigation

Signed-off-by: shteypandey28-hue <shteypandey28@gmail.com>
---
 src/components/SistentNavigation/content.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/SistentNavigation/content.js b/src/components/SistentNavigation/content.js
index 39042eeae555b..57435607ec464 100644
--- a/src/components/SistentNavigation/content.js
+++ b/src/components/SistentNavigation/content.js
@@ -116,6 +116,10 @@ export const content = [
     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" },
@@ -407,8 +411,4 @@ export const content = [
     link: "/projects/sistent/components/tooltip/code",
     text: "Tooltip",
   },
-
-  { 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" },
 ];

From 2339ccf2bf0521662ec40f2d1eb060327e966eb9 Mon Sep 17 00:00:00 2001
From: shteypandey28-hue <shteypandey28@gmail.com>
Date: Fri, 6 Mar 2026 22:33:51 +0530
Subject: [PATCH 4/4] [Sistent] Fix Card nav: clean formatting, correct order

Signed-off-by: shteypandey28-hue <shteypandey28@gmail.com>
---
 src/components/SistentNavigation/content.js | 377 ++++----------------
 1 file changed, 65 insertions(+), 312 deletions(-)

diff --git a/src/components/SistentNavigation/content.js b/src/components/SistentNavigation/content.js
index 57435607ec464..cf3c09940119f 100644
--- a/src/components/SistentNavigation/content.js
+++ b/src/components/SistentNavigation/content.js
@@ -1,11 +1,7 @@
 export const content = [
   // Getting Started
   { id: 0, link: "/projects/sistent/getting-started/about", text: "About" },
-  {
-    id: 1,
-    link: "/projects/sistent/getting-started/installation",
-    text: "Installation",
-  },
+  { id: 1, link: "/projects/sistent/getting-started/installation", text: "Installation" },
   { id: 2, link: "/projects/sistent/getting-started/usage", text: "Usage" },
   { id: 3, link: "/projects/sistent/getting-started/tokens", text: "Tokens" },
 
@@ -14,78 +10,31 @@ export const content = [
   { id: 5, link: "/projects/sistent/identity/color/guidance", text: "Colors" },
   { id: 6, link: "/projects/sistent/identity/color/code", text: "Colors" },
   { id: 7, link: "/projects/sistent/identity/spacing", text: "Spacing" },
-  {
-    id: 8,
-    link: "/projects/sistent/identity/spacing/guidance",
-    text: "Spacing",
-  },
+  { id: 8, link: "/projects/sistent/identity/spacing/guidance", text: "Spacing" },
   { id: 9, link: "/projects/sistent/identity/spacing/code", text: "Spacing" },
   { id: 10, link: "/projects/sistent/identity/typography", text: "Typography" },
-  {
-    id: 11,
-    link: "/projects/sistent/identity/typography/guidance",
-    text: "Typography",
-  },
-  {
-    id: 12,
-    link: "/projects/sistent/identity/typography/code",
-    text: "Typography",
-  },
+  { id: 11, link: "/projects/sistent/identity/typography/guidance", text: "Typography" },
+  { id: 12, link: "/projects/sistent/identity/typography/code", text: "Typography" },
 
   // Components
   { id: 13, link: "/projects/sistent/components/accordion", text: "Accordion" },
-  {
-    id: 14,
-    link: "/projects/sistent/components/accordion/guidance",
-    text: "Accordion",
-  },
-  {
-    id: 15,
-    link: "/projects/sistent/components/accordion/code",
-    text: "Accordion",
-  },
+  { id: 14, link: "/projects/sistent/components/accordion/guidance", text: "Accordion" },
+  { id: 15, link: "/projects/sistent/components/accordion/code", text: "Accordion" },
 
   { id: 16, link: "/projects/sistent/components/avatar", text: "Avatar" },
-  {
-    id: 17,
-    link: "/projects/sistent/components/avatar/guidance",
-    text: "Avatar",
-  },
+  { id: 17, link: "/projects/sistent/components/avatar/guidance", text: "Avatar" },
   { id: 18, link: "/projects/sistent/components/avatar/code", text: "Avatar" },
-  {
-    id: 19,
-    link: "/projects/sistent/components/avatar-group",
-    text: "Avatar Group",
-  },
-  {
-    id: 20,
-    link: "/projects/sistent/components/avatar-group/guidance",
-    text: "Avatar Group",
-  },
-  {
-    id: 21,
-    link: "/projects/sistent/components/avatar-group/code",
-    text: "Avatar Group",
-  },
+  { id: 19, link: "/projects/sistent/components/avatar-group", text: "Avatar Group" },
+  { id: 20, link: "/projects/sistent/components/avatar-group/guidance", text: "Avatar Group" },
+  { id: 21, link: "/projects/sistent/components/avatar-group/code", text: "Avatar Group" },
+
 
   { id: 22, link: "/projects/sistent/components/backdrop", text: "Backdrop" },
-  {
-    id: 23,
-    link: "/projects/sistent/components/backdrop/guidance",
-    text: "Backdrop",
-  },
-  {
-    id: 24,
-    link: "/projects/sistent/components/backdrop/code",
-    text: "Backdrop",
-  },
+  { id: 23, link: "/projects/sistent/components/backdrop/guidance", text: "Backdrop" },
+  { id: 24, link: "/projects/sistent/components/backdrop/code", text: "Backdrop" },
 
   { id: 25, link: "/projects/sistent/components/badge", text: "Badge" },
-  {
-    id: 26,
-    link: "/projects/sistent/components/badge/guidance",
-    text: "Badge",
-  },
+  { id: 26, link: "/projects/sistent/components/badge/guidance", text: "Badge" },
   { id: 27, link: "/projects/sistent/components/badge/code", text: "Badge" },
 
   { id: 28, link: "/projects/sistent/components/box", text: "Box" },
@@ -93,28 +42,12 @@ export const content = [
   { id: 30, link: "/projects/sistent/components/box/code", text: "Box" },
 
   { id: 31, link: "/projects/sistent/components/button", text: "Button" },
-  {
-    id: 32,
-    link: "/projects/sistent/components/button/guidance",
-    text: "Button",
-  },
+  { id: 32, link: "/projects/sistent/components/button/guidance", text: "Button" },
   { id: 33, link: "/projects/sistent/components/button/code", text: "Button" },
 
-  {
-    id: 34,
-    link: "/projects/sistent/components/button-group",
-    text: "Button Group",
-  },
-  {
-    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: 34, link: "/projects/sistent/components/button-group", text: "Button Group" },
+  { 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" },
@@ -124,116 +57,44 @@ export const content = [
   { id: 38, link: "/projects/sistent/components/chip/guidance", text: "Chip" },
   { id: 39, link: "/projects/sistent/components/chip/code", text: "Chip" },
 
-  {
-    id: 40,
-    link: "/projects/sistent/components/circularprogress",
-    text: "Circular Progress",
-  },
-  {
-    id: 41,
-    link: "/projects/sistent/components/circularprogress/guidance",
-    text: "Circular Progress",
-  },
-  {
-    id: 42,
-    link: "/projects/sistent/components/circularprogress/code",
-    text: "Circular Progress",
-  },
+  { id: 40, link: "/projects/sistent/components/circularprogress", text: "Circular Progress" },
+  { id: 41, link: "/projects/sistent/components/circularprogress/guidance", text: "Circular Progress" },
+  { id: 42, link: "/projects/sistent/components/circularprogress/code", text: "Circular Progress" },
 
   { id: 43, link: "/projects/sistent/components/collapse", text: "Collapse" },
-  {
-    id: 44,
-    link: "/projects/sistent/components/collapse/guidance",
-    text: "Collapse",
-  },
-  {
-    id: 45,
-    link: "/projects/sistent/components/collapse/code",
-    text: "Collapse",
-  },
+  { id: 44, link: "/projects/sistent/components/collapse/guidance", text: "Collapse" },
+  { id: 45, link: "/projects/sistent/components/collapse/code", text: "Collapse" },
 
   { id: 46, link: "/projects/sistent/components/container", text: "Container" },
-  {
-    id: 47,
-    link: "/projects/sistent/components/container/guidance",
-    text: "Container",
-  },
-  {
-    id: 48,
-    link: "/projects/sistent/components/container/code",
-    text: "Container",
-  },
+  { id: 47, link: "/projects/sistent/components/container/guidance", text: "Container" },
+  { id: 48, link: "/projects/sistent/components/container/code", text: "Container" },
 
   { id: 49, link: "/projects/sistent/components/dialog", text: "Dialog" },
-  {
-    id: 50,
-    link: "/projects/sistent/components/dialog/guidance",
-    text: "Dialog",
-  },
+  { id: 50, link: "/projects/sistent/components/dialog/guidance", text: "Dialog" },
   { id: 51, link: "/projects/sistent/components/dialog/code", text: "Dialog" },
 
   { id: 52, link: "/projects/sistent/components/divider", text: "Divider" },
-  {
-    id: 53,
-    link: "/projects/sistent/components/divider/guidance",
-    text: "Divider",
-  },
-  {
-    id: 54,
-    link: "/projects/sistent/components/divider/code",
-    text: "Divider",
-  },
+  { id: 53, link: "/projects/sistent/components/divider/guidance", text: "Divider" },
+  { id: 54, link: "/projects/sistent/components/divider/code", text: "Divider" },
 
   { id: 55, link: "/projects/sistent/components/drawer", text: "Drawer" },
-  {
-    id: 56,
-    link: "/projects/sistent/components/drawer/guidance",
-    text: "Drawer",
-  },
+  { id: 56, link: "/projects/sistent/components/drawer/guidance", text: "Drawer" },
   { id: 57, link: "/projects/sistent/components/drawer/code", text: "Drawer" },
 
-  {
-    id: 58,
-    link: "/projects/sistent/components/formcontrollabel",
-    text: "FormControlLabel",
-  },
-  {
-    id: 59,
-    link: "/projects/sistent/components/formcontrollabel/guidance",
-    text: "FormControlLabel",
-  },
-  {
-    id: 60,
-    link: "/projects/sistent/components/formcontrollabel/code",
-    text: "FormControlLabel",
-  },
+  { id: 58, link: "/projects/sistent/components/formcontrollabel", text: "FormControlLabel" },
+  { id: 59, link: "/projects/sistent/components/formcontrollabel/guidance", text: "FormControlLabel" },
+  { id: 60, link: "/projects/sistent/components/formcontrollabel/code", text: "FormControlLabel" },
 
   { id: 61, link: "/projects/sistent/components/grid", text: "Grid" },
   { id: 62, link: "/projects/sistent/components/grid/guidance", text: "Grid" },
   { id: 63, link: "/projects/sistent/components/grid/code", text: "Grid" },
 
-  {
-    id: 64,
-    link: "/projects/sistent/components/iconbutton",
-    text: "IconButton",
-  },
-  {
-    id: 65,
-    link: "/projects/sistent/components/iconbutton/guidance",
-    text: "IconButton",
-  },
-  {
-    id: 66,
-    link: "/projects/sistent/components/iconbutton/code",
-    text: "IconButton",
-  },
+  { id: 64, link: "/projects/sistent/components/iconbutton", text: "IconButton" },
+  { id: 65, link: "/projects/sistent/components/iconbutton/guidance", text: "IconButton" },
+  { id: 66, link: "/projects/sistent/components/iconbutton/code", text: "IconButton" },
 
   { id: 67, link: "/projects/sistent/components/icons", text: "Icons" },
-  {
-    id: 68,
-    link: "/projects/sistent/components/icons/guidance",
-    text: "Icons",
-  },
+  { id: 68, link: "/projects/sistent/components/icons/guidance", text: "Icons" },
   { id: 69, link: "/projects/sistent/components/icons/code", text: "Icons" },
 
   { id: 70, link: "/projects/sistent/components/link", text: "Link" },
@@ -245,170 +106,62 @@ export const content = [
   { id: 75, link: "/projects/sistent/components/list/code", text: "List" },
 
   { id: 76, link: "/projects/sistent/components/modal", text: "Modal" },
-  {
-    id: 77,
-    link: "/projects/sistent/components/modal/guidance",
-    text: "Modal",
-  },
+  { id: 77, link: "/projects/sistent/components/modal/guidance", text: "Modal" },
   { id: 78, link: "/projects/sistent/components/modal/code", text: "Modal" },
 
-  {
-    id: 79,
-    link: "/projects/sistent/components/pagination",
-    text: "Pagination",
-  },
-  {
-    id: 80,
-    link: "/projects/sistent/components/pagination/guidance",
-    text: "Pagination",
-  },
-  {
-    id: 81,
-    link: "/projects/sistent/components/pagination/code",
-    text: "Pagination",
-  },
+  { id: 79, link: "/projects/sistent/components/pagination", text: "Pagination" },
+  { id: 80, link: "/projects/sistent/components/pagination/guidance", text: "Pagination" },
+  { id: 81, link: "/projects/sistent/components/pagination/code", text: "Pagination" },
 
   { id: 82, link: "/projects/sistent/components/paper", text: "Paper" },
-  {
-    id: 83,
-    link: "/projects/sistent/components/paper/guidance",
-    text: "Paper",
-  },
+  { id: 83, link: "/projects/sistent/components/paper/guidance", text: "Paper" },
   { id: 84, link: "/projects/sistent/components/paper/code", text: "Paper" },
 
   { id: 85, link: "/projects/sistent/components/popper", text: "Popper" },
-  {
-    id: 86,
-    link: "/projects/sistent/components/popper/guidance",
-    text: "Popper",
-  },
+  { id: 86, link: "/projects/sistent/components/popper/guidance", text: "Popper" },
   { id: 87, link: "/projects/sistent/components/popper/code", text: "Popper" },
 
-  {
-    id: 88,
-    link: "/projects/sistent/components/radiogroup",
-    text: "RadioGroup",
-  },
-  {
-    id: 89,
-    link: "/projects/sistent/components/radiogroup/guidance",
-    text: "RadioGroup",
-  },
-  {
-    id: 90,
-    link: "/projects/sistent/components/radiogroup/code",
-    text: "RadioGroup",
-  },
+  { id: 88, link: "/projects/sistent/components/radiogroup", text: "RadioGroup" },
+  { id: 89, link: "/projects/sistent/components/radiogroup/guidance", text: "RadioGroup" },
+  { id: 90, link: "/projects/sistent/components/radiogroup/code", text: "RadioGroup" },
 
   { id: 91, link: "/projects/sistent/components/select", text: "Select" },
-  {
-    id: 92,
-    link: "/projects/sistent/components/select/guidance",
-    text: "Select",
-  },
+  { id: 92, link: "/projects/sistent/components/select/guidance", text: "Select" },
   { id: 93, link: "/projects/sistent/components/select/code", text: "Select" },
 
   { id: 94, link: "/projects/sistent/components/stack", text: "Stack" },
-  {
-    id: 95,
-    link: "/projects/sistent/components/stack/guidance",
-    text: "Stack",
-  },
+  { id: 95, link: "/projects/sistent/components/stack/guidance", text: "Stack" },
   { id: 96, link: "/projects/sistent/components/stack/code", text: "Stack" },
 
   { id: 97, link: "/projects/sistent/components/stepper", text: "Stepper" },
-  {
-    id: 98,
-    link: "/projects/sistent/components/stepper/guidance",
-    text: "Stepper",
-  },
-  {
-    id: 99,
-    link: "/projects/sistent/components/stepper/code",
-    text: "Stepper",
-  },
+  { id: 98, link: "/projects/sistent/components/stepper/guidance", text: "Stepper" },
+  { id: 99, link: "/projects/sistent/components/stepper/code", text: "Stepper" },
 
   { id: 100, link: "/projects/sistent/components/switch", text: "Switch" },
-  {
-    id: 101,
-    link: "/projects/sistent/components/switch/guidance",
-    text: "Switch",
-  },
+  { id: 101, link: "/projects/sistent/components/switch/guidance", text: "Switch" },
   { id: 102, link: "/projects/sistent/components/switch/code", text: "Switch" },
 
   { id: 103, link: "/projects/sistent/components/tabs", text: "Tabs" },
   { id: 104, link: "/projects/sistent/components/tabs/guidance", text: "Tabs" },
   { id: 105, link: "/projects/sistent/components/tabs/code", text: "Tabs" },
 
-  {
-    id: 106,
-    link: "/projects/sistent/components/text-field",
-    text: "Text Field",
-  },
-  {
-    id: 107,
-    link: "/projects/sistent/components/text-field/guidance",
-    text: "Text Field",
-  },
-  {
-    id: 108,
-    link: "/projects/sistent/components/text-field/code",
-    text: "Text Field",
-  },
-
-  {
-    id: 109,
-    link: "/projects/sistent/components/text-input",
-    text: "Text Input",
-  },
-  {
-    id: 110,
-    link: "/projects/sistent/components/text-input/guidance",
-    text: "Text Input",
-  },
-  {
-    id: 111,
-    link: "/projects/sistent/components/text-input/code",
-    text: "Text Input",
-  },
-
-  {
-    id: 112,
-    link: "/projects/sistent/components/toggle-button",
-    text: "Toggle Button",
-  },
-  {
-    id: 113,
-    link: "/projects/sistent/components/toggle-button/guidance",
-    text: "Toggle Button",
-  },
-  {
-    id: 114,
-    link: "/projects/sistent/components/toggle-button/code",
-    text: "Toggle Button",
-  },
+  { id: 106, link: "/projects/sistent/components/text-field", text: "Text Field" },
+  { id: 107, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" },
+  { id: 108, link: "/projects/sistent/components/text-field/code", text: "Text Field" },
+
+  { id: 109, link: "/projects/sistent/components/text-input", text: "Text Input" },
+  { id: 110, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" },
+  { id: 111, link: "/projects/sistent/components/text-input/code", text: "Text Input" },
+
+  { id: 112, link: "/projects/sistent/components/toggle-button", text: "Toggle Button" },
+  { id: 113, link: "/projects/sistent/components/toggle-button/guidance", text: "Toggle Button" },
+  { id: 114, link: "/projects/sistent/components/toggle-button/code", text: "Toggle Button" },
 
   { id: 115, link: "/projects/sistent/components/toolbar", text: "Toolbar" },
-  {
-    id: 116,
-    link: "/projects/sistent/components/toolbar/guidance",
-    text: "Toolbar",
-  },
-  {
-    id: 117,
-    link: "/projects/sistent/components/toolbar/code",
-    text: "Toolbar",
-  },
+  { id: 116, link: "/projects/sistent/components/toolbar/guidance", text: "Toolbar" },
+  { id: 117, link: "/projects/sistent/components/toolbar/code", text: "Toolbar" },
 
   { id: 118, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
-  {
-    id: 119,
-    link: "/projects/sistent/components/tooltip/guidance",
-    text: "Tooltip",
-  },
-  {
-    id: 120,
-    link: "/projects/sistent/components/tooltip/code",
-    text: "Tooltip",
-  },
+  { id: 119, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
+  { id: 120, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },
 ];