{"name":"card","title":"Card","description":"Displays a card with header, content, and footer.","installCommand":"bunx marko-ui add card -y","usageTags":"<Card>, <CardHeader>, <CardTitle>, <CardDescription>, <CardAction>, <CardContent>, <CardFooter>","importSnippet":"import Card from \"@/components/ui/card/card.marko\";\nimport CardHeader from \"@/components/ui/card/header.marko\";\nimport CardTitle from \"@/components/ui/card/title.marko\";\nimport CardDescription from \"@/components/ui/card/description.marko\";\nimport CardAction from \"@/components/ui/card/action.marko\";\nimport CardContent from \"@/components/ui/card/content.marko\";\nimport CardFooter from \"@/components/ui/card/footer.marko\";","usageSnippet":"<Card>\n  <CardHeader>\n    <CardTitle>Card Title</CardTitle>\n    <CardDescription>Card Description</CardDescription>\n    <CardAction>Card Action</CardAction>\n  </CardHeader>\n  <CardContent>\n    <p>Card Content</p>\n  </CardContent>\n  <CardFooter>\n    <p>Card Footer</p>\n  </CardFooter>\n</Card>","tags":["Card","CardAction","CardContent","CardDescription","CardFooter","CardHeader","CardTitle"],"parts":[],"props":[{"name":"size","type":"'default' | 'sm'","required":false}],"events":[],"keyboard":[],"accessibilityNotes":[],"examples":[{"id":"card-demo","title":"Login form","source":"import Card from \"@marko-ui/shadcn/ui/card/card.marko\";\nimport CardHeader from \"@marko-ui/shadcn/ui/card/header.marko\";\nimport CardTitle from \"@marko-ui/shadcn/ui/card/title.marko\";\nimport CardDescription from \"@marko-ui/shadcn/ui/card/description.marko\";\nimport CardAction from \"@marko-ui/shadcn/ui/card/action.marko\";\nimport CardContent from \"@marko-ui/shadcn/ui/card/content.marko\";\nimport CardFooter from \"@marko-ui/shadcn/ui/card/footer.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport TextInput from \"@marko-ui/shadcn/ui/input/input.marko\";\nimport Label from \"@marko-ui/shadcn/ui/label/label.marko\";\n\n<Card class=\"w-full max-w-sm\">\n  <CardHeader>\n    <CardTitle>Login to your account</CardTitle>\n    <CardDescription>Enter your email below to login to your account</CardDescription>\n    <CardAction>\n      <Button type=\"button\" variant=\"link\">Sign Up</Button>\n    </CardAction>\n  </CardHeader>\n  <CardContent>\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"grid gap-2\">\n        <Label for=\"card-demo-email\">Email</Label>\n        <TextInput id=\"card-demo-email\" type=\"email\" placeholder=\"m@example.com\" required/>\n      </div>\n      <div class=\"grid gap-2\">\n        <div class=\"flex items-center\">\n          <Label for=\"card-demo-password\">Password</Label>\n          <a href=\"#\" class=\"ml-auto inline-block text-sm underline-offset-4 hover:underline\">\n            Forgot your password?\n          </a>\n        </div>\n        <TextInput id=\"card-demo-password\" type=\"password\" required/>\n      </div>\n    </div>\n  </CardContent>\n  <CardFooter class=\"flex-col gap-2\">\n    <Button type=\"submit\" class=\"w-full\">Login</Button>\n    <Button type=\"button\" variant=\"outline\" class=\"w-full\">Login with Google</Button>\n  </CardFooter>\n</Card>","description":"A card built from a header, content, and footer holding a login form.","essential":true},{"id":"card-small","title":"Size","source":"import Card from \"@marko-ui/shadcn/ui/card/card.marko\";\nimport CardHeader from \"@marko-ui/shadcn/ui/card/header.marko\";\nimport CardTitle from \"@marko-ui/shadcn/ui/card/title.marko\";\nimport CardDescription from \"@marko-ui/shadcn/ui/card/description.marko\";\nimport CardContent from \"@marko-ui/shadcn/ui/card/content.marko\";\nimport CardFooter from \"@marko-ui/shadcn/ui/card/footer.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport Icon from \"@marko-ui/shadcn/ui/icon/icon.marko\";\n\n<Card size=\"sm\" class=\"mx-auto w-full max-w-xs\">\n  <CardHeader>\n    <CardTitle>Scheduled reports</CardTitle>\n    <CardDescription>Weekly snapshots. No more manual exports.</CardDescription>\n  </CardHeader>\n  <CardContent>\n    <ul class=\"grid gap-2 py-2 text-sm\">\n      <li class=\"flex gap-2\">\n        <Icon name=\"ChevronRightIcon\" class=\"mt-0.5 size-4 shrink-0 text-muted-foreground\"/>\n        <span>Choose a schedule (daily, or weekly).</span>\n      </li>\n      <li class=\"flex gap-2\">\n        <Icon name=\"ChevronRightIcon\" class=\"mt-0.5 size-4 shrink-0 text-muted-foreground\"/>\n        <span>Send to channels or specific teammates.</span>\n      </li>\n      <li class=\"flex gap-2\">\n        <Icon name=\"ChevronRightIcon\" class=\"mt-0.5 size-4 shrink-0 text-muted-foreground\"/>\n        <span>Include charts, tables, and key metrics.</span>\n      </li>\n    </ul>\n  </CardContent>\n  <CardFooter class=\"flex-col gap-2\">\n    <Button type=\"button\" size=\"sm\" class=\"w-full\">Set up scheduled reports</Button>\n    <Button type=\"button\" variant=\"outline\" size=\"sm\" class=\"w-full\">See what's new</Button>\n  </CardFooter>\n</Card>","description":"Use `size=\"sm\"` on `Card` for smaller spacing between sections."},{"id":"card-spacing","title":"Spacing","source":"import Card from \"@marko-ui/shadcn/ui/card/card.marko\";\nimport CardHeader from \"@marko-ui/shadcn/ui/card/header.marko\";\nimport CardTitle from \"@marko-ui/shadcn/ui/card/title.marko\";\nimport CardDescription from \"@marko-ui/shadcn/ui/card/description.marko\";\nimport CardAction from \"@marko-ui/shadcn/ui/card/action.marko\";\nimport CardContent from \"@marko-ui/shadcn/ui/card/content.marko\";\nimport CardFooter from \"@marko-ui/shadcn/ui/card/footer.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport TextInput from \"@marko-ui/shadcn/ui/input/input.marko\";\nimport Label from \"@marko-ui/shadcn/ui/label/label.marko\";\nimport ToggleGroup from \"@marko-ui/shadcn/ui/toggle-group/toggle-group.marko\";\n\nstatic const SPACING_OPTIONS = [\n  { value: \"4\", label: \"16px\", class: \"[--card-spacing:--spacing(4)]\" },\n  { value: \"5\", label: \"20px\", class: \"[--card-spacing:--spacing(5)]\" },\n  { value: \"6\", label: \"24px\", class: \"[--card-spacing:--spacing(6)]\" },\n  { value: \"8\", label: \"32px\", class: \"[--card-spacing:--spacing(8)]\" },\n];\n\n<let/spacing=\"4\"/>\n<const/selectedSpacing=SPACING_OPTIONS.find((option) => option.value === spacing)/>\n\n<div class=\"mx-auto grid w-full max-w-sm gap-4\">\n  <ToggleGroup\n    items=SPACING_OPTIONS\n    value=[spacing]\n    valueChange=(next) => { if (next[0]) spacing = next[0]; }\n    variant=\"outline\"\n    size=\"sm\"\n    class=\"justify-center\"\n  />\n  <Card class=selectedSpacing?.class>\n    <CardHeader>\n      <CardTitle>Login to your account</CardTitle>\n      <CardDescription>Enter your email below to login to your account</CardDescription>\n      <CardAction>\n        <Button type=\"button\" variant=\"link\">Sign Up</Button>\n      </CardAction>\n    </CardHeader>\n    <CardContent>\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"grid gap-2\">\n          <Label for=\"card-spacing-email\">Email</Label>\n          <TextInput id=\"card-spacing-email\" type=\"email\" placeholder=\"m@example.com\" required/>\n        </div>\n        <div class=\"grid gap-2\">\n          <div class=\"flex items-center\">\n            <Label for=\"card-spacing-password\">Password</Label>\n            <a href=\"#\" class=\"ml-auto inline-block text-sm underline-offset-4 hover:underline\">\n              Forgot your password?\n            </a>\n          </div>\n          <TextInput id=\"card-spacing-password\" type=\"password\" required/>\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter class=\"flex-col gap-2\">\n      <Button type=\"submit\" class=\"w-full\">Login</Button>\n      <Button type=\"button\" variant=\"outline\" class=\"w-full\">Login with Google</Button>\n    </CardFooter>\n  </Card>\n</div>","description":"Set the `--card-spacing` CSS variable to control the gap between sections and the inset of card parts, independent of `size`."},{"id":"card-edge-to-edge","title":"Edge to edge","source":"import Card from \"@marko-ui/shadcn/ui/card/card.marko\";\nimport CardHeader from \"@marko-ui/shadcn/ui/card/header.marko\";\nimport CardTitle from \"@marko-ui/shadcn/ui/card/title.marko\";\nimport CardDescription from \"@marko-ui/shadcn/ui/card/description.marko\";\nimport CardContent from \"@marko-ui/shadcn/ui/card/content.marko\";\nimport CardFooter from \"@marko-ui/shadcn/ui/card/footer.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n<Card class=\"mx-auto w-full max-w-sm\">\n  <CardHeader>\n    <CardTitle>Terms of Service</CardTitle>\n    <CardDescription>Review the terms before accepting the agreement.</CardDescription>\n  </CardHeader>\n  <CardContent class=\"-mb-(--card-spacing)\">\n\n    <div\n      tabindex=\"0\"\n      class=\"-mx-(--card-spacing) max-h-48 space-y-4 overflow-y-scroll border-t bg-muted/50 px-(--card-spacing) py-4 text-sm leading-relaxed\"\n    >\n      <p>\n        These terms govern your use of the workspace, including access to shared documents, project files, and\n        collaboration tools.\n      </p>\n      <p>\n        You are responsible for the content you upload and for ensuring that your team has the appropriate\n        permissions to view or edit it.\n      </p>\n      <p>\n        We may update features or limits as the service evolves. When those changes materially affect your\n        workflow, we will notify your workspace administrators.\n      </p>\n      <p>\n        By continuing, you agree to keep your account credentials secure and to follow your organization's\n        acceptable use policies.\n      </p>\n    </div>\n  </CardContent>\n  <CardFooter class=\"justify-end gap-2\">\n    <Button type=\"button\" variant=\"outline\">Decline</Button>\n    <Button type=\"button\">Accept</Button>\n  </CardFooter>\n</Card>","description":"Use `-mx-(--card-spacing)` on content to bleed it to the card's edges while keeping it aligned with the inset; add `-mb-(--card-spacing)` on `CardContent` when edge-to-edge content sits directly above a footer."},{"id":"card-image","title":"Image","source":"import Card from \"@marko-ui/shadcn/ui/card/card.marko\";\nimport CardHeader from \"@marko-ui/shadcn/ui/card/header.marko\";\nimport CardTitle from \"@marko-ui/shadcn/ui/card/title.marko\";\nimport CardDescription from \"@marko-ui/shadcn/ui/card/description.marko\";\nimport CardAction from \"@marko-ui/shadcn/ui/card/action.marko\";\nimport CardFooter from \"@marko-ui/shadcn/ui/card/footer.marko\";\nimport Badge from \"@marko-ui/shadcn/ui/badge/badge.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n<Card class=\"relative mx-auto w-full max-w-sm pt-0\">\n  <div class=\"absolute inset-0 z-30 aspect-video bg-black/35\"></div>\n  <img\n    src=\"https://avatar.vercel.sh/shadcn1\"\n    alt=\"Event cover\"\n    class=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale dark:brightness-40\"\n  />\n  <CardHeader>\n    <CardAction>\n      <Badge variant=\"secondary\">Featured</Badge>\n    </CardAction>\n    <CardTitle>Design systems meetup</CardTitle>\n    <CardDescription>\n      A practical talk on component APIs, accessibility, and shipping faster.\n    </CardDescription>\n  </CardHeader>\n  <CardFooter>\n    <Button type=\"button\" class=\"w-full\">View Event</Button>\n  </CardFooter>\n</Card>","description":"Place an `img` before `CardHeader` (with `pt-0` on `Card`) to create a card with a cover image."},{"id":"card-rtl","title":"RTL","source":"import Card from \"@marko-ui/shadcn/ui/card/card.marko\";\nimport CardHeader from \"@marko-ui/shadcn/ui/card/header.marko\";\nimport CardTitle from \"@marko-ui/shadcn/ui/card/title.marko\";\nimport CardDescription from \"@marko-ui/shadcn/ui/card/description.marko\";\nimport CardAction from \"@marko-ui/shadcn/ui/card/action.marko\";\nimport CardContent from \"@marko-ui/shadcn/ui/card/content.marko\";\nimport CardFooter from \"@marko-ui/shadcn/ui/card/footer.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport TextInput from \"@marko-ui/shadcn/ui/input/input.marko\";\nimport Label from \"@marko-ui/shadcn/ui/label/label.marko\";\n\n<Card class=\"w-full max-w-sm\" dir=\"rtl\">\n  <CardHeader>\n    <CardTitle>تسجيل الدخول إلى حسابك</CardTitle>\n    <CardDescription>أدخل بريدك الإلكتروني أدناه لتسجيل الدخول إلى حسابك</CardDescription>\n    <CardAction>\n      <Button type=\"button\" variant=\"link\">إنشاء حساب</Button>\n    </CardAction>\n  </CardHeader>\n  <CardContent>\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"grid gap-2\">\n        <Label for=\"card-rtl-email\">البريد الإلكتروني</Label>\n        <TextInput id=\"card-rtl-email\" type=\"email\" placeholder=\"m@example.com\" required/>\n      </div>\n      <div class=\"grid gap-2\">\n        <div class=\"flex items-center\">\n          <Label for=\"card-rtl-password\">كلمة المرور</Label>\n          <a href=\"#\" class=\"ms-auto inline-block text-sm underline-offset-4 hover:underline\">\n            نسيت كلمة المرور؟\n          </a>\n        </div>\n        <TextInput id=\"card-rtl-password\" type=\"password\" required/>\n      </div>\n    </div>\n  </CardContent>\n  <CardFooter class=\"flex-col gap-2\">\n    <Button type=\"submit\" class=\"w-full\">تسجيل الدخول</Button>\n    <Button type=\"button\" variant=\"outline\" class=\"w-full\">تسجيل الدخول باستخدام Google</Button>\n  </CardFooter>\n</Card>","description":"Card and its parts restyle correctly for right-to-left layouts via `dir=\"rtl\"`."},{"id":"card-full-composition","title":"Full example","source":"import Card from \"@marko-ui/shadcn/ui/card/card.marko\";\nimport CardHeader from \"@marko-ui/shadcn/ui/card/header.marko\";\nimport CardTitle from \"@marko-ui/shadcn/ui/card/title.marko\";\nimport CardDescription from \"@marko-ui/shadcn/ui/card/description.marko\";\nimport CardAction from \"@marko-ui/shadcn/ui/card/action.marko\";\nimport CardContent from \"@marko-ui/shadcn/ui/card/content.marko\";\nimport CardFooter from \"@marko-ui/shadcn/ui/card/footer.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n<Card class=\"w-full max-w-sm\">\n  <CardHeader>\n    <CardTitle>Card Title</CardTitle>\n    <CardDescription>Card Description</CardDescription>\n    <CardAction>\n      <Button type=\"button\" variant=\"ghost\" size=\"sm\">Card Action</Button>\n    </CardAction>\n  </CardHeader>\n  <CardContent>\n    <p>Card Content</p>\n  </CardContent>\n  <CardFooter>\n    <p>Card Footer</p>\n  </CardFooter>\n</Card>","description":"The full part list — `CardHeader`, `CardTitle`, `CardDescription`, `CardAction`, `CardContent`, `CardFooter` — assembled together."},{"id":"card-action","title":"With action","source":"import Card from \"@marko-ui/shadcn/ui/card/card.marko\";\nimport CardHeader from \"@marko-ui/shadcn/ui/card/header.marko\";\nimport CardTitle from \"@marko-ui/shadcn/ui/card/title.marko\";\nimport CardDescription from \"@marko-ui/shadcn/ui/card/description.marko\";\nimport CardAction from \"@marko-ui/shadcn/ui/card/action.marko\";\nimport CardContent from \"@marko-ui/shadcn/ui/card/content.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n<Card class=\"w-full max-w-sm\">\n  <CardHeader>\n    <CardTitle>Notifications</CardTitle>\n    <CardDescription>You have 3 unread messages.</CardDescription>\n    <CardAction>\n      <Button type=\"button\" variant=\"ghost\" size=\"sm\">Mark all read</Button>\n    </CardAction>\n  </CardHeader>\n  <CardContent>\n    <p>Your teammate commented on the \"Q3 Roadmap\" document.</p>\n  </CardContent>\n</Card>","description":"`CardAction` places content in the top-right of the header, such as a button."},{"id":"card-border-footer","title":"With border","source":"import Card from \"@marko-ui/shadcn/ui/card/card.marko\";\nimport CardHeader from \"@marko-ui/shadcn/ui/card/header.marko\";\nimport CardTitle from \"@marko-ui/shadcn/ui/card/title.marko\";\nimport CardDescription from \"@marko-ui/shadcn/ui/card/description.marko\";\nimport CardContent from \"@marko-ui/shadcn/ui/card/content.marko\";\nimport CardFooter from \"@marko-ui/shadcn/ui/card/footer.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n<Card class=\"w-full max-w-sm\">\n  <CardHeader class=\"border-b\">\n    <CardTitle>Payment method</CardTitle>\n    <CardDescription>Add a new payment method to your account.</CardDescription>\n  </CardHeader>\n  <CardContent>\n    <p>Card details form would go here.</p>\n  </CardContent>\n  <CardFooter class=\"border-t\">\n    <Button type=\"button\" class=\"w-full\">Save card</Button>\n  </CardFooter>\n</Card>","description":"Add `border-b` to `CardHeader` or `border-t` to `CardFooter` to separate sections."},{"id":"card-content-only","title":"Content only","source":"import Card from \"@marko-ui/shadcn/ui/card/card.marko\";\nimport CardContent from \"@marko-ui/shadcn/ui/card/content.marko\";\n\n<Card class=\"w-full max-w-sm\">\n  <CardContent>\n    <p>A minimal card with only content, no header or footer.</p>\n  </CardContent>\n</Card>","description":"A minimal card with only `CardContent`, no header or footer."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","nativeAttributes":"div","subcomponents":[{"name":"action","props":[],"nativeAttributes":"div"},{"name":"content","props":[],"nativeAttributes":"div"},{"name":"description","props":[],"nativeAttributes":"div"},{"name":"footer","props":[],"nativeAttributes":"div"},{"name":"header","props":[],"nativeAttributes":"div"},{"name":"title","props":[],"nativeAttributes":"div"}]}