Card

Present related content on a consistent card surface with flexible text, media, actions, fixed items, and scrolling.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use Card for content with its own information hierarchy. The page owns ordinary grid layout and whitespace; do not add a repeated card shell around every nested layer.

Use row or column for primary layout; contentFill and contentHug control how children occupy the content area.
selected, active, and interactive express selection, active appearance, and interaction respectively. children supplies the content; Card does not generate business information.

Import

import { Card } from '@snowui-design-system/components';

Usage

KPI cards

Compact stat cards

Analytics cards

Plan selection cards

Payment method cards

Billing address cards

Project progress cards

Work item cards

API Reference

Property	Type	Default	Example	Description
`row`	`boolean`	`false`	`row`	Arrange direct ordinary content horizontally, following Frame syntax.
`column`	`boolean`	`—`	`column`	Arrange ordinary content vertically. When omitted, takes the inverse of row; row wins if both are true.
`wrap`	`boolean`	`false`	`wrap`	Allow ordinary content to wrap. Disabled by default.
`contentFill`	`boolean`	`false`	`contentFill`	Fill the Card content area with ordinary child widths. Takes priority over contentHug.
`contentHug`	`boolean`	`false`	`contentHug`	Shrink ordinary child widths to their content.
`selected`	`boolean`	`false`	`selected`	Semantic alias for the active state, with the same effect as active.
`active`	`boolean`	`false`	`active`	Apply active appearance.
`interactive`	`boolean`	`false`	`interactive`	Add interactive appearance, pointer cursor, and hover border. The consumer still owns click effects; it does not navigate, select, or add button keyboard behavior automatically.
`scrollable`	`boolean`	`true`	`scrollable`	Enable internal scrolling when content overflows. Without a height constraint, content grows naturally.
`children`	`Snippet`	`—`	`<Card>Content</Card>`	Any custom content.