Card
<ts-card> vv0.4.0
The ts-card component.
Open in Storybook for interactive demos.
Preview
Section titled “Preview”<ts-card elevation="sm" padding="md">Content</ts-card>Properties
Section titled “Properties”| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
bordered | bordered | boolean | false | Border style variant. |
elevation | elevation | "lg" | "md" | "none" | "sm" | "xl" | 'sm' | Elevation level controlling the shadow depth. |
interactive | interactive | boolean | false | Makes the card interactive (hover effect, cursor pointer). |
padding | padding | "lg" | "md" | "none" | "sm" | 'md' | Padding size for the card body. |
| Name | Description |
|---|---|
*(default)* | Default slot for card body content. |
footer | Card footer content. |
header | Card header content. |
media | Media content (image, video) displayed at the top. |
CSS Parts
Section titled “CSS Parts”Use ::part() to style internal elements:
| Part | Description |
|---|---|
base | The card container. |
body | The body wrapper. |
footer | The footer wrapper. |
header | The header wrapper. |
media | The media wrapper. |
ts-card::part(base) { /* your custom styles */}<ts-card elevation="sm" padding="md">Content</ts-card>import { TsCard } from '@tessera-ui/react';
<TsCard elevation="sm" padding="md">Content</TsCard>