Card

1
function Default() {
2
  const frameworkOptions = [
3
    { label: 'Vite', value: 'vite' },
4
    { label: 'Solid Start', value: 'solid-start' },
5
    { label: 'Tanstack Start', value: 'tanstack-start' },
6
    { label: 'Astro', value: 'astro' },
7
  ]
8

9
  return (
10
    <Card
11
      title="Create project"
12
      description="Deploy your new project in one-click."
13
      footer={
14
        <>
15
          <Button class="w-full" type="submit">
16
            Deploy
17
          </Button>
18
          <div class="text-xs text-muted-foreground m-a flex gap-1 items-center">
19
            <Icon name="i-lucide-circle-alert" class="h-lh shrink-0 size-3" />
20
            <p>This will take a few seconds to complete.</p>
21
          </div>
22
        </>
23
      }
24
      class="max-w-xs w-full"
25
      classes={{ footer: 'flex flex-col gap-3' }}
26
    >
27
      <div class="flex flex-col gap-4">
28
        <FormField label="Name">
29
          <Input placeholder="Name of your project" />
30
        </FormField>
31
        <FormField label="Framework">
32
          <Select options={frameworkOptions} value="vite" />
33
        </FormField>
34
      </div>
35
    </Card>
36
  )
37
}

1
function Sizes() {
2
  return (
3
    <div class="flex gap-2">
4
      <Card
5
        compact
6
        title="Small Card"
7
        description="Compact"
8
        footer={<Button size="sm">Action</Button>}
9
        class="h-fit max-w-xs"
10
      >
11
        <p class="text-sm opacity-85">Compact spacing for dense layouts and sidebars.</p>
12
      </Card>
13

14
      <Card
15
        title="Default Card"
16
        description="Default"
17
        footer={<Button size="sm">Action</Button>}
18
        class="h-fit max-w-xs"
19
      >
20
        <p class="text-sm opacity-85">Standard spacing for normal form and dashboard cards.</p>
21
      </Card>
22
    </div>
23
  )
24
}

1
function WithImage() {
2
  return (
3
    <div class="max-w-sm">
4
      <Card
5
        classes={{ header: 'pb-6' }}
6
        header={
7
          <img
8
            src="https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
9
            alt="Landscape by mymind on Unsplash"
10
            class="rounded-t-2xl w-full aspect-video object-cover brightness-60 grayscale"
11
          />
12
        }
13
        footer={<Button class="w-full">Open</Button>}
14
      >
15
        <h3 class="font-semibold">Beautiful Landscape</h3>
16
        <p class="text-sm text-muted-foreground mt-1">
17
          A compact media card style adapted to the sealed Moraine Card API.
18
        </p>
19
      </Card>
20
    </div>
21
  )
22
}

1
function HeaderAction() {
2
  return (
3
    <div class="w-lg">
4
      <Card
5
        title="Meeting Notes"
6
        description="Transcript summary from the latest client sync."
7
        action={
8
          <Button size="sm" variant="secondary">
9
            Transcribe
10
          </Button>
11
        }
12
        footer={
13
          <div class="flex gap-2 w-full justify-end">
14
            <Button size="sm" variant="outline">
15
              Dismiss
16
            </Button>
17
            <Button size="sm">Save</Button>
18
          </div>
19
        }
20
      >
21
        <ol class="text-sm pl-5 list-decimal opacity-85 flex flex-col gap-1.5">
22
          <li>Dashboard redesign should prioritize mobile layouts.</li>
23
          <li>Timeline target is six weeks with weekly milestones.</li>
24
          <li>Next review meeting is scheduled for Tuesday morning.</li>
25
        </ol>
26
      </Card>
27
    </div>
28
  )
29
}