Cards Section - All Examples

Discover 37 Cards Section examples available in Loopple

Cards Socials

Component from Riva Dashboard Tailwind Builder
<div class="flex flex-wrap -mx-3 mb-5 removable">
    <div class="w-full max-w-full px-3 mb-6 sm:w-1/4 sm:flex-none xl:mb-0 xl:w-1/4 drop-zone">
        <div class="relative flex flex-col min-w-0 break-words border border-dashed bg-clip-border rounded-2xl border-stone-200 bg-light/30 draggable" draggable="true">
            <!-- card body  -->
            <div class="flex flex-col items-start justify-between flex-auto py-8 px-9">
                <div class="m-0">
                    <img class="w-[35px]" src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/riva-dashboard-tailwind/img/logos/instagram.svg" alt="youtube">
                </div>
                <div class="flex flex-col my-7">
                    <h3 class="text-secondary-inverse text-4xl tracking-[-0.115rem] font-bold font-display">590k</h3>
                    <div class="m-0">
                        <span class="font-medium text-secondary-dark text-lg/normal">Followers</span>
                    </div>
                </div>
                <span class="inline-flex items-center px-2 py-1 mr-auto font-semibold text-center align-baseline rounded-lg text-base/none text-success bg-success-light border border-success">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941"></path>
                    </svg>
                    2.86%
                </span>
            </div>
            <!-- end card body  -->
        </div>
    </div>
    <div class="w-full max-w-full px-3 mb-6 sm:w-1/4 sm:flex-none xl:mb-0 xl:w-1/4 drop-zone">
        <div class="relative flex flex-col min-w-0 break-words border border-dashed bg-clip-border rounded-2xl border-stone-200 bg-light/30 draggable" draggable="true">
            <!-- card body  -->
            <div class="flex flex-col items-start justify-between flex-auto py-8 px-9">
                <div class="m-0">
                    <img class="w-[35px]" src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/riva-dashboard-tailwind/img/logos/youtube.svg" alt="youtube">
                </div>
                <div class="flex flex-col my-7">
                    <h3 class="text-secondary-inverse text-4xl tracking-[-0.115rem] font-bold font-display">58k</h3>
                    <div class="m-0">
                        <span class="font-medium text-secondary-dark text-lg/normal">Subscribers</span>
                    </div>
                </div>
                <span class="inline-flex items-center px-2 py-1 mr-auto font-semibold text-center align-baseline rounded-lg text-base/none text-success bg-success-light border border-success">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941"></path>
                    </svg>
                    7%
                </span>
            </div>
            <!-- end card body  -->
        </div>
    </div>
    <div class="w-full max-w-full px-3 mb-6 sm:w-1/4 sm:flex-none xl:mb-0 xl:w-1/4 drop-zone">
        <div class="relative flex flex-col min-w-0 break-words border border-dashed bg-clip-border rounded-2xl border-stone-200 bg-light/30 draggable" draggable="true">
            <!-- card body  -->
            <div class="flex flex-col items-start justify-between flex-auto py-8 px-9">
                <div class="m-0">
                    <img class="w-[35px]" src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/riva-dashboard-tailwind/img/logos/facebook.svg" alt="youtube">
                </div>
                <div class="flex flex-col my-7">
                    <h3 class="text-secondary-inverse text-4xl tracking-[-0.115rem] font-bold font-display">896k</h3>
                    <div class="m-0">
                        <span class="font-medium text-secondary-dark text-lg/normal">Followers</span>
                    </div>
                </div>
                <span class="inline-flex items-center px-2 py-1 mr-auto font-semibold text-center align-baseline rounded-lg text-base/none text-danger bg-danger-light border border-danger">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6L9 12.75l4.286-4.286a11.948 11.948 0 014.306 6.43l.776 2.898m0 0l3.182-5.511m-3.182 5.51l-5.511-3.181"></path>
                    </svg>
                    1.12%
                </span>
            </div>
            <!-- end card body  -->
        </div>
    </div>
    <div class="w-full max-w-full px-3 mb-6 sm:w-1/4 sm:flex-none xl:mb-0 xl:w-1/4 drop-zone">
        <div class="relative flex flex-col min-w-0 break-words border border-dashed bg-clip-border rounded-2xl border-stone-200 bg-light/30 draggable" draggable="true">
            <!-- card body  -->
            <div class="flex flex-col items-start justify-between flex-auto py-8 px-9">
                <div class="m-0">
                    <img class="w-[35px]" src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/riva-dashboard-tailwind/img/logos/twitter.svg" alt="youtube">
                </div>
                <div class="flex flex-col my-7">
                    <h3 class="text-secondary-inverse text-4xl tracking-[-0.115rem] font-bold font-display">77k</h3>
                    <div class="m-0">
                        <span class="font-medium text-secondary-dark text-lg/normal">Followers</span>
                    </div>
                </div>
                <span class="inline-flex items-center px-2 py-1 mr-auto font-semibold text-center align-baseline rounded-lg text-base/none text-success bg-success-light border border-success">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941"></path>
                    </svg>
                    9.4%
                </span>
            </div>
            <!-- end card body  -->
        </div>
    </div>
</div>

Section Card Songs

Component from Soft UI Dashboard Builder

Section Cards Events

Cards Section Multiple Cards

Card Stats Connected

Component from Argon Dashboard Builder

Card Shopping Flowers

Cards Section With Image And Link

Cards Section Ecommerce With 3 Categories

Card Playlist

Component from Soft UI Dashboard Builder

Section Card Billing