Card

<link rel="preload" as="image" href="/media/avatars/1.png" /><link
  rel="preload"
  as="image"
  href="/media/avatars/2.png"
/><link rel="preload" as="image" href="/media/avatars/3.png" /><link
  rel="preload"
  as="image"
  href="/media/avatars/4.png"
/><link rel="preload" as="image" href="/media/avatars/5.png" />
<div class="kt-card w-[400px]">
  <div class="kt-card-header">
    <div class="kt-card-heading">
      <h2 class="kt-card-title">Recent Users</h2>
    </div>
    <div class="kt-card-toolbar">
      <button type="button" class="kt-btn kt-btn-xs kt-btn-outline kt-btn-icon">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-settings"
          aria-hidden="true"
        >
          <path
            d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"
          ></path>
          <circle cx="12" cy="12" r="3"></circle>
        </svg>
      </button>
    </div>
  </div>
  <div class="kt-card-content py-1">
    <div
      class="flex items-center justify-between gap-2 py-2 border-b border-border border-dashed last:border-none"
    >
      <div class="flex items-center gap-3">
        <div class="kt-avatar size-8">
          <div class="kt-avatar-image">
            <img src="/media/avatars/1.png" alt="Kathryn Campbell" />
          </div>
        </div>
        <div>
          <a
            href="#"
            class="text-sm font-medium text-foreground hover:text-primary"
            >Kathryn Campbell</a
          >
          <div class="text-sm font-normal text-muted-foreground">
            kathryn@apple.com
          </div>
        </div>
      </div>
      <span class="kt-badge kt-badge-outline kt-badge-primary">Active</span>
    </div>
    <div
      class="flex items-center justify-between gap-2 py-2 border-b border-border border-dashed last:border-none"
    >
      <div class="flex items-center gap-3">
        <div class="kt-avatar size-8">
          <div class="kt-avatar-image">
            <img src="/media/avatars/2.png" alt="Robert Smith" />
          </div>
        </div>
        <div>
          <a
            href="#"
            class="text-sm font-medium text-foreground hover:text-primary"
            >Robert Smith</a
          >
          <div class="text-sm font-normal text-muted-foreground">
            robert@openai.com
          </div>
        </div>
      </div>
      <span class="kt-badge kt-badge-outline kt-badge-secondary">Inactive</span>
    </div>
    <div
      class="flex items-center justify-between gap-2 py-2 border-b border-border border-dashed last:border-none"
    >
      <div class="flex items-center gap-3">
        <div class="kt-avatar size-8">
          <div class="kt-avatar-image">
            <img src="/media/avatars/3.png" alt="Sophia Johnson" />
          </div>
        </div>
        <div>
          <a
            href="#"
            class="text-sm font-medium text-foreground hover:text-primary"
            >Sophia Johnson</a
          >
          <div class="text-sm font-normal text-muted-foreground">
            sophia@meta.com
          </div>
        </div>
      </div>
      <span class="kt-badge kt-badge-outline kt-badge-primary">Active</span>
    </div>
    <div
      class="flex items-center justify-between gap-2 py-2 border-b border-border border-dashed last:border-none"
    >
      <div class="flex items-center gap-3">
        <div class="kt-avatar size-8">
          <div class="kt-avatar-image">
            <img src="/media/avatars/4.png" alt="Lucas Walker" />
          </div>
        </div>
        <div>
          <a
            href="#"
            class="text-sm font-medium text-foreground hover:text-primary"
            >Lucas Walker</a
          >
          <div class="text-sm font-normal text-muted-foreground">
            lucas@tesla.com
          </div>
        </div>
      </div>
      <span class="kt-badge kt-badge-outline kt-badge-secondary">Inactive</span>
    </div>
    <div
      class="flex items-center justify-between gap-2 py-2 border-b border-border border-dashed last:border-none"
    >
      <div class="flex items-center gap-3">
        <div class="kt-avatar size-8">
          <div class="kt-avatar-image">
            <img src="/media/avatars/5.png" alt="Emily Davis" />
          </div>
        </div>
        <div>
          <a
            href="#"
            class="text-sm font-medium text-foreground hover:text-primary"
            >Emily Davis</a
          >
          <div class="text-sm font-normal text-muted-foreground">
            emily@sap.com
          </div>
        </div>
      </div>
      <span class="kt-badge kt-badge-outline kt-badge-primary">Active</span>
    </div>
  </div>
  <div class="kt-card-footer justify-center">
    <button class="kt-link kt-link-underlined underline-dashed">
      Learn more
    </button>
  </div>
</div>

<link rel="preload" as="image" href="/media/avatars/1.png" /><link
  rel="preload"
  as="image"
  href="/media/avatars/2.png"
/><link rel="preload" as="image" href="/media/avatars/3.png" /><link
  rel="preload"
  as="image"
  href="/media/avatars/4.png"
/><link rel="preload" as="image" href="/media/avatars/5.png" />
<div class="kt-card kt-card-accent w-[400px]">
  <div class="kt-card-header">
    <div class="kt-card-heading">
      <h2 class="kt-card-title">Recent Users</h2>
    </div>
    <div class="kt-card-toolbar">
      <button type="button" class="kt-btn kt-btn-xs kt-btn-outline kt-btn-icon">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-settings"
          aria-hidden="true"
        >
          <path
            d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"
          ></path>
          <circle cx="12" cy="12" r="3"></circle>
        </svg>
      </button>
    </div>
  </div>
  <div class="kt-card-content py-1">
    <div
      class="flex items-center justify-between gap-2 py-2 border-b border-border border-dashed last:border-none"
    >
      <div class="flex items-center gap-3">
        <div class="kt-avatar size-8">
          <div class="kt-avatar-image">
            <img src="/media/avatars/1.png" alt="Kathryn Campbell" />
          </div>
        </div>
        <div>
          <a
            href="#"
            class="text-sm font-medium text-foreground hover:text-primary"
            >Kathryn Campbell</a
          >
          <div class="text-sm font-normal text-muted-foreground">
            kathryn@apple.com
          </div>
        </div>
      </div>
      <span class="kt-badge kt-badge-outline kt-badge-primary">Active</span>
    </div>
    <div
      class="flex items-center justify-between gap-2 py-2 border-b border-border border-dashed last:border-none"
    >
      <div class="flex items-center gap-3">
        <div class="kt-avatar size-8">
          <div class="kt-avatar-image">
            <img src="/media/avatars/2.png" alt="Robert Smith" />
          </div>
        </div>
        <div>
          <a
            href="#"
            class="text-sm font-medium text-foreground hover:text-primary"
            >Robert Smith</a
          >
          <div class="text-sm font-normal text-muted-foreground">
            robert@openai.com
          </div>
        </div>
      </div>
      <span class="kt-badge kt-badge-outline kt-badge-secondary">Inactive</span>
    </div>
    <div
      class="flex items-center justify-between gap-2 py-2 border-b border-border border-dashed last:border-none"
    >
      <div class="flex items-center gap-3">
        <div class="kt-avatar size-8">
          <div class="kt-avatar-image">
            <img src="/media/avatars/3.png" alt="Sophia Johnson" />
          </div>
        </div>
        <div>
          <a
            href="#"
            class="text-sm font-medium text-foreground hover:text-primary"
            >Sophia Johnson</a
          >
          <div class="text-sm font-normal text-muted-foreground">
            sophia@meta.com
          </div>
        </div>
      </div>
      <span class="kt-badge kt-badge-outline kt-badge-primary">Active</span>
    </div>
    <div
      class="flex items-center justify-between gap-2 py-2 border-b border-border border-dashed last:border-none"
    >
      <div class="flex items-center gap-3">
        <div class="kt-avatar size-8">
          <div class="kt-avatar-image">
            <img src="/media/avatars/4.png" alt="Lucas Walker" />
          </div>
        </div>
        <div>
          <a
            href="#"
            class="text-sm font-medium text-foreground hover:text-primary"
            >Lucas Walker</a
          >
          <div class="text-sm font-normal text-muted-foreground">
            lucas@tesla.com
          </div>
        </div>
      </div>
      <span class="kt-badge kt-badge-outline kt-badge-secondary">Inactive</span>
    </div>
    <div
      class="flex items-center justify-between gap-2 py-2 border-b border-border border-dashed last:border-none"
    >
      <div class="flex items-center gap-3">
        <div class="kt-avatar size-8">
          <div class="kt-avatar-image">
            <img src="/media/avatars/5.png" alt="Emily Davis" />
          </div>
        </div>
        <div>
          <a
            href="#"
            class="text-sm font-medium text-foreground hover:text-primary"
            >Emily Davis</a
          >
          <div class="text-sm font-normal text-muted-foreground">
            emily@sap.com
          </div>
        </div>
      </div>
      <span class="kt-badge kt-badge-outline kt-badge-primary">Active</span>
    </div>
  </div>
  <div class="kt-card-footer justify-center">
    <button class="kt-link kt-link-underlined underline-dashed">
      Learn more
    </button>
  </div>
</div>

<div class="kt-card w-[400px]">
  <div class="kt-card-content space-y-4">
    <div>
      <h3 class="text-sm font-semibold text-foreground">Project Kickoff</h3>
      <p class="mt-1 text-sm text-muted-foreground">
        Finalize scope, owners, and launch milestones for the next sprint.
      </p>
    </div>
    <div class="flex items-center justify-between text-sm">
      <span class="text-muted-foreground">Due date</span
      ><span class="font-medium text-foreground">May 15, 2026</span>
    </div>
  </div>
</div>

<link
  rel="preload"
  as="image"
  href="https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&amp;fit=crop&amp;w=1200&amp;q=80"
/>
<div class="kt-card w-[400px] overflow-hidden">
  <img
    src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&amp;fit=crop&amp;w=1200&amp;q=80"
    alt="Product roadmap"
    class="h-44 w-full object-cover"
  />
  <div class="kt-card-content space-y-4">
    <div class="space-y-1">
      <h3 class="text-base font-semibold text-foreground">
        Product Roadmap Review
      </h3>
      <p class="text-sm text-muted-foreground">
        Align design, engineering, and growth priorities for Q3 planning.
      </p>
    </div>
    <div
      class="flex flex-wrap items-center gap-3 text-sm text-muted-foreground"
    >
      <span class="inline-flex items-center gap-1.5"
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-calendar-clock size-4"
          aria-hidden="true"
        >
          <path d="M16 14v2.2l1.6 1"></path>
          <path d="M16 2v4"></path>
          <path
            d="M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5"
          ></path>
          <path d="M3 10h5"></path>
          <path d="M8 2v4"></path>
          <circle cx="16" cy="16" r="6"></circle></svg
        >Tue, 10:00 AM</span
      ><span class="inline-flex items-center gap-1.5"
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-users size-4"
          aria-hidden="true"
        >
          <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
          <path d="M16 3.128a4 4 0 0 1 0 7.744"></path>
          <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
          <circle cx="9" cy="7" r="4"></circle></svg
        >8 attendees</span
      >
    </div>
  </div>
</div>

<div class="kt-card w-[400px]">
  <div class="kt-card-header">
    <div class="kt-card-heading">
      <h2 class="kt-card-title">Loading State</h2>
    </div>
  </div>
  <div class="kt-card-content space-y-3">
    <div class="kt-skeleton h-4 w-2/5"></div>
    <div class="kt-skeleton h-3 w-full"></div>
    <div class="kt-skeleton h-3 w-4/5"></div>
    <div class="kt-skeleton h-24 w-full rounded-lg"></div>
  </div>
</div>

<div class="kt-card w-[560px]">
  <div class="kt-card-header">
    <div class="kt-card-heading">
      <h2 class="kt-card-title">Weekly Performance</h2>
    </div>
  </div>
  <div class="kt-card-content grid grid-cols-2 gap-3">
    <div class="rounded-lg border border-border bg-muted/30 px-4 py-3">
      <p class="text-xs uppercase tracking-wide text-muted-foreground">
        Revenue
      </p>
      <p class="mt-1 text-lg font-semibold text-foreground">$84.2K</p>
      <p class="mt-1 text-xs text-muted-foreground">
        +12.4%<!-- -->
        vs last week
      </p>
    </div>
    <div class="rounded-lg border border-border bg-muted/30 px-4 py-3">
      <p class="text-xs uppercase tracking-wide text-muted-foreground">
        Orders
      </p>
      <p class="mt-1 text-lg font-semibold text-foreground">1,482</p>
      <p class="mt-1 text-xs text-muted-foreground">
        +6.9%<!-- -->
        vs last week
      </p>
    </div>
    <div class="rounded-lg border border-border bg-muted/30 px-4 py-3">
      <p class="text-xs uppercase tracking-wide text-muted-foreground">
        Conversion
      </p>
      <p class="mt-1 text-lg font-semibold text-foreground">4.8%</p>
      <p class="mt-1 text-xs text-muted-foreground">
        +1.1%<!-- -->
        vs last week
      </p>
    </div>
    <div class="rounded-lg border border-border bg-muted/30 px-4 py-3">
      <p class="text-xs uppercase tracking-wide text-muted-foreground">
        Refunds
      </p>
      <p class="mt-1 text-lg font-semibold text-foreground">0.9%</p>
      <p class="mt-1 text-xs text-muted-foreground">
        -0.3%<!-- -->
        vs last week
      </p>
    </div>
  </div>
</div>

<div class="kt-card w-[400px]">
  <div class="kt-card-header">
    <div class="kt-card-heading">
      <h2 class="kt-card-title">Action List</h2>
    </div>
  </div>
  <div class="kt-card-content py-1">
    <button
      type="button"
      class="flex w-full items-center justify-between border-b border-dashed border-border py-3 text-start last:border-none"
    >
      <div>
        <p class="text-sm font-medium text-foreground">
          Finalize onboarding copy
        </p>
        <p class="text-xs text-muted-foreground">Ready for review</p>
      </div>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-arrow-up-right size-4 text-muted-foreground"
        aria-hidden="true"
      >
        <path d="M7 7h10v10"></path>
        <path d="M7 17 17 7"></path>
      </svg></button
    ><button
      type="button"
      class="flex w-full items-center justify-between border-b border-dashed border-border py-3 text-start last:border-none"
    >
      <div>
        <p class="text-sm font-medium text-foreground">
          Approve email sequence
        </p>
        <p class="text-xs text-muted-foreground">Waiting for design</p>
      </div>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-arrow-up-right size-4 text-muted-foreground"
        aria-hidden="true"
      >
        <path d="M7 7h10v10"></path>
        <path d="M7 17 17 7"></path>
      </svg></button
    ><button
      type="button"
      class="flex w-full items-center justify-between border-b border-dashed border-border py-3 text-start last:border-none"
    >
      <div>
        <p class="text-sm font-medium text-foreground">Publish release notes</p>
        <p class="text-xs text-muted-foreground">Draft in progress</p>
      </div>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-arrow-up-right size-4 text-muted-foreground"
        aria-hidden="true"
      >
        <path d="M7 7h10v10"></path>
        <path d="M7 17 17 7"></path>
      </svg>
    </button>
  </div>
</div>