dxc-technology · GomezIvann · Apr 11, 2025 · Feb 3, 2025 · Feb 24, 2025 · Feb 24, 2025
diff --git a/apps/website/pages/components/card/code.tsx b/apps/website/pages/components/card/code.tsx
@@ -0,0 +1,17 @@
+import Head from "next/head";
+import type { ReactElement } from "react";
+import CardCodePage from "screens/components/card/code/CardCodePage";
+import CardPageLayout from "screens/components/card/CardPageLayout";
+
+const Code = () => (
+  <>
+    <Head>
+      <title>Card code — Halstack Design System</title>
+    </Head>
+    <CardCodePage />
+  </>
+);
+
+Code.getLayout = (page: ReactElement) => <CardPageLayout>{page}</CardPageLayout>;
+
+export default Code;
diff --git a/apps/website/pages/components/card/index.tsx b/apps/website/pages/components/card/index.tsx
@@ -1,21 +1,17 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
-import CardCodePage from "screens/components/card/code/CardCodePage";
+import CardOverviewPage from "screens/components/card/overview/CardOverviewPage";
 import CardPageLayout from "screens/components/card/CardPageLayout";
 
-const Usage = () => {
-  return (
-    <>
-      <Head>
-        <title>Card — Halstack Design System</title>
-      </Head>
-      <CardCodePage></CardCodePage>
-    </>
-  );
-};
+const Index = () => (
+  <>
+    <Head>
+      <title>Card — Halstack Design System</title>
+    </Head>
+    <CardOverviewPage />
+  </>
+);
 
-Usage.getLayout = function getLayout(page: ReactElement) {
-  return <CardPageLayout>{page}</CardPageLayout>;
-};
+Index.getLayout = (page: ReactElement) => <CardPageLayout>{page}</CardPageLayout>;
 
-export default Usage;
+export default Index;
diff --git a/apps/website/pages/components/card/specifications.tsx b/apps/website/pages/components/card/specifications.tsx
diff --git a/apps/website/pages/components/card/usage.tsx b/apps/website/pages/components/card/usage.tsx
diff --git a/apps/website/screens/components/card/CardPageLayout.tsx b/apps/website/screens/components/card/CardPageLayout.tsx
@@ -6,9 +6,8 @@ import { ReactNode } from "react";
 
 const CardPageHeading = ({ children }: { children: ReactNode }) => {
   const tabs = [
-    { label: "Code", path: "/components/card" },
-    { label: "Usage", path: "/components/card/usage" },
-    { label: "Specifications", path: "/components/card/specifications" },
+    { label: "Overview", path: "/components/card" },
+    { label: "Code", path: "/components/card/code" },
   ];
 
   return (
@@ -17,13 +16,10 @@ const CardPageHeading = ({ children }: { children: ReactNode }) => {
         <DxcFlex direction="column" gap="2rem">
           <ComponentHeading name="Card" />
           <DxcParagraph>
-            Cards are a container of information, actions and data with a hierarchy to make easy scanning the content. A
-            card can be defined as a unit, so it has all the information within it, making the component useful to show
-            images, text, and interactive elements. The structure of the card can be seen as blocks, each block is
-            optional to be displayed but the overall element should make a cohesive design, even if it includes text,
-            images or other elements.
+            A card is a flexible, modular UI components used to group related information and actions within a
+            contained, clean and visually distinct layout.
           </DxcParagraph>
-          <TabsPageHeading tabs={tabs}></TabsPageHeading>
+          <TabsPageHeading tabs={tabs} />
         </DxcFlex>
       </PageHeading>
       {children}

diff --git a/apps/website/screens/components/card/code/CardCodePage.tsx b/apps/website/screens/components/card/code/CardCodePage.tsx
@@ -22,14 +22,11 @@ const sections = [
         </thead>
         <tbody>
           <tr>
-            <td>imageSrc</td>
-            <td>
-              <TableCode>string</TableCode>
-            </td>
+            <td>children</td>
             <td>
-              URL of the image that will be placed in the card component. In case of omission, the image container will
-              not appear and the content will occupy its space.
+              <TableCode>React.ReactNode</TableCode>
             </td>
+            <td>Custom content that will be placed inside the component.</td>
             <td>-</td>
           </tr>
           <tr>
@@ -42,6 +39,16 @@ const sections = [
               <TableCode>'black'</TableCode>
             </td>
           </tr>
+          <tr>
+            <td>imageCover</td>
+            <td>
+              <TableCode>boolean</TableCode>
+            </td>
+            <td>Whether the image must cover the its whole area of the card.</td>
+            <td>
+              <TableCode>false</TableCode>
+            </td>
+          </tr>
           <tr>
             <td>imagePadding</td>
             <td>
@@ -66,66 +73,58 @@ const sections = [
             </td>
           </tr>
           <tr>
-            <td>linkHref</td>
+            <td>imageSrc</td>
             <td>
               <TableCode>string</TableCode>
             </td>
             <td>
-              If defined, the card will be displayed as an anchor, using this prop as <Code>href</Code>. The component
-              will display visual information on mouse-over.
+              URL of the image that will be placed in the card component. In case of omission, the image container will
+              not appear and the content will occupy its space.
             </td>
             <td>-</td>
           </tr>
           <tr>
-            <td>onClick</td>
+            <td>linkHref</td>
             <td>
-              <TableCode>{"() => void"}</TableCode>
+              <TableCode>string</TableCode>
             </td>
             <td>
-              This function will be called when the user clicks the card. Component will show some visual feedback on
-              hover.
+              If defined, the card will be displayed as an anchor, using this prop as <Code>href</Code>. The component
+              will display visual information on mouse-over.
             </td>
             <td>-</td>
           </tr>
           <tr>
-            <td>imageCover</td>
+            <td>margin</td>
             <td>
-              <TableCode>boolean</TableCode>
+              <TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin</TableCode>
             </td>
-            <td>Whether the image must cover the its whole area of the card.</td>
             <td>
-              <TableCode>false</TableCode>
+              Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
+              'right' properties in order to specify different margin sizes.
             </td>
+            <td>-</td>
           </tr>
-
           <tr>
-            <td>outlined</td>
+            <td>onClick</td>
             <td>
-              <TableCode>boolean</TableCode>
+              <TableCode>{"() => void"}</TableCode>
             </td>
-            <td>Determines whether or not the component should have an outline.</td>
             <td>
-              <TableCode>true</TableCode>
-            </td>
-          </tr>
-          <tr>
-            <td>children</td>
-            <td>
-              <TableCode>React.ReactNode</TableCode>
+              This function will be called when the user clicks the card. Component will show some visual feedback on
+              hover.
             </td>
-            <td>Custom content that will be placed inside the component.</td>
             <td>-</td>
           </tr>
           <tr>
-            <td>margin</td>
+            <td>outlined</td>
             <td>
-              <TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin</TableCode>
+              <TableCode>boolean</TableCode>
             </td>
+            <td>Determines whether or not the component should have an outline.</td>
             <td>
-              Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
-              'right' properties in order to specify different margin sizes.
+              <TableCode>true</TableCode>
             </td>
-            <td>-</td>
           </tr>
           <tr>
             <td>tabIndex</td>
@@ -154,15 +153,13 @@ const sections = [
   },
 ];
 
-const SelectCodePage = () => {
-  return (
-    <DxcFlex direction="column" gap="4rem">
-      <QuickNavContainerLayout>
-        <QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer>
-      </QuickNavContainerLayout>
-      <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/card/code/CardCodePage.tsx" />
-    </DxcFlex>
-  );
-};
+const CardCodePage = () => (
+  <DxcFlex direction="column" gap="4rem">
+    <QuickNavContainerLayout>
+      <QuickNavContainer sections={sections} startHeadingLevel={2} />
+    </QuickNavContainerLayout>
+    <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/card/code/CardCodePage.tsx" />
+  </DxcFlex>
+);
 
-export default SelectCodePage;
+export default CardCodePage;