Card

import { Button } from "~/components/ui/base/button";
import { Card } from "~/components/ui/base/card";

<Card.Root class="max-w-md">
  <Card.Header>
    <Card.Title>Notifications</Card.Title>
    <Card.Description>
      A summary of changes over the past week.
    </Card.Description>
  </Card.Header>
  <Card.Content>
    <p class="text-body text-secondary-label">
      You have 3 unread messages and 1 scheduled event.
    </p>
  </Card.Content>
  <Card.Footer class="gap-2">
    <Button variant="secondary" size="sm">
      Later
    </Button>
    <Button size="sm">Open</Button>
  </Card.Footer>
</Card.Root>

import { Button } from "~/components/ui/base/button";
import { Card } from "~/components/ui/base/card";

<Card.Root class="max-w-md">
  <Card.Header>
    <Card.Title>Account</Card.Title>
    <Card.Description>Sign in with email and password.</Card.Description>
    <Card.Action>
      <Button
        variant="secondary"
        size="sm"
        class="border-0 bg-transparent px-2 text-link shadow-none hover:bg-transparent hover:underline"
      >
        Sign up
      </Button>
    </Card.Action>
  </Card.Header>
  <Card.Content>
    <p class="text-body text-secondary-label">… form …</p>
  </Card.Content>
</Card.Root>

import { Badge } from "~/components/ui/base/badge";
import { Button } from "~/components/ui/base/button";
import { Card } from "~/components/ui/base/card";

<Card.Root class="max-w-sm">
  <Card.Media variant="image">
    <img
      src="https://picsum.photos/seed/qcard/640/360"
      width={640}
      height={360}
      alt="Event illustration"
    />
  </Card.Media>
  <Card.Header>
    <Card.Title>Design systems meetup</Card.Title>
    <Card.Description>
      Components, accessibility and faster delivery.
    </Card.Description>
    <Card.Action>
      <Badge variant="secondary">Featured</Badge>
    </Card.Action>
  </Card.Header>
  <Card.Footer>
    <Button class="w-full">Event details</Button>
  </Card.Footer>
</Card.Root>

import { Card } from "~/components/ui/base/card";

<Card.Root class="max-w-sm">
  <Card.Content class="pt-6">
    <p class="text-body text-label">
      A content-only card — custom padding via{" "}
      <code class="text-caption-1">class</code> na{" "}
      <code class="text-caption-1">Card.Content</code>.
    </p>
  </Card.Content>
</Card.Root>