petruc.ci / docs
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>