Skip to main contentSkip to sidebarSkip to headerSkip to footer

Card

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

Installation

Import the component from the passport-ui package.

components/example.tsx
1
2
3
4
5
6
7
8
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} 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
<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description and details</CardDescription>
  </CardHeader>
  <CardContent>
    <p>This is the main content of the card. You can put any content here.</p>
  </CardContent>
</Card>
 
{/* Example with footer */}
<Card>
  <CardHeader>
    <CardTitle>Notifications</CardTitle>
    <CardDescription>You have 3 unread messages.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Your latest updates are ready to review.</p>
  </CardContent>
  <CardFooter>
    <button>Mark all as read</button>
  </CardFooter>
</Card>

Additional resources

Documentation and examples are available in Storybook.

View in Storybook ↗