Containers for displaying content and actions about a single subject.
<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="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
></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="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
></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>
On This Page