Card

헤더, 콘텐츠, 푸터가 있는 카드를 표시합니다.

계정에 로그인

계정에 로그인하려면 아래에 이메일을 입력하세요

<script lang="ts">
  import { Button } from "$lib/components/ui/button/index.js";
  import { Label } from "$lib/components/ui/label/index.js";
  import { Input } from "$lib/components/ui/input/index.js";
  import * as Card from "$lib/components/ui/card/index.js";
</script>
 
<Card.Root class="-my-4 w-full max-w-sm">
  <Card.Header>
    <Card.Title>계정에 로그인</Card.Title>
    <Card.Description
      >계정에 로그인하려면 아래에 이메일을 입력하세요</Card.Description
    >
    <Card.Action>
      <Button variant="link">회원가입</Button>
    </Card.Action>
  </Card.Header>
  <Card.Content>
    <form>
      <div class="flex flex-col gap-6">
        <div class="grid gap-2">
          <Label for="email">이메일</Label>
          <Input id="email" type="email" placeholder="m@example.com" required />
        </div>
        <div class="grid gap-2">
          <div class="flex items-center">
            <Label for="password">비밀번호</Label>
            <a
              href="##"
              class="ms-auto inline-block text-sm underline-offset-4 hover:underline"
            >
              비밀번호를 잊으셨나요?
            </a>
          </div>
          <Input id="password" type="password" required />
        </div>
      </div>
    </form>
  </Card.Content>
  <Card.Footer class="flex-col gap-2">
    <Button type="submit" class="w-full">로그인</Button>
    <Button variant="outline" class="w-full">Google로 로그인</Button>
  </Card.Footer>
</Card.Root>

설치

pnpm dlx shadcn-svelte@latest add card

npx shadcn-svelte@latest add card

npx shadcn-svelte@latest add card

bun x shadcn-svelte@latest add card

다음 코드를 복사하여 프로젝트에 붙여넣으세요.

<script lang="ts">
  import { cn, type WithElementRef } from "$lib/utils.js";
  import type { HTMLAttributes } from "svelte/elements";

  let {
    ref = $bindable(null),
    class: className,
    children,
    ...restProps
  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
</script>

<div
  bind:this={ref}
  data-slot="card-action"
  class={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
  {...restProps}
>
  {@render children?.()}
</div>

사용법

<script lang="ts">
  import * as Card from "$lib/components/ui/card/index.js";
</script>

<Card.Root>
  <Card.Header>
    <Card.Title>카드 제목</Card.Title>
    <Card.Description>카드 설명</Card.Description>
  </Card.Header>
  <Card.Content>
    <p>카드 내용</p>
  </Card.Content>
  <Card.Footer>
    <p>카드 푸터</p>
  </Card.Footer>
</Card.Root>

예제

계정에 로그인

계정에 로그인하려면 아래에 이메일을 입력하세요

<script lang="ts">
  import { Button } from "$lib/components/ui/button/index.js";
  import { Label } from "$lib/components/ui/label/index.js";
  import { Input } from "$lib/components/ui/input/index.js";
  import * as Card from "$lib/components/ui/card/index.js";
</script>
 
<Card.Root class="-my-4 w-full max-w-sm">
  <Card.Header>
    <Card.Title>계정에 로그인</Card.Title>
    <Card.Description
      >계정에 로그인하려면 아래에 이메일을 입력하세요</Card.Description
    >
    <Card.Action>
      <Button variant="link">회원가입</Button>
    </Card.Action>
  </Card.Header>
  <Card.Content>
    <form>
      <div class="flex flex-col gap-6">
        <div class="grid gap-2">
          <Label for="email">이메일</Label>
          <Input id="email" type="email" placeholder="m@example.com" required />
        </div>
        <div class="grid gap-2">
          <div class="flex items-center">
            <Label for="password">비밀번호</Label>
            <a
              href="##"
              class="ms-auto inline-block text-sm underline-offset-4 hover:underline"
            >
              비밀번호를 잊으셨나요?
            </a>
          </div>
          <Input id="password" type="password" required />
        </div>
      </div>
    </form>
  </Card.Content>
  <Card.Footer class="flex-col gap-2">
    <Button type="submit" class="w-full">로그인</Button>
    <Button variant="outline" class="w-full">Google로 로그인</Button>
  </Card.Footer>
</Card.Root>

Calendar Carousel