Downcity
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

  • Card
  • CardHeader
  • CardTitle
  • CardDescription
  • CardAction
  • CardContent
  • CardFooter

Sizes

  • size="default"
  • size="sm"

Usage Notes

  • Prefer the full composition instead of dumping everything into CardContent
  • Use CardAction for top-right auxiliary actions
  • Use CardFooter for the bottom action row