Card

<Card className="w-[340px]">
  <CardHeader>
    <CardTitle>Create project</CardTitle>
    <CardDescription>Deploy your new project in one click.</CardDescription>
  </CardHeader>
  <CardContent className="flex flex-col gap-4">
    <Field>
      <FieldLabel>Name</FieldLabel>
      <FieldControl><Input placeholder="Acme Inc." /></FieldControl>
    </Field>
    <Field>
      <FieldLabel>Framework</FieldLabel>
      <FieldControl><Input placeholder="Search…" /></FieldControl>
    </Field>
  </CardContent>
  <CardFooter>
    <Button variant="outline">Cancel</Button>
    <Button>Save</Button>
  </CardFooter>
</Card>

<Card className="w-[340px]">
  <CardHeader>
    <CardTitle>Total revenue</CardTitle>
    <CardDescription>+20.1% from last month</CardDescription>
  </CardHeader>
</Card>

<Card className="w-[340px]">
  <CardContent className="pt-6">
    A quiet surface for inline content. No chrome,
    just the border + subtle shadow.
  </CardContent>
</Card>

<Card className="w-[340px]">
  <CardHeader>
    <CardTitle>Invite members</CardTitle>
    <CardDescription>Add 3 more to reach plan limit.</CardDescription>
  </CardHeader>
  <CardFooter className="justify-end">
    <Button variant="outline">Later</Button>
    <Button>Invite</Button>
  </CardFooter>
</Card>

<Card className="w-[360px]">
  <CardMedia className="aspect-video">
    <img src="/cover.jpg" alt="" />
  </CardMedia>
  <CardHeader>
    <div className="flex items-start justify-between gap-3">
      <div className="flex flex-col gap-1.5">
        <CardTitle>Design systems meetup</CardTitle>
        <CardDescription>
          A practical talk on component APIs, accessibility, and shipping faster.
        </CardDescription>
      </div>
      <span className="shrink-0 rounded-full bg-muted px-2.5 py-0.5 text-xs font-medium">
        Featured
      </span>
    </div>
  </CardHeader>
  <CardFooter>
    <Button className="w-full">View Event</Button>
  </CardFooter>
</Card>

<Card className="w-[440px]">
  <CardHeader>
    <CardTitle>Verification</CardTitle>
    <CardDescription>
      If you have an account, we have sent a code to hey@tidal.com. Enter it below.
    </CardDescription>
  </CardHeader>
  <CardContent>
    <Input placeholder="• • • • • •" className="text-center tracking-[0.5em]" />
  </CardContent>
  <CardFooter className="justify-between">
    <Button variant="ghost">← Back</Button>
    <span className="whitespace-nowrap text-muted-foreground">
      Don't have an account? <a className="underline underline-offset-2" href="#">Sign Up</a>
    </span>
  </CardFooter>
</Card>

<Card className="w-[400px]">
  <CardHeader>
    <CardTitle>Payment Method</CardTitle>
    <CardDescription>Add a new payment method to your account.</CardDescription>
  </CardHeader>
  <CardContent className="flex flex-col gap-4">
    <div className="grid grid-cols-3 gap-2">
      <Button variant="outline">Card</Button>
      <Button variant="ghost">Paypal</Button>
      <Button variant="ghost">Apple</Button>
    </div>
    <Field><FieldLabel>Name</FieldLabel><FieldControl><Input placeholder="First Last" /></FieldControl></Field>
    <Field><FieldLabel>Card number</FieldLabel><FieldControl><Input placeholder="1234 5678 9012 3456" /></FieldControl></Field>
    <div className="grid grid-cols-3 gap-3">
      <Field><FieldLabel>Expires</FieldLabel><FieldControl><Input placeholder="MM" /></FieldControl></Field>
      <Field><FieldLabel>Year</FieldLabel><FieldControl><Input placeholder="YYYY" /></FieldControl></Field>
      <Field><FieldLabel>CVC</FieldLabel><FieldControl><Input placeholder="•••" /></FieldControl></Field>
    </div>
  </CardContent>
  <CardFooter>
    <Button className="w-full">Continue</Button>
  </CardFooter>
</Card>

<Card className="w-[340px]">
  <CardHeader>
    <CardTitle>Design systems meetup</CardTitle>
    <CardDescription>A practical talk on component APIs.</CardDescription>
  </CardHeader>
  <CardFooter variant="outlined">
    <Button className="w-full">View Event</Button>
  </CardFooter>
</Card>

<>
  <Card align="left" className="w-[260px]">
    <CardHeader>
      <CardTitle>Left (default)</CardTitle>
      <CardDescription>All slots align left.</CardDescription>
    </CardHeader>
    <CardFooter><Button>OK</Button></CardFooter>
  </Card>
  <Card align="center" className="w-[260px]">
    <CardHeader>
      <CardTitle>Centered</CardTitle>
      <CardDescription>Header, content, and footer all center.</CardDescription>
    </CardHeader>
    <CardFooter><Button>OK</Button></CardFooter>
  </Card>
</>

<>
  <Card padding="lg" className="w-[260px]">
    <CardHeader>
      <CardTitle>Large (default)</CardTitle>
      <CardDescription>24px padding</CardDescription>
    </CardHeader>
    <CardFooter><Button>OK</Button></CardFooter>
  </Card>
  <Card padding="sm" className="w-[260px]">
    <CardHeader>
      <CardTitle>Small</CardTitle>
      <CardDescription>16px padding</CardDescription>
    </CardHeader>
    <CardFooter><Button>OK</Button></CardFooter>
  </Card>
</>

<>
  <Card className="w-[200px]">
    <CardHeader>
      <CardTitle>Flat (default)</CardTitle>
      <CardDescription>elevation=0</CardDescription>
    </CardHeader>
  </Card>
  <Card elevation={1} className="w-[200px]">
    <CardHeader>
      <CardTitle>Raised</CardTitle>
      <CardDescription>elevation=1</CardDescription>
    </CardHeader>
  </Card>
  <Card elevation={2} className="w-[200px]">
    <CardHeader>
      <CardTitle>Floating</CardTitle>
      <CardDescription>elevation=2</CardDescription>
    </CardHeader>
  </Card>
</>