docs / layout / card
Card
Container with header, content, footer. Now with ASCII border and + corners via ascii-border ascii-plus.
Card Title
Card description goes here.
This is the card content. Use it for grouped info.
import { AsciiBorder } from "@/components/ui/ascii-border"
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
<AsciiBorder className="max-w-md p-0">
<Card className="border-0 shadow-none bg-transparent">
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>Card description</CardDescription>
</CardHeader>
<CardContent>Content here</CardContent>
<CardFooter>
<Button>Save</Button>
</CardFooter>
</Card>
</AsciiBorder>
// Or raw utilities
<div className="ascii-border ascii-plus p-6">
Card content
</div>