code.mdx

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.

Basic Card

A basic card with some content inside. By default it uses the elevated style with a subtle shadow.

Simple card content

Simple card content `} />

Outlined Card

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.

Outlined card content

Outlined card content `} />

Elevation

The elevation prop controls shadow depth. Values go from 0 (flat) to 24 (maximum depth). Most cards in practice sit between 1 and 8.

Elevation 1 Elevation 4 Elevation 8

Elevation 1 Elevation 4 Elevation 8 `} />

Square Corners

Cards have rounded corners by default. Set square to true to remove the rounding for a more geometric look.

Rounded Square

Rounded Square `} />

Clickable Card

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 `} />

Card with Header and Actions

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.

Action Cancel

Card Title

A short description about what this card represents.

Action Cancel

`} />