diff --git a/src/collections/sistent/components/card/code.mdx b/src/collections/sistent/components/card/code.mdx
new file mode 100644
index 0000000000000..50d59ef069f39
--- /dev/null
+++ b/src/collections/sistent/components/card/code.mdx
@@ -0,0 +1,167 @@
+---
+title: Card Code
+component: card
+description: A card is a contained surface that groups related information and actions about a single subject, making content easy to scan and interact with.
+---
+
+import { Card, Button } from "@sistent/sistent";
+
+The Card component wraps MUI's Card and works with Sistent's theming out of the box. Here are the most common usage patterns.
+
+
+
+
+
+Use `variant="outlined"` to get a card with a border instead of a shadow. Useful when the background is already elevated or when you want a lighter visual style.
+
+
+
+
+To make the entire card interactive, add an `onClick` handler and update the cursor style. This pattern is common in grid layouts where each card is a navigation target.
+
+
+
+
+
+ alert('Card clicked')}
+ >
+ Click anywhere on this card
+
+
+
+
+
+ console.log("Card clicked")}
+ >
+ Click anywhere on this card
+
+`} />
+
+
+
+A common real-world pattern — a card with a title, a short description, and action buttons at the bottom.
+
+
+
+
+
+
+
+
Card Title
+
A short description about what this card represents and why it matters.
+
+
+
+
+
+
+
+
+
+
+
+
+
Card Title
+
+ A short description about what this card represents.
+
+
+
+
+
+
+
+`} />
+
diff --git a/src/collections/sistent/components/card/guidance.mdx b/src/collections/sistent/components/card/guidance.mdx
new file mode 100644
index 0000000000000..f348aff0c7896
--- /dev/null
+++ b/src/collections/sistent/components/card/guidance.mdx
@@ -0,0 +1,90 @@
+---
+title: Card Guidance
+component: card
+description: A card is a contained surface that groups related information and actions about a single subject, making content easy to scan and interact with.
+---
+
+import { Card } from "@sistent/sistent";
+
+Cards work best when they follow a consistent structure and are used intentionally. Here's how to get the most out of them.
+
+
+
+
+
+Cards are a great fit when you're presenting a collection of items that are related but independent — things like search results, product listings, user profiles, or dashboard widgets. The contained surface makes it easy for users to scan many items at once without losing track of where one ends and another begins.
+
+
Use cards when
+
+- You have multiple items of the same type to display side by side
+- Each item has its own set of actions (like "Edit", "Delete", or "View")
+- The content can be summarized — cards are not meant to show full detail
+- You want to let users quickly identify which item they want before drilling in
+
+
Avoid cards when
+
+- You only have a single piece of content — a card adds unnecessary structure here
+- The content is tabular — a table will do a better job showing relationships between rows
+- The layout is purely linear — a list or a stack of sections is simpler and more readable
+
+
+
+
+
+Cards work best with a predictable internal layout. When every card in a set follows the same structure, users can scan faster and actions are easier to find.
+
+
Keep it focused
+
+A card should cover one subject. If you find yourself fitting two unrelated things into a single card, split them into two. A focused card is easier to scan and less likely to confuse.
+
+
Prioritize the header
+
+The most important information — the title, name, or main identifier — should be at the top. Users scan in F-patterns; if the key info is buried, they'll miss it. Secondary details like descriptions or metadata can follow below.
+
+
Limit the number of actions
+
+Cards shouldn't try to do too many things at once. One to two actions per card is a good rule of thumb. If you have more, consider whether some of those actions belong on a detail page instead.
+
+
+
+
+
+When multiple card types appear in the same layout, their visual weight should reflect their importance. Use elevation and variant choices deliberately to guide the user's eye.
+
+
Elevated cards for primary content
+
+If cards are the main content on a page, use the default elevated style. The shadow helps them stand out from the background and from each other.
+
+
Outlined cards for secondary content
+
+Outlined cards are a better fit for supplementary content, sidebars, or contexts where the background is already elevated. They're visually lighter and won't compete with the primary content.
+
+
+
+
+
+Whether or not a card is clickable should be clear from the visual treatment alone — don't make users guess.
+
+
Clickable cards
+
+If the entire card is a navigation target, make sure there's a visible hover state. A subtle background color change or shadow shift is enough. The cursor should switch to a pointer on hover.
+
+
Cards with actions
+
+If a card has specific action buttons (rather than a full-card click), those should be visually distinct and located in a consistent spot — usually the bottom of the card. Don't mix full-card clicks with inline buttons, as this creates conflicting affordances.
+
+
Non-interactive cards
+
+Remove any hover effects from purely informational cards. No pointer cursor, no shadow change on hover. This keeps the visual language consistent and prevents users from clicking on things that don't go anywhere.
+
+
+
+
+
+Cards should be accessible without requiring visual context to understand their purpose.
+
+- If a card is clickable, make sure it has a meaningful `aria-label` or that the visible text is descriptive enough to serve as the accessible name
+- Avoid using only color or icons to convey the card's purpose — pair them with a visible text label
+- Ensure sufficient color contrast between the card surface and its contents
+- Focus outlines should be visible on all interactive elements within a card
+- If cards reorder or update dynamically, use appropriate ARIA live regions so screen reader users are notified of changes
diff --git a/src/collections/sistent/components/card/index.mdx b/src/collections/sistent/components/card/index.mdx
new file mode 100644
index 0000000000000..645e3ccb0faf0
--- /dev/null
+++ b/src/collections/sistent/components/card/index.mdx
@@ -0,0 +1,107 @@
+---
+name: "Card"
+title: Card
+published: true
+component: card
+description: A card is a contained surface that groups related information and actions about a single subject, making content easy to scan and interact with.
+---
+
+import { Card } from "@sistent/sistent";
+
+Cards are versatile containers that bring together content and actions around a single topic. They give users a clean, scannable way to browse and interact with information — whether that's a product, a profile, a post, or anything in between. Cards can live in grids, lists, or standalone layouts, and they scale well across screen sizes.
+
+
+
+
+
+Cards come in a few configurations depending on how much visual weight and interactivity you need. Choosing the right one helps keep the interface consistent and easy to navigate.
+
+
Elevated
+
+The default card type. It uses a drop shadow to sit above the background, creating a sense of depth. This is the most common type and works well for content-heavy layouts where you need clear separation between items.
+
+
+
+
+
+
Elevated Card
+
+
+
+
+
+
Outlined
+
+An outlined card drops the shadow and uses a border instead. It's a good pick when you want a lighter look, or when the background is already elevated and adding more depth would feel cluttered.
+
+
+
+
+
+
+The `elevation` prop lets you control how prominent a card feels. Values range from 0 (flat, no shadow) all the way up to 24 (maximum depth). Most cards in practice sit between 1 and 8 — high enough to stand out without feeling heavy.
+
+
+
+
+
+
+Cards can be made clickable by wrapping them in an action area or by setting the `onClick` handler directly. When a card is interactive, it should have a clear hover and focus state so users know it's actionable.
+
+
Clickable Card
+
+Use a clickable card when the entire surface should trigger a navigation or action. This is common in grids where each card represents a destination — like a product page or a settings section.
+
+
+
+
+ {}}
+ >
+
Click me
+
+
+
+
+
+
Non-interactive Card
+
+Not every card needs to be clickable. When a card is purely informational — like a stats panel or a summary block — it should not have hover effects or pointer cursors, since those signal interactivity that doesn't exist.
+
+
+
+
+
+By default, cards have rounded corners. If you need a more geometric, grid-aligned look, you can use the `square` prop to remove the rounding entirely.
+
+
+
+