Card

A flexible content container with header, content, and footer sections.

Installation

Import the component from the passport-ui package.

components/example.tsx
1
import { Card, CardContent } from "passport-ui";

Usage

Basic example showing how to use the component.

components/example.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<Card>
<CardContent>
<div className="meta-container">
<h3>Card Title</h3>
<p>
This is the main content of the card. You can put any content here.
</p>
</div>
</CardContent>
</Card>
{/* Example with progress */}
<Card>
<CardContent>
<div className="meta-container">
<h3>Project Alpha</h3>
<p>A modern web application built with React and TypeScript.</p>
</div>
<div className="meta-container">
<div className="flex justify-between text-sm">
<span>Progress</span>
<span>75%</span>
</div>
<Progress value={75} />
</div>
</CardContent>
</Card>

Additional resources

Documentation and examples are available in Storybook.