@commercetools/nimbus-mcp 0.1.0 → 2.10.0

package/data/docs/routes/components-data-display-card.json

@@ -0,0 +1,338 @@
+{
+  "meta": {
+    "id": "Components-Card",
+    "title": "Card",
+    "exportName": "Card",
+    "description": "A versatile container component presents self-contained information, often combining text, images, and actions, making it ideal for displaying summaries or content previews.",
+    "lifecycleState": "Stable",
+    "order": 999,
+    "repoPath": "packages/nimbus/src/components/card/card.mdx",
+    "menu": [
+      "Components",
+      "Data Display",
+      "Card"
+    ],
+    "route": "components/data-display/card",
+    "tags": [
+      "component",
+      "card",
+      "container",
+      "surface",
+      "content"
+    ],
+    "toc": [
+      {
+        "value": "Overview",
+        "href": "#overview",
+        "depth": 2,
+        "numbering": [
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Resources",
+        "href": "#resources",
+        "depth": 3,
+        "numbering": [
+          1,
+          1,
+          1
+        ],
+        "parent": "root"
+      }
+    ],
+    "figmaLink": "https://www.figma.com/design/gHbAJGfcrCv7f2bgzUQgHq/NIMBUS-Guidelines?node-id=1793-8790&m=dev",
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      },
+      {
+        "key": "guidelines",
+        "title": "Guidelines",
+        "order": 2
+      },
+      {
+        "key": "dev",
+        "title": "Implementation",
+        "order": 3
+      },
+      {
+        "key": "a11y",
+        "title": "Accessibility",
+        "order": 4
+      }
+    ]
+  },
+  "mdx": "\n## Overview\n\nThis versatile container component often integrates text, images, and actions.\nInteraction methods differ: some are clickable, others use buttons and links,\nand some are purely informational, grouping content without direct interaction.\n\n### Resources\n\nDeep dive into implementation details and access the Nimbus design library.\n\n[Figma library](https://www.figma.com/design/gHbAJGfcrCv7f2bgzUQgHq/NIMBUS-Guidelines?node-id=1793-8790&m=dev)\n",
+  "views": {
+    "overview": {
+      "mdx": "\n## Overview\n\nThis versatile container component often integrates text, images, and actions.\nInteraction methods differ: some are clickable, others use buttons and links,\nand some are purely informational, grouping content without direct interaction.\n\n### Resources\n\nDeep dive into implementation details and access the Nimbus design library.\n\n[Figma library](https://www.figma.com/design/gHbAJGfcrCv7f2bgzUQgHq/NIMBUS-Guidelines?node-id=1793-8790&m=dev)\n",
+      "toc": [
+        {
+          "value": "Overview",
+          "href": "#overview",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "a11y": {
+      "mdx": "\n## Accessibility\n\nAccessibility ensures that digital content and functionality are usable by\neveryone, including people with disabilities, by addressing visual, auditory,\ncognitive, and physical limitations.\n\n```jsx live\nconst App = () => (\n  <Card.Root cardPadding=\"md\" borderStyle=\"outlined\" elevation=\"elevated\">\n    <Box backgroundColor=\"#FDE3E3\" width=\"5600\" height=\"500\"></Box>\n  </Card.Root>\n)\n```\n\n### Accessibility standards\n\n- **Non-text content:** Provide descriptive alternative text (`alt` attribute)\n  for images within cards.\n- **Info and relationships:** Use semantic HTML to structure the card content\n  logically (e.g., headings, lists).\n- **Color contrast:** Ensure sufficient color contrast between text and\n  background within the card.\n- **Keyboard accessibility:** Ensure the entire card or its primary interactive\n  elements are focusable and operable using only a keyboard.\n- **Focus visible:** Provide a clear visual focus indicator when the card or its\n  interactive elements are focused.\n- **Target size:** If the card is interactive, ensure touch target sizes are\n  adequate.\n- **Meaningful sequence:** Ensure the content within the card is presented in a\n  logical order.\n- **Labels or instructions:** Provide clear labels or instructions for form\n  elements within cards.\n- **Semantic HTML:** Use semantic HTML to ensure compatibility with assistive\n  technologies.\n- **Avoid complex interactive cards:** Avoid making the entire card a single\n  interactive element if it contains multiple distinct actions, to ensure proper\n  interaction for assistive technology users.\n",
+      "toc": [
+        {
+          "value": "Accessibility",
+          "href": "#accessibility",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility standards",
+          "href": "#accessibility-standards",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "dev": {
+      "mdx": "\n## Getting started\n\n### Import\n\n```tsx\nimport { Box, Card, Link, type CardProps } from '@commercetools/nimbus';\n```\n\n### Basic usage\n\nThe Card component uses a compound pattern to structure content. You must wrap `Card.Header` and `Card.Content` within `Card.Root`.\n\n```jsx live-dev\nconst App = () => (\n  <Card.Root>\n    <Card.Header>Card Title</Card.Header>\n    <Card.Content>\n      <Text>This is the main card content.</Text>\n    </Card.Content>\n  </Card.Root>\n)\n```\n\n## Usage examples\n\n### Size options\n\nThe `cardPadding` prop controls the internal spacing of the card. Available sizes are `sm`, `md`, and `lg`.\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"column\" gap=\"400\">\n    <Card.Root cardPadding=\"sm\">\n      <Card.Header>Small Padding</Card.Header>\n      <Card.Content>Compact content spacing.</Card.Content>\n    </Card.Root>\n\n    <Card.Root cardPadding=\"md\">\n      <Card.Header>Medium Padding</Card.Header>\n      <Card.Content>Standard content spacing (default).</Card.Content>\n    </Card.Root>\n\n    <Card.Root cardPadding=\"lg\">\n      <Card.Header>Large Padding</Card.Header>\n      <Card.Content>Spacious content layout.</Card.Content>\n    </Card.Root>\n  </Stack>\n)\n```\n\n### Visual variants\n\nCustomize the card's appearance using `borderStyle`, `elevation`, and `backgroundStyle`.\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"column\" gap=\"400\">\n    <Card.Root borderStyle=\"outlined\" elevation=\"none\">\n      <Card.Header>Outlined (Default)</Card.Header>\n      <Card.Content>Standard bordered look.</Card.Content>\n    </Card.Root>\n\n    <Card.Root borderStyle=\"none\" elevation=\"elevated\">\n      <Card.Header>Elevated</Card.Header>\n      <Card.Content>Shadow depth without border.</Card.Content>\n    </Card.Root>\n\n    <Card.Root backgroundStyle=\"muted\" borderStyle=\"none\">\n      <Card.Header>Muted Background</Card.Header>\n      <Card.Content>Subtle background color for differentiation.</Card.Content>\n    </Card.Root>\n  </Stack>\n)\n```\n\n### Interactive cards\n\nWhen making a card interactive, avoid placing `onClick` directly on the `Card.Root`. Instead, wrap the card in an anchor tag or use proper ARIA roles to ensure accessibility.\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"column\" gap=\"400\">\n    {/* Option 1: Wrapped in a Nimbus Link (Recommended for navigation) */}\n    <Link \n      href=\"#\" \n      textDecoration=\"none\" \n      color=\"inherit\" \n      display=\"block\"\n      _hover={{ textDecoration: 'none' }}\n      aria-label=\"Navigate to details\"\n    >\n      <Card.Root borderStyle=\"outlined\" elevation=\"elevated\">\n        <Card.Header>Navigational Card</Card.Header>\n        <Card.Content>\n          This entire card acts as a link using the system Link component.\n        </Card.Content>\n      </Card.Root>\n    </Link>\n\n    {/* Option 2: Interactive element with ARIA (For actions) */}\n    <Box\n      role=\"button\"\n      tabIndex={0}\n      onClick={() => alert(\"Card clicked\")}\n      onKeyDown={(e) => {\n        if (e.key === \"Enter\" || e.key === \" \") {\n          e.preventDefault();\n          alert(\"Card clicked\");\n        }\n      }}\n      cursor=\"pointer\"\n      aria-label=\"Trigger action\"\n    >\n      <Card.Root borderStyle=\"outlined\">\n        <Card.Header>Action Card</Card.Header>\n        <Card.Content>\n          Behaves like a button with keyboard support (Tab, Enter, Space).\n        </Card.Content>\n      </Card.Root>\n    </Box>\n  </Stack>\n)\n```\n\n## Component requirements\n\n## Accessibility\n\nThe `Card` component handles most accessibility requirements internally, rendering semantic `div` elements by default. It acts as a generic container.\n\n- **Headings**: Ensure the content within `Card.Header` follows your page's heading hierarchy (e.g., use `Heading` component or `h3`, `h4` tags).\n- **Interactive Cards**: If a card is interactive (clickable), do not attach `onClick` directly to the card div if possible. Instead, wrap the card in a link or button, or ensure proper ARIA roles (`role=\"button\"`) and keyboard handling (`tabIndex={0}`, Enter/Space key listeners) are implemented.\n\nIf your use case requires tracking and analytics for this component, it is good practice to add a **persistent**, **unique** id to the component:\n\n```tsx\nconst PERSISTENT_ID = \"project-summary-card\";\n\nexport const Example = () => (\n  <Card.Root id={PERSISTENT_ID}>\n    <Card.Header>Summary</Card.Header>\n    <Card.Content>...</Card.Content>\n  </Card.Root>\n);\n```\n\n#### Keyboard navigation\n\nStandard Cards are not focusable. Interactive content inside the card (buttons, links) follows the default focus order.\n\n## API reference\n\n<PropsTable id=\"Card\" />\n\n## Testing your implementation\n\nThese examples demonstrate how to test your implementation when using Card within your application. As the component's internal functionality is already tested by Nimbus, these patterns help you verify your integration and application-specific logic.\n\n### Basic Rendering Tests\n\nVerify the card displays the correct title and content\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport { Card, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"Card - Basic rendering\", () => {\n  it(\"renders project details\", () => {\n    render(\n      <NimbusProvider>\n        <Card.Root>\n          <Card.Header>Project X</Card.Header>\n          <Card.Content>Status: Active</Card.Content>\n        </Card.Root>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByText(\"Project X\")).toBeInTheDocument();\n    expect(screen.getByText(\"Status: Active\")).toBeInTheDocument();\n  });\n\n  it(\"renders with header only\", () => {\n    render(\n      <NimbusProvider>\n        <Card.Root>\n          <Card.Header>Card Title</Card.Header>\n        </Card.Root>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByText(\"Card Title\")).toBeInTheDocument();\n  });\n\n  it(\"renders with content only\", () => {\n    render(\n      <NimbusProvider>\n        <Card.Root>\n          <Card.Content>This is the main content.</Card.Content>\n        </Card.Root>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByText(\"This is the main content.\")).toBeInTheDocument();\n  });\n});\n```\n\n\n## Resources\n\n- [Storybook](https://nimbus-storybook.vercel.app/?path=/docs/components-card--docs)\n\n",
+      "toc": [
+        {
+          "value": "Getting started",
+          "href": "#getting-started",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Import",
+          "href": "#import",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Basic usage",
+          "href": "#basic-usage",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Usage examples",
+          "href": "#usage-examples",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Size options",
+          "href": "#size-options",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Visual variants",
+          "href": "#visual-variants",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Interactive cards",
+          "href": "#interactive-cards",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Component requirements",
+          "href": "#component-requirements",
+          "depth": 2,
+          "numbering": [
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility",
+          "href": "#accessibility",
+          "depth": 2,
+          "numbering": [
+            1,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Keyboard navigation",
+          "href": "#keyboard-navigation",
+          "depth": 4,
+          "numbering": [
+            1,
+            4,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "API reference",
+          "href": "#api-reference",
+          "depth": 2,
+          "numbering": [
+            1,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Testing your implementation",
+          "href": "#testing-your-implementation",
+          "depth": 2,
+          "numbering": [
+            1,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Basic Rendering Tests",
+          "href": "#basic-rendering-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 2,
+          "numbering": [
+            1,
+            7
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "guidelines": {
+      "mdx": "\n## Guidelines\n\nCard component guidelines focus on providing a clear, concise, and visually\ndistinct container for related content, ensuring scannability, clear actions,\nand adaptability across various layouts and screen sizes.\n\n### Best practices\n\n- **Clear purpose:** Each card should represent a single, distinct piece of\n  content or concept. Avoid combining multiple unrelated ideas into one card.\n- **Concise content:** Keep the information within a card brief and scannable.\n  Use clear headings, short descriptions, and only essential details.\n- **Visual hierarchy:** Establish a clear visual hierarchy to guide the user's\n  eye. Use appropriate typography, spacing, and visual cues to prioritize\n  important information.\n- **Actionable elements:** If the card requires user interaction, clearly\n  present the primary action(s) with prominent buttons or links. Limit the\n  number of actions to avoid overwhelming the user.\n- **Consistent styling:** Maintain consistent styling for cards. This includes\n  borders, shadows, typography, and spacing.\n- **Responsive design:** Ensure cards adapt well to different screen sizes and\n  orientations. Consider how the layout will change on mobile devices.\n\n### Usage\n\nThe strength of using cards in a UI lies in their ability to present information\nin concise, digestible chunks, making it easy for users to quickly scan,\nunderstand, and interact with related content, especially in responsive layouts.\n\n> [!TIP]\\\n> When to use\n\n- **Displaying a collection of related items:** When you have multiple, distinct\n  items that share a similar structure or theme (e.g., product listings,\n  documentation, user profiles).\n- **Presenting scannable summaries:** When you need to provide a quick overview\n  of information, allowing users to grasp the key details at a glance.\n- **Highlighting key information:** When you want to draw attention to important\n  pieces of content or features.\n- **Facilitating task completion:** When a card can contain actions that allow\n  users to quickly interact with or manage the displayed information.\n- **Creating a visually organized layout:** When you need to break down complex\n  information into digestible chunks and create a structured, modular design.\n- **Responsive design:** When you need a component that adapts well to various\n  screen sizes and can be easily rearranged on different devices.\n- **Content discovery:** When you want to encourage users to explore different\n  pieces of content.\n\n> [!CAUTION]\\\n> When not to use\n\n- **Presenting linear processes:** When users need to follow a specific,\n  sequential flow (e.g., a step-by-step form or a tutorial). Other patterns like\n  steppers are more appropriate.\n- **Displaying single, detailed items:** When you need to present a lot of\n  in-depth information about one specific item. A dedicated page is usually\n  better.\n- **Primary navigation:** Using cards for main site navigation can be\n  overwhelming and make it difficult for users to understand the site's\n  structure.\n- **Simple lists:** For basic lists of items with minimal information, a simple\n  list or table might be more efficient and less visually heavy.\n- **When content is highly interrelated and needs comparison:** If users need to\n  compare specific attributes across multiple items, a table might be a better\n  choice.\n- **Overcrowding the UI with too many cards:** Using too many cards on a page\n  can lead to visual clutter and make it hard for users to focus on what's\n  important.\n- **Forcing content into a card structure:** If the content doesn't naturally\n  fit into a card format, trying to force it can lead to awkward design and a\n  poor user experience.\n\n### Content\n\nContent within cards should be concise and focused, prioritizing key information\nand clear actions to ensure scannability and quick user comprehension. Consider\nthe card's purpose and limit content to only the most relevant details, using\nclear headings and short descriptions.\n\n> [!TIP]\\\n> **Do**\n>\n> - Cards are best for presenting self-contained pieces of information.\n> - Design cards with clear headings, concise text, and a logical visual\n>   hierarchy for easy scanning.\n\n```jsx live\nconst App = () => (\n  <Card.Root cardPadding=\"md\" borderStyle=\"outlined\" width=\"8000\">\n    <Card.Content>\n      <Stack gap=\"400\">\n        <img src=\"/images/card/card-discount-template.png\" alt=\"discount template illustration\" />\n        <Text fontWeight=\"bold\">\n          Discount templates\n        </Text>\n        <Text>\n          Templates allow you to get started quickly and easily by displaying only\n          what is needed for creating your discount.\n        </Text>\n        <Select.Root aria-label=\"Select template\" placeholder=\"Select...\">\n          <Select.Options>{/* Options would go here */}</Select.Options>\n        </Select.Root>\n        <Box>\n          <Button colorPalette=\"primary\" variant=\"solid\">\n            Select template\n          </Button>\n        </Box>\n      </Stack>\n    </Card.Content>\n  </Card.Root>\n);\n```\n\n> [!CAUTION]\\\n> **Don't**\n>\n> - Avoid cramming too much information into a single card. Each card should\n>   focus on a single subject.\n> - Long, scrolling cards can be cumbersome; prioritize key information.\n> - Don't use a card to compare information.\n\n```jsx live\nconst App = () => (\n  <Card.Root cardPadding=\"md\" borderStyle=\"outlined\" width=\"1\">\n    <Card.Content>\n      <Stack direction=\"horizontal\" gap=\"400\">\n        <Stack gap=\"400\" width=\"1/2\">\n          <img src=\"/images/card/card-discount-template.png\" alt=\"discount template illustration\" />\n          <Text fontWeight=\"bold\">\n            Discount templates\n          </Text>\n          <Text>\n            Templates allow you to get started quickly and easily by displaying\n            only what is needed for creating your discount.\n          </Text>\n          <Select.Root aria-label=\"Select template\" placeholder=\"Select...\">\n            <Select.Options>{/* Options would go here */}</Select.Options>\n          </Select.Root>\n          <Box>\n            <Button colorPalette=\"primary\" variant=\"solid\">\n              Select template\n            </Button>\n          </Box>\n        </Stack>\n        <Stack gap=\"400\" width=\"1/2\">\n          <img src=\"/images/card/card-product-discount.png\" alt=\"product discount illustration\" />\n          <Text fontWeight=\"bold\">\n            Product discount\n          </Text>\n          <Text>\n            A product discount applies a percentage-off (relative) or amount-ff\n            (absolute) discount to a specific product or subset of products\n            before adding them to the cart. They are useful for displaying\n            discounted or sale prices on a product info page\n          </Text>\n          <Box>\n            <Button colorPalette=\"primary\" variant=\"solid\">\n              Add product discount\n            </Button>\n          </Box>\n        </Stack>\n      </Stack>\n    </Card.Content>\n  </Card.Root>\n);\n```\n\n### Actions\n\nActions within a card should be limited and focused, prioritizing the primary\naction related to the card's content to avoid overwhelming the user. Ensure\nactions are clearly labeled and visually prominent to facilitate quick\ninteraction.\n\n> [!TIP]\\\n> **Do**\n>\n> - If interaction is needed, provide obvious and limited actions.\n> - Users often assume cards are clickable, especially when they contain visual\n>   cues that suggest interactivity, like buttons, links, or hover effects.\n>   However, this assumption isn't universal and can vary depending on the\n>   context and user experience.\n\n```jsx live\nconst App = () => (\n  <Card.Root cardPadding=\"md\" borderStyle=\"outlined\" width=\"384px\">\n    <Card.Content>\n      <Stack direction=\"horizontal\" gap=\"400\">\n        <Box\n          color=\"primary.11\"\n          boxSize=\"1000\"\n          borderRadius=\"50%\"\n          bg=\"primary.3\"\n          display=\"flex\"\n          alignItems=\"center\"\n          justifyContent=\"center\"\n          flexShrink=\"0\"\n        >\n          <Icons.ViewInAr width=\"24px\" height=\"24px\" />\n        </Box>\n        <Stack gap=\"100\">\n          <Text fontWeight=\"bold\">\n            Learn more about products\n          </Text>\n          <Text color=\"neutral.11\">\n            Discover what a product list is and how to manage it.\n          </Text>\n        </Stack>\n      </Stack>\n    </Card.Content>\n  </Card.Root>\n);\n```\n\n> [!CAUTION]\\\n> **Don't**\n>\n> - Don't use too many actions for the user within cards.\n> - Cards are generally not suitable for primary site navigation.\n\n```jsx live\nconst App = () => (\n  <Stack gap=\"400\" alignItems=\"start\">\n    {/* Main Card */}\n    <Card.Root cardPadding=\"md\" borderStyle=\"outlined\" width=\"423px\">\n      <Card.Content>\n        <Stack direction=\"horizontal\" gap=\"400\">\n          <Box\n            alignSelf=\"flex-start\"\n            color=\"primary.11\"\n            boxSize=\"1000\"\n            borderRadius=\"50%\"\n            bg=\"primary.3\"\n            display=\"flex\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            flexShrink=\"0\"\n          >\n            <Icons.ViewInAr width=\"24px\" height=\"24px\" />\n          </Box>\n          <Stack direction=\"horizontal\" gap=\"400\" alignItems=\"center\">\n            <Stack gap=\"200\">\n              <Flex gap=\"100\" alignItems=\"center\">\n                <Text fontWeight=\"bold\" color=\"primary.11\">\n                  See your products\n                </Text>\n                <Box color=\"primary.11\" boxSize=\"600\">\n                  <Icons.ArrowForward width=\"full\" height=\"full\" />\n                </Box>\n              </Flex>\n              <Text color=\"neutral.11\">\n                You have modified products that are waiting to be published\n              </Text>\n              {/* Buttons */}\n              <Stack gap=\"200\">\n                <Button\n                  colorPalette=\"primary\"\n                  variant=\"solid\"\n                  alignSelf=\"start\"\n                >\n                  Publish Products\n                </Button>\n                <Stack direction=\"horizontal\" gap=\"300\">\n                  <Button colorPalette=\"primary\" variant=\"link\" size=\"sm\">\n                    Review\n                  </Button>\n                  <Button colorPalette=\"primary\" variant=\"link\" size=\"sm\">\n                    Reject\n                  </Button>\n                  <Button colorPalette=\"primary\" variant=\"link\" size=\"sm\">\n                    See drafts\n                  </Button>\n                </Stack>\n              </Stack>\n            </Stack>\n          </Stack>\n        </Stack>\n      </Card.Content>\n    </Card.Root>\n\n    {/* Bottom Row Cards */}\n    <Stack direction=\"horizontal\" gap=\"400\">\n      {/* Products Card */}\n      <Card.Root\n        cardPadding=\"md\"\n        borderStyle=\"outlined\"\n        width=\"201.5px\"\n      > {/* Half width approx */}\n        <Card.Content>\n          <Stack direction=\"horizontal\" gap=\"300\" alignItems=\"center\">\n            <Box\n              alignSelf=\"flex-start\"\n              color=\"primary.11\"\n              boxSize=\"1000\"\n              borderRadius=\"50%\"\n              bg=\"primary.3\"\n              display=\"flex\"\n              alignItems=\"center\"\n              justifyContent=\"center\"\n              flexShrink=\"0\"\n            >\n              <Icons.ViewInAr width=\"24px\" height=\"24px\" />\n            </Box>\n            <Text textStyle=\"bodyStrong\" fontWeight=\"bold\" color=\"primary.11\">\n              Products\n            </Text>\n          </Stack>\n        </Card.Content>\n      </Card.Root>\n\n      {/* Discounts Card */}\n      <Card.Root\n        cardPadding=\"md\"\n        borderStyle=\"outlined\"\n        width=\"201.5px\"\n      > {/* Half width approx */}\n        <Card.Content>\n          <Stack direction=\"horizontal\" gap=\"300\" alignItems=\"center\">\n            <Box\n              alignSelf=\"flex-start\"\n              color=\"primary.11\"\n              boxSize=\"1000\"\n              borderRadius=\"50%\"\n              bg=\"primary.3\"\n              display=\"flex\"\n              alignItems=\"center\"\n              justifyContent=\"center\"\n              flexShrink=\"0\"\n            >\n              <Icons.Discount width=\"24px\" height=\"24px\" />\n            </Box>\n            <Text textStyle=\"bodyStrong\" fontWeight=\"bold\" color=\"primary.11\">\n              Discounts\n            </Text>\n          </Stack>\n        </Card.Content>\n      </Card.Root>\n    </Stack>\n  </Stack>\n);\n```\n",
+      "toc": [
+        {
+          "value": "Guidelines",
+          "href": "#guidelines",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Best practices",
+          "href": "#best-practices",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Usage",
+          "href": "#usage",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Content",
+          "href": "#content",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Actions",
+          "href": "#actions",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            4
+          ],
+          "parent": "root"
+        }
+      ]
+    }
+  }
+}