Card docs + preview

@stellar/design-system-website/docs/components/containers/_category_.json

@@ -0,0 +1,6 @@
+{
+  "label": "Containers",
+  "link": {
+    "type": "generated-index"
+  }
+}

@stellar/design-system-website/docs/components/containers/card.mdx

@@ -0,0 +1,19 @@
+---
+slug: /card
+---
+
+# Card
+
+<ComponentDescription componentName="Card" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="Card">
+  <Card>Content</Card>
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="Card" />

@stellar/design-system-website/src/componentPreview/cardPreview.tsx

@@ -0,0 +1,39 @@
+import { ComponentPreview } from "@site/src/components/PreviewBlock";
+
+export const cardPreview: ComponentPreview = {
+  options: [
+    {
+      type: "select",
+      prop: "variant",
+      options: [
+        {
+          value: "primary",
+          label: "Primary",
+        },
+        {
+          value: "secondary",
+          label: "Secondary",
+        },
+      ],
+    },
+    {
+      type: "select",
+      prop: "borderRadiusSize",
+      options: [
+        {
+          value: "md",
+          label: "Medium radius",
+        },
+        {
+          value: "sm",
+          label: "Small radius",
+        },
+      ],
+    },
+    {
+      type: "checkbox",
+      prop: "noPadding",
+      label: "No padding",
+    },
+  ],
+};

@stellar/design-system-website/src/components/PreviewBlock/index.tsx

@@ -13,6 +13,7 @@ import { bannerPreview } from "@site/src/componentPreview/bannerPreview";
 import { buttonPreview } from "@site/src/componentPreview/buttonPreview";
 import { buttonPresetPreview } from "@site/src/componentPreview/buttonPresetPreview";
 import { captionPreview } from "@site/src/componentPreview/captionPreview";
+import { cardPreview } from "@site/src/componentPreview/cardPreview";
 import { checkboxPreview } from "@site/src/componentPreview/checkboxPreview";
 import { copyTextPreview } from "@site/src/componentPreview/copyTextPreview";
 import { headingPreview } from "@site/src/componentPreview/headingPreview";
@@ -43,6 +44,7 @@ const previews: { [key: string]: ComponentPreview } = {
   Button: buttonPreview,
   ButtonPreset: buttonPresetPreview,
   Caption: captionPreview,
+  Card: cardPreview,
   Checkbox: checkboxPreview,
   CopyText: copyTextPreview,
   Heading: headingPreview,

@stellar/design-system-website/src/components/PreviewBlock/styles.css

@@ -42,13 +42,15 @@
   flex-wrap: wrap;
   gap: 0.5rem 1.5rem;
   width: fit-content;
+  color: var(--color-gray-80);
 }
 
 .PreviewBlock__component {
   min-height: 15rem;
   display: flex;
   align-items: center;
   justify-content: center;
+  color: var(--color-gray-70);
 }
 
 @media (max-width: 600px) {
@@ -90,3 +92,7 @@
 .PreviewBlock .Textarea {
   max-width: 24rem;
 }
+
+.PreviewBlock .Checkbox__container label {
+  font-weight: var(--font-weight-regular);
+}

@stellar/design-system/src/components/Card/index.tsx

@@ -1,13 +1,21 @@
 import React from "react";
 import "./styles.scss";
 
-interface CardProps {
+/** */
+export interface CardProps {
+  /** Card content */
   children: React.ReactNode;
+  /** Variant of the card @defaultValue `primary` */
   variant?: "primary" | "secondary";
+  /** Remove card padding */
   noPadding?: boolean;
+  /** Card border radius @defaultValue `md` */
   borderRadiusSize?: "sm" | "md";
 }
 
+/**
+ * Container with flexible dimensions for any type of content.
+ */
 export const Card: React.FC<CardProps> = ({
   children,
   variant = "primary",