Card
A container with a title, body, and footer.
The Card component is ideal for organizing related content into a distinct section. It supports an optional title header and an optional footer.
Usage
import { Card, Text } from 'caret-tui';
const App = () => (
<Card title="System Status" footer="Updated 1m ago" variant="success">
<Text>All systems are operational.</Text>
</Card>
);Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | The main content of the card. |
title | string | - | Optional title displayed in the top border. |
footer | string | - | Optional footer displayed in the bottom border. |
variant | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'default' | 'default' | Determines the border and title color. |
borderStyle | BorderStyle | 'round' | The border style of the card. |
padding | number | 1 | Horizontal padding inside the card. |
height | number | string | - | Explicit height for the card. |