Card
LayoutStable
Container component for grouping related content with header, body, footer, and optional header action slot.
Quick Import
import { Card } from "@cohere-ai/waypoint-ui/card";Live Preview
Loading Card...
Props
| Name | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes (all sub-components accept className) |
Examples
Basic Card
Card with header, content, and footer
1 import { 2 Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, 3 } from '@cohere-ai/waypoint-ui/card'; 4 5 <Card> 6 <CardHeader> 7 <CardTitle>Card Title</CardTitle> 8 <CardDescription>Card description goes here.</CardDescription> 9 </CardHeader> 10 <CardContent> 11 <p>Main content area.</p> 12 </CardContent> 13 <CardFooter> 14 <Button>Action</Button> 15 </CardFooter> 16 </Card>
Card with Header Action
Card with an action slot in the header using CardAction
1 import { Card, CardHeader, CardTitle, CardAction, CardContent } from '@cohere-ai/waypoint-ui/card'; 2 3 <Card> 4 <CardHeader> 5 <CardTitle>Notifications</CardTitle> 6 <CardAction> 7 <Button variant="ghost" size="icon"><SettingsIcon /></Button> 8 </CardAction> 9 </CardHeader> 10 <CardContent>...</CardContent> 11 </Card>
Additional Resources
Found an Issue?
If you've encountered a bug or have feedback about the Card component, please report it to our team. Your feedback helps us improve Waypoint.
Available for all users • Issue will be created in Linear
Was this page helpful?
Your feedback helps us improve our documentation.
Need Help?
Check out the Whitelabeling Playground to explore customization options or visit the Developer Guide for integration help.