ascii.cnlibs.com
GithubX

Card

Header, content and footer container.

Session
Active on this device
devicemacbook-pro
expiresin 6 days

## installation

pnpm dlx shadcn@latest add https://ascii.cnlibs.com/r/card.json

## usage

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
<Card width={38}>
  <CardHeader>
    <CardTitle>Session</CardTitle>
    <CardDescription>Active on this device</CardDescription>
  </CardHeader>
  <CardContent>
    <div className="flex justify-between">
      <span>device</span>
      <span>macbook-pro</span>
    </div>
    <div className="flex justify-between">
      <span>expires</span>
      <span>in 6 days</span>
    </div>
  </CardContent>
  <CardFooter>
    <Button variant="destructive">Revoke</Button>
  </CardFooter>
</Card>

## header only

Header only
No divider needed

## with action

CardAction floats a control on the header's right edge.

With action
Sections divide themselves.