English
Espanol
Japanese
Recently Browses
- Apps Api
- Dashboard Marketing
Memebers
-
Ethan Smith Backend Developer -
Isabella Garcia Digital Marketer -
Noah Walker Full Stack Developer
Filters
-
customers:
All customers list
-
products:
Bestselling products
-
events:
All upcoming events
Card
- Home
- Components
- Card
Default
Card title
Card content...
<!--:Card:-->
<div class="rounded-xl bg-white dark:bg-stone-900 shadow-card">
<div class="px-4 pt-4">
<h5 class="text-lg">Card title</h5>
</div>
<div class="p-4">
Card content...
</div>
</div>
Footer
Card title
Card content...
Card footer
<!--:Card:-->
<div class="rounded-xl bg-white dark:bg-stone-900 shadow-card overflow-hidden">
<!--:Card header:-->
<div class="px-4 pt-4">
<h5 class="text-lg">Card title</h5>
</div>
<!--:Content:-->
<div class="p-4">
Card content...
</div>
<!--:Footer:-->
<div class="px-4 py-2.5 border-t border-stone-500/10 dark:bg-stone-800">
Card footer
</div>
</div>
Action Dropdown
Card title
Card content...
<!--:Card:-->
<div class="rounded-xl bg-white dark:bg-stone-900 shadow-card">
<div class="px-4 pt-4 flex items-center justify-between">
<h5 class="text-lg">Card title</h5>
<!--:Dropdown:-->
<div class="relative">
<button class="btn text-muted hover:bg-stone-200 dark:hover:bg-stone-700 hover:text-primary !p-1.5" type="button" data-bs-toggle="dropdown">
<span class="icon-[lucide--more-vertical] text-lg"></span>
</button>
<div class="dropdown-menu z-50 absolute min-w-40 !start-auto !end-0 top-full">
<a href="#!" class="dropdown-item">
Dropdown item
</a>
<a href="#!" class="dropdown-item">
More item here
</a>
<hr class="border-stone-200 dark:border-white/5 -mx-2 my-2">
<a href="#!" class="dropdown-item">
Another item
</a>
</div>
</div>
</div>
<div class="p-4">
Card content...
</div>
</div>
Action button
Card title
Card content...
<!--:Card:-->
<div class="rounded-xl bg-white dark:bg-stone-900 shadow-card">
<div class="px-4 pt-4 flex items-center justify-between">
<h5 class="text-lg">Card title</h5>
<button type="button" class="btn btn-sm btn-default">Export data</button>
</div>
<div class="p-4">
Card content...
</div>
</div>
Thumbnail + Link
<!--:Card:-->
<div class="rounded-xl bg-white dark:bg-stone-900 shadow-card">
<div class="p-1">
<!--:Thumbnail:-->
<img src="images/projects/1.jpg" class="max-w-full rounded-lg" alt="">
</div>
<!--:Content:-->
<div class="p-4 pt-2">
<!--:Title:-->
<h5 class="text-lg mb-1">Abstract design</h5>
<p class="line-clamp-2">
Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing
industries for previewing layouts and visual mockups.
</p>
</div>
<!--:Footer:-->
<div class="flex items-center justify-between px-4 py-2.5 border-t border-stone-200 dark:border-stone-800">
<div class="flex items-center gap-2">
<img src="images/avatars/thumb-1.jpg" class="rounded-full w-6" alt="">
<h6>Kethy Miller</h6>
</div>
<div class="flex items-center gap-3">
<div class="inline-flex items-center text-sm">
<span class="icon-[lucide--heart] me-1"></span>
27
</div>
<div class="inline-flex items-center text-sm">
<span class="icon-[lucide--message-circle-more] me-1"></span>
16
</div>
</div>
</div>
<!--:Link:-->
<a href="#!" class="block inset-0 absolute"></a>
</div>
Border
Card title
Card content...
<!--:Card:-->
<div class="rounded-xl bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-800">
<div class="px-4 py-2.5 border-b border-stone-200 dark:border-stone-800">
<h5 class="text-lg">Card title</h5>
</div>
<div class="p-4">
Card content...
</div>
</div>
Custom card
Card title
Card content...
<!--:Card:-->
<div class="rounded-lg overflow-hidden shadow-card bg-white dark:bg-stone-950 border border-primary">
<div class="px-4 py-2.5 bg-primary">
<h5 class="text-lg !text-white">Card title</h5>
</div>
<div class="p-4">
Card content...
</div>
</div>
Card collapse + refresher
Card title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
<!--:Card:-->
<div class="rounded-lg relative overflow-hidden shadow-card bg-white dark:bg-stone-900">
<!--:Card refresher:-->
<div class="card-overlay absolute inset-0 p-4 bg-stone-900/10 backdrop-blur flex items-center justify-center z-[1]"
style="display: none;">
<!--:Spinner:-->
<svg class="animate-spin size-5 text-primary me-3" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="" fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
</path>
</svg> <small>Reloading...</small>
</div>
<div class="px-4 py-4 flex items-center justify-between">
<h5 class="text-lg">Card title</h5>
<div class="shrink-0">
<div class="flex items-center gap-1">
<button aria-expanded="true"
class="card-arrow btn text-muted hover:bg-stone-200 dark:hover:bg-stone-700 hover:text-primary !p-1.5"
data-bs-toggle="collapse" data-bs-target="#cardCollapse">
<span class="icon-[lucide--chevron-up]"></span>
</button>
<button data-refresh
class="btn text-muted hover:bg-stone-200 dark:hover:bg-stone-700 hover:text-primary !p-1.5">
<span class="icon-[tabler--reload]"></span>
</button>
</div>
</div>
</div>
<div class="collapse show" id="cardCollapse">
<div class="p-4 pt-0 relative overflow-hidden">
<div>
Content.....
</div>
</div>
</div>
</div>