Card Surface
Configurable visual surface for grouping content with optional interactive states and variant borders.
Live Playground
This surface provides visual grouping, consistent padding, and optional variant accents.
Interactive Props
Usage Example
<ds-card variant="neutral">
<ds-card-header>
<span slot="title">Design System Card</span>
<span slot="subtitle">Surface Component</span>
</ds-card-header>
<p>This surface provides visual grouping, consistent padding, and optional variant accents.</p>
</ds-card>Properties Reference
| Property | Type | Default | Description |
|---|---|---|---|
| variant | 'neutral' | 'positive' | 'negative' | 'warning' | undefined | Applies a semantic left accent border. |
| interactive | boolean | false | Adds hover border transitions and press scaling. |