Card

1import { Button } from "@/components/ui/button"2import {3  Card,4  CardContent,5  CardDescription,6  CardFooter,7  CardHeader,8  CardTitle,9} from "@/components/ui/card"1011export function Example() {12  return (13    <Card className="w-full max-w-sm">14      <CardHeader>15        <CardTitle>Welcome back</CardTitle>16        <CardDescription>17          Sign in with your work email to continue.18        </CardDescription>19      </CardHeader>20      <CardContent>21        <form className="flex flex-col gap-4">22          <div className="flex flex-col gap-1.5">23            <label htmlFor="email" className="text-sm">24              Email25            </label>26            <input27              id="email"28              type="email"29              placeholder="you@company.com"30              className="h-9 w-full rounded-md border border-border bg-transparent px-3 text-sm outline-none"31            />32          </div>33          <div className="flex flex-col gap-1.5">34            <div className="flex items-center justify-between gap-2">35              <label htmlFor="password" className="text-sm">36                Password37              </label>38              <Button variant="link" className="text-xs text-muted-foreground">39                Forgot password?40              </Button>41            </div>42            <input43              id="password"44              type="password"45              className="h-9 w-full rounded-md border border-border bg-transparent px-3 text-sm outline-none"46            />47          </div>48        </form>49      </CardContent>50      <CardFooter className="flex-col gap-3">51        <Button className="w-full">Continue</Button>52        <div className="flex w-full items-center gap-3 text-xs text-muted-foreground">53          <span className="h-px flex-1 bg-border" />54          or55          <span className="h-px flex-1 bg-border" />56        </div>57        <Button variant="outline" className="w-full">58          Continue with Google59        </Button>60      </CardFooter>61    </Card>62  )63}

1import { Button } from "@/components/ui/button"2import {3  Card,4  CardContent,5  CardDescription,6  CardFooter,7  CardHeader,8  CardTitle,9} from "@/components/ui/card"1011export function Example() {12  return (13    <Card size="sm" className="w-full max-w-sm">14      <CardHeader>15        <CardTitle>Scheduled reports</CardTitle>16        <CardDescription>17          Weekly snapshots. No more manual exports.18        </CardDescription>19      </CardHeader>20      <CardContent>21        <ul className="list-disc space-y-1 pl-4 text-sm text-muted-foreground">22          <li>Choose a schedule (daily, or weekly).</li>23          <li>Send to channels or specific teammates.</li>24          <li>Include charts, tables, and key metrics.</li>25        </ul>26      </CardContent>27      <CardFooter className="flex-col gap-2">28        <Button size="sm" className="w-full">29          Set up scheduled reports30        </Button>31        <Button size="sm" variant="outline" className="w-full">32          See what&apos;s new33          <ChevronRightIcon data-icon="inline-end" />34        </Button>35      </CardFooter>36    </Card>37  )38}

1import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"23export function Example() {4  return (5    <Card className="w-full max-w-sm [--card-spacing:1.5rem]">6      <CardHeader>7        <CardTitle>Card Title</CardTitle>8      </CardHeader>9      <CardContent>Content uses the shared spacing token.</CardContent>10    </Card>11  )12}

1import { Button } from "@/components/ui/button"2import {3  Card,4  CardContent,5  CardDescription,6  CardFooter,7  CardHeader,8  CardTitle,9} from "@/components/ui/card"1011export function Example() {12  return (13    <Card className="w-full max-w-sm">14      <CardHeader>15        <CardTitle>Terms of Service</CardTitle>16        <CardDescription>17          Review the terms before accepting the agreement.18        </CardDescription>19      </CardHeader>20      <CardContent className="-mx-[var(--card-spacing)] -mb-[var(--card-spacing)] border-y border-border p-0">21        <div className="show-scrollbar max-h-40 space-y-3 overflow-y-auto px-[var(--card-spacing)] py-3 text-sm text-muted-foreground">22          <p>These terms govern your use of the workspace…</p>23          <p>You are responsible for the content you upload…</p>24          <p>We may update features or limits as the service evolves…</p>25        </div>26      </CardContent>27      <CardFooter className="justify-end gap-2">28        <Button variant="outline">Decline</Button>29        <Button>Accept</Button>30      </CardFooter>31    </Card>32  )33}

1import { Badge } from "@/components/ui/badge"2import { Button } from "@/components/ui/button"3import {4  Card,5  CardDescription,6  CardFooter,7  CardHeader,8  CardTitle,9} from "@/components/ui/card"1011export function Example() {12  return (13    <Card className="relative w-full max-w-sm pt-0">14      <img15        src="/assets/brand/demos/card-cover.png"16        alt="Event cover"17        className="aspect-video w-full object-cover"18      />19      <Badge className="absolute top-3 right-3">Featured</Badge>20      <CardHeader>21        <CardTitle>Design systems meetup</CardTitle>22        <CardDescription>23          A practical talk on component APIs, accessibility, and shipping24          faster.25        </CardDescription>26      </CardHeader>27      <CardFooter>28        <Button className="w-full">View Event</Button>29      </CardFooter>30    </Card>31  )32}

1import { Button } from "@/components/ui/button"2import {3  Card,4  CardAction,5  CardContent,6  CardDescription,7  CardFooter,8  CardHeader,9  CardTitle,10} from "@/components/ui/card"1112export function Example() {13  return (14    <Card className="w-full max-w-sm">15      <CardHeader>16        <CardTitle>Create an account</CardTitle>17        <CardDescription>18          Enter your email to get started with the workspace.19        </CardDescription>20        <CardAction>21          <Button variant="ghost" size="sm">22            Sign in23          </Button>24        </CardAction>25      </CardHeader>26      <CardContent>27        <form className="flex flex-col gap-4">28          <div className="flex flex-col gap-1.5">29            <label htmlFor="name" className="text-sm">30              Name31            </label>32            <input33              id="name"34              type="text"35              placeholder="Alex Rivera"36              className="h-9 w-full rounded-md border border-border bg-transparent px-3 text-sm outline-none"37            />38          </div>39          <div className="flex flex-col gap-1.5">40            <label htmlFor="email" className="text-sm">41              Email42            </label>43            <input44              id="email"45              type="email"46              placeholder="you@company.com"47              className="h-9 w-full rounded-md border border-border bg-transparent px-3 text-sm outline-none"48            />49          </div>50        </form>51      </CardContent>52      <CardFooter>53        <Button className="w-full">Create account</Button>54      </CardFooter>55    </Card>56  )57}

1import { Button } from "@/components/ui/button"2import {3  Card,4  CardDescription,5  CardFooter,6  CardHeader,7  CardTitle,8} from "@/components/ui/card"910export function Example() {11  return (12    <Card className="w-full max-w-md flex-row gap-0 py-0">13      <img14        src="/assets/brand/demos/card-cover.png"15        alt=""16        className="w-28 shrink-0 object-cover sm:w-36"17      />18      <div className="flex min-w-0 flex-1 flex-col gap-[var(--card-spacing)] py-[var(--card-spacing)]">19        <CardHeader>20          <CardTitle>Coastal workshop</CardTitle>21          <CardDescription>22            A half-day session on shipping design systems with less friction.23          </CardDescription>24        </CardHeader>25        <CardFooter>26          <Button size="sm">Register</Button>27        </CardFooter>28      </div>29    </Card>30  )31}

1import { Button } from "@/components/ui/button"2import {3  Card,4  CardContent,5  CardDescription,6  CardHeader,7  CardTitle,8} from "@/components/ui/card"910export function Example() {11  return (12    <Card className="w-full max-w-sm border-dashed bg-transparent">13      <CardHeader>14        <CardTitle>No projects yet</CardTitle>15        <CardDescription>16          Create a project to start collecting feedback and shipping updates.17        </CardDescription>18      </CardHeader>19      <CardContent className="flex justify-end">20        <Button size="sm">21          Create project22        </Button>23      </CardContent>24    </Card>25  )26}

1import { Button } from "@/components/ui/button"2import {3  Card,4  CardDescription,5  CardFooter,6  CardHeader,7  CardTitle,8} from "@/components/ui/card"910export function Example() {11  return (12    <Card className="w-full max-w-sm">13      <CardHeader>14        <CardTitle>Delete workspace</CardTitle>15        <CardDescription>16          This permanently removes projects, members, and billing history. This17          cannot be undone.18        </CardDescription>19      </CardHeader>20      <CardFooter className="justify-end gap-2">21        <Button variant="outline" size="sm">Cancel</Button>22        <Button variant="destructive" size="sm">Delete workspace</Button>23      </CardFooter>24    </Card>25  )26}