##### 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

1. Home
3. Components
5. Card

##### Default

##### Card title

Card content...

    <!--:Card:-->
    <div class="rounded-xl bg-white dark:bg-zinc-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-zinc-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 bg-zinc-50 dark:bg-zinc-800">
            Card footer
        </div>
    </div>

##### Action Dropdown

##### Card title

Card content...

    <!--:Card:-->
    <div class="rounded-xl bg-white dark:bg-zinc-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-zinc-200 dark:hover:bg-zinc-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-zinc-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-zinc-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

##### Abstract design

Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.

###### Kethy Miller

27
16

    <!--:Card:-->
    <div class="rounded-xl bg-white dark:bg-zinc-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-zinc-200 dark:border-zinc-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-zinc-900 border border-zinc-200 dark:border-zinc-800">
        <div class="px-4 py-2.5 border-b border-zinc-200 dark:border-zinc-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-zinc-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-zinc-900">
     <!--:Card refresher:-->
                <div class="card-overlay absolute inset-0 p-4 bg-zinc-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-zinc-200 dark:hover:bg-zinc-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-zinc-200 dark:hover:bg-zinc-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>