Card

import { Card } from "@/components/ui/card";

import { Card } from "@/components/ui/card";

export function Example() {
  return (
    <Card
      title="Heads up"
      description="You can add components to your app using the squad-ui CLI."
    >
      Card content goes here.
    </Card>
  );
}

Card                              (single component — pass content as props)
├── icon={LucideIcon}            (optional — FeaturedIcon above the title)
│   ├── iconColor="brand"         (color token; default "brand")
│   ├── iconVariant="gradient"    (gradient | flat; default "gradient")
│   └── iconSize="lg"             (sm | md | lg | xl | 2xl; default "lg")
├── title={<ReactNode>}           (renders into the header title slot)
├── description={<ReactNode>}     (multi-line / JSX is fine)
├── action={<Button … />}         (optional — top-right of the header)
├── footer={<ReactNode>}          (optional — bordered footer strip)
├── type="default" | "comment" | "image-card" | "toolbar"
├── count={3}                      (type="toolbar" — the pill beside the title)
├── countColor="warning"           (type="toolbar" — tints that pill)
├── link={{ label, href }}         (type="toolbar" — link button + right arrow, band's right end)
├── linkAs={Link}                  (type="toolbar" — your router's link; default <a>)
├── header="band" | "label"        (type="toolbar" — shaded band, or the project viewer's quiet label)
├── iconMuted                      (type="toolbar" — the header icon in the muted colour, for an empty card)
├── collapsible / open / onOpenChange (type="toolbar" — the band folds the body, caret on the right)
├── headerless / headerProps       (type="toolbar" — no band / props for the band)
├── bodyClassName="…"              (type="toolbar" — the padded body's classes)
├── image={url | <Image/>}         (type="image-card" — full-bleed media at the top)
├── imageAlt="…"                   (alt text when image is a URL)
├── ratio="W:H" | "W/H"            (type="image-card" — aspect ratio of the WHOLE card; image fills the remaining space)
├── imageRatio="W:H" | "W/H"       (type="image-card" — aspect ratio of just the image; default "16:9"; ignored when ratio is set)
├── href="…"                       (type="image-card" — makes the whole card a clickable <a>; pair with target / rel)
├── onClick={fn}                   (makes the whole card interactive — cursor-pointer, hover shadow, focus ring, keyboard activation)
├── tag={"New" | <Badge …/>}       (type="image-card" — overlay badge in the top-left of the image)
├── showCornerTab                 (pins a corner tab tinted to match the card outline)
├── cornerTabContent={text | <Comp/>}  (tab contents — string or any ReactNode)
├── cornerTabPosition="top-right" (top-right | top-left | bottom-right | bottom-left)
├── cornerTabClassName="…"        (override the tab's padding / text / background)
├── cornerTabIcon={<Icon/>}       (collapsed-state glyph)
├── cornerTabExpandOnHover        (square → label on card hover)
├── onCornerTabClick={fn}         (tab becomes a <button>)
├── children                      (auto-wrapped in <CardContent> unless contentWrapper="none")
├── size="default" | "sm"
└── contentWrapper="card-content" | "none"

Need a non-standard layout (e.g. an image-only card, custom header grid, or
two stacked content sections)? The slot exports — CardHeader, CardTitle,
CardDescription, CardAction, CardContent, CardFooter — are still exported
from the same file as an escape hatch. Drop the prop API for that one card
and compose the slots directly.