Components
Card
Use for structured information blocks, settings panels, and content containers
Card
Card is the main structured container component family.
Import
import {
Card,
CardHeader,
CardTitle,
CardDescription,
CardContent,
CardFooter,
} from "@downcity/ui";Basic Example
import {
Card,
CardHeader,
CardTitle,
CardDescription,
CardContent,
CardFooter,
Button,
} from "@downcity/ui";
export function AgentCard() {
return (
<Card className="max-w-md">
<CardHeader>
<CardTitle>Agent Settings</CardTitle>
<CardDescription>Manage model and execution settings.</CardDescription>
</CardHeader>
<CardContent>Put form fields or summaries here.</CardContent>
<CardFooter className="justify-end">
<Button size="sm">Save</Button>
</CardFooter>
</Card>
);
}Subcomponents
CardCardHeaderCardTitleCardDescriptionCardActionCardContentCardFooter
Sizes
size="default"size="sm"
Usage Notes
- Prefer the full composition instead of dumping everything into
CardContent - Use
CardActionfor top-right auxiliary actions - Use
CardFooterfor the bottom action row