Skip to main contentSkip to sidebarSkip to headerSkip to footer

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.

View in Storybook ↗