laif-ds/dist/agent-docs/components/Card.md

Design System di Laif con componenti React basati su principi di Atomic Design

 # Card
 
 ## Overview
 
 Composable container with header, content, footer, and optional action area. Supports size variants that control internal padding and spacing.
 
 ---
 
 ## Props
 
 ### Card (Root)
 
 | Prop        | Type                          | Default     | Description                                  |
 | ----------- | ----------------------------- | ----------- | -------------------------------------------- |
 | `size`      | `"default" | "sm" | "lg" | "none"` | `"default"` | Controls internal padding and spacing.       |
 | `className` | `string`                      | `""`        | Additional classes for layout and width.      |
 | `children`  | `React.ReactNode`             | **required**| Compose with subcomponents below.             |
 
 ### Subcomponents
 
 - `CardHeader`: Top section, usually with `CardTitle`, `CardDescription`, and optional `CardAction`.
 - `CardTitle`: Title text area.
 - `CardDescription`: Secondary text under the title.
 - `CardAction`: Right-aligned area inside the header for buttons/menus.
 - `CardContent`: Main content area.
 - `CardFooter`: Bottom area for actions or summaries.
 
 ---
 
 ## Behavior
 
 - **Size variants**: `sm`, `default`, `lg`, `none` change vertical padding and gaps.
 - **Header/Footer borders**: Apply border utilities on header/footer to create separators.
 - **Layout**: Use `className` for width and responsive behavior.
 
 ---
 
 ## Examples
 
 ### Basic
 
 ```tsx
 import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "laif-ds";
 import { Button } from "laif-ds";
 
 export function BasicCard() {
   return (
     <Card className="w-[350px]">
       <CardHeader>
         <CardTitle>Card Title</CardTitle>
         <CardDescription>Card description goes here</CardDescription>
       </CardHeader>
       <CardContent>
         <p>This is the main content of the card. You can put any content here.</p>
       </CardContent>
       <CardFooter>
         <Button>Action</Button>
       </CardFooter>
     </Card>
   );
 }
 ```
 
 ### With Action
 
 ```tsx
 import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent } from "laif-ds";
 import { Button } from "laif-ds";
 
 export function CardWithAction() {
   return (
     <Card className="w-[350px]">
       <CardHeader>
         <CardTitle>Card with Action</CardTitle>
         <CardDescription>Card with an action button in the header</CardDescription>
         <CardAction>
           <Button variant="ghost" size="icon">⋯</Button>
         </CardAction>
       </CardHeader>
       <CardContent>
         <p>This card has an action button in the top right corner.</p>
       </CardContent>
     </Card>
   );
 }
 ```
 
 ### Size Variants
 
 ```tsx
 import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "laif-ds";
 
 export function SizeVariants() {
   return (
     <div className="flex flex-col gap-8">
       <Card size="sm" className="w-[350px]">
         <CardHeader>
           <CardTitle>Size: Small</CardTitle>
           <CardDescription>Reduced padding (sm)</CardDescription>
         </CardHeader>
         <CardContent>
           <p>This card uses size="sm".</p>
         </CardContent>
       </Card>
 
       <Card size="default" className="w-[350px]">
         <CardHeader>
           <CardTitle>Size: Default</CardTitle>
           <CardDescription>Standard padding (default)</CardDescription>
         </CardHeader>
         <CardContent>
           <p>This card uses size="default".</p>
         </CardContent>
       </Card>
 
       <Card size="lg" className="w-[350px]">
         <CardHeader>
           <CardTitle>Size: Large</CardTitle>
           <CardDescription>Spacious padding (lg)</CardDescription>
         </CardHeader>
         <CardContent>
           <p>This card uses size="lg".</p>
         </CardContent>
       </Card>
 
       <Card size="none" className="w-[350px]">
         <CardHeader className="border-d-border border-b p-4">
           <CardTitle>Size: None</CardTitle>
           <CardDescription>No default padding (none)</CardDescription>
         </CardHeader>
         <CardContent className="p-4">
           <p>This card uses size="none" with custom padding.</p>
         </CardContent>
       </Card>
     </div>
   );
 }
 ```
 
 ---
 
 ## Notes
 
 - **Composability**: Use only the subcomponents you need.
 - **Borders**: Add `border-b`/`border-t` to header/footer for separation.
 - **Action area**: `CardAction` aligns content to the top-right in the header.