<section class="bg-coolGray-50 py-4">
<div class="container px-4 mx-auto">
<div class="flex flex-wrap -m-3">
<div class="w-full md:w-1/2 xl:w-1/4 p-3">
<div class="bg-white border border-coolGray-100 shadow-dashboard rounded-md">
<div class="flex flex-col justify-center items-center px-4 pt-8 pb-6 border-b border-coolGray-100">
<img class="mb-4" src="flex-ui-assets/images/dashboard/cards/avatar.png" alt="">
<h2 class="text-sm font-medium text-coolGray-900">John Doe</h2>
<h3 class="mb-3 text-xs font-medium text-coolGray-400">[email protected]</h3>
<button class="flex items-center px-4 py-2 font-medium text-sm text-white bg-green-500 hover:bg-green-600 rounded-md">
<svg class="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.8333 3.33334H4.16666C3.50362 3.33334 2.86773 3.59673 2.39889 4.06557C1.93005 4.53441 1.66666 5.17029 1.66666 5.83334V14.1667C1.66666 14.8297 1.93005 15.4656 2.39889 15.9344C2.86773 16.4033 3.50362 16.6667 4.16666 16.6667H15.8333C16.4964 16.6667 17.1323 16.4033 17.6011 15.9344C18.0699 15.4656 18.3333 14.8297 18.3333 14.1667V5.83334C18.3333 5.17029 18.0699 4.53441 17.6011 4.06557C17.1323 3.59673 16.4964 3.33334 15.8333 3.33334V3.33334ZM4.16666 5H15.8333C16.0543 5 16.2663 5.0878 16.4226 5.24408C16.5789 5.40036 16.6667 5.61232 16.6667 5.83334L9.99999 9.9L3.33332 5.83334C3.33332 5.61232 3.42112 5.40036 3.5774 5.24408C3.73368 5.0878 3.94564 5 4.16666 5V5ZM16.6667 14.1667C16.6667 14.3877 16.5789 14.5996 16.4226 14.7559C16.2663 14.9122 16.0543 15 15.8333 15H4.16666C3.94564 15 3.73368 14.9122 3.5774 14.7559C3.42112 14.5996 3.33332 14.3877 3.33332 14.1667V7.73334L9.56666 11.5417C9.69334 11.6148 9.83704 11.6533 9.98332 11.6533C10.1296 11.6533 10.2733 11.6148 10.4 11.5417L16.6667 7.73334V14.1667Z" fill="#F0FDF4"></path>
</svg>
<p>Message</p>
</button>
</div>
<div class="flex flex-wrap pt-4 pb-6 -m-2">
<div class="w-full md:w-1/3 p-2">
<div class="text-center">
<p class="mb-1 text-xs text-coolGray-900 font-semibold">24</p>
<p class="text-xs text-coolGray-400 font-medium">Posts</p>
</div>
</div>
<div class="w-full md:w-1/3 p-2">
<div class="text-center">
<p class="mb-1 text-xs text-coolGray-900 font-semibold">420</p>
<p class="text-xs text-coolGray-400 font-medium">Following</p>
</div>
</div>
<div class="w-full md:w-1/3 p-2">
<div class="text-center">
<p class="mb-1 text-xs text-coolGray-900 font-semibold">2.7k</p>
<p class="text-xs text-coolGray-400 font-medium">Followers</p>
</div>
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/2 xl:w-1/4 p-3">
<div class="bg-white border border-coolGray-100 shadow-dashboard rounded-md">
<div class="flex flex-col justify-center items-center px-4 pt-8 pb-6 border-b border-coolGray-100">
<img class="mb-4" src="flex-ui-assets/images/dashboard/cards/avatar.png" alt="">
<h2 class="text-sm font-medium text-coolGray-900">John Doe</h2>
<h3 class="mb-3 text-xs font-medium text-coolGray-400">[email protected]</h3>
<button class="flex items-center px-4 py-2 font-medium text-sm text-white bg-green-500 hover:bg-green-600 rounded-md">
<svg class="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.8333 3.33334H4.16666C3.50362 3.33334 2.86773 3.59673 2.39889 4.06557C1.93005 4.53441 1.66666 5.17029 1.66666 5.83334V14.1667C1.66666 14.8297 1.93005 15.4656 2.39889 15.9344C2.86773 16.4033 3.50362 16.6667 4.16666 16.6667H15.8333C16.4964 16.6667 17.1323 16.4033 17.6011 15.9344C18.0699 15.4656 18.3333 14.8297 18.3333 14.1667V5.83334C18.3333 5.17029 18.0699 4.53441 17.6011 4.06557C17.1323 3.59673 16.4964 3.33334 15.8333 3.33334V3.33334ZM4.16666 5H15.8333C16.0543 5 16.2663 5.0878 16.4226 5.24408C16.5789 5.40036 16.6667 5.61232 16.6667 5.83334L9.99999 9.9L3.33332 5.83334C3.33332 5.61232 3.42112 5.40036 3.5774 5.24408C3.73368 5.0878 3.94564 5 4.16666 5V5ZM16.6667 14.1667C16.6667 14.3877 16.5789 14.5996 16.4226 14.7559C16.2663 14.9122 16.0543 15 15.8333 15H4.16666C3.94564 15 3.73368 14.9122 3.5774 14.7559C3.42112 14.5996 3.33332 14.3877 3.33332 14.1667V7.73334L9.56666 11.5417C9.69334 11.6148 9.83704 11.6533 9.98332 11.6533C10.1296 11.6533 10.2733 11.6148 10.4 11.5417L16.6667 7.73334V14.1667Z" fill="#F0FDF4"></path>
</svg>
<p>Message</p>
</button>
</div>
<div class="flex flex-wrap pt-4 pb-6 -m-2">
<div class="w-full md:w-1/3 p-2">
<div class="text-center">
<p class="mb-1 text-xs text-coolGray-900 font-semibold">24</p>
<p class="text-xs text-coolGray-400 font-medium">Posts</p>
</div>
</div>
<div class="w-full md:w-1/3 p-2">
<div class="text-center">
<p class="mb-1 text-xs text-coolGray-900 font-semibold">420</p>
<p class="text-xs text-coolGray-400 font-medium">Following</p>
</div>
</div>
<div class="w-full md:w-1/3 p-2">
<div class="text-center">
<p class="mb-1 text-xs text-coolGray-900 font-semibold">2.7k</p>
<p class="text-xs text-coolGray-400 font-medium">Followers</p>
</div>
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/2 xl:w-1/4 p-3">
<div class="bg-white border border-coolGray-100 shadow-dashboard rounded-md">
<div class="flex flex-col justify-center items-center px-4 pt-8 pb-6 border-b border-coolGray-100">
<img class="mb-4" src="flex-ui-assets/images/dashboard/cards/avatar.png" alt="">
<h2 class="text-sm font-medium text-coolGray-900">John Doe</h2>
<h3 class="mb-3 text-xs font-medium text-coolGray-400">[email protected]</h3>
<button class="flex items-center px-4 py-2 font-medium text-sm text-white bg-green-500 hover:bg-green-600 rounded-md">
<svg class="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.8333 3.33334H4.16666C3.50362 3.33334 2.86773 3.59673 2.39889 4.06557C1.93005 4.53441 1.66666 5.17029 1.66666 5.83334V14.1667C1.66666 14.8297 1.93005 15.4656 2.39889 15.9344C2.86773 16.4033 3.50362 16.6667 4.16666 16.6667H15.8333C16.4964 16.6667 17.1323 16.4033 17.6011 15.9344C18.0699 15.4656 18.3333 14.8297 18.3333 14.1667V5.83334C18.3333 5.17029 18.0699 4.53441 17.6011 4.06557C17.1323 3.59673 16.4964 3.33334 15.8333 3.33334V3.33334ZM4.16666 5H15.8333C16.0543 5 16.2663 5.0878 16.4226 5.24408C16.5789 5.40036 16.6667 5.61232 16.6667 5.83334L9.99999 9.9L3.33332 5.83334C3.33332 5.61232 3.42112 5.40036 3.5774 5.24408C3.73368 5.0878 3.94564 5 4.16666 5V5ZM16.6667 14.1667C16.6667 14.3877 16.5789 14.5996 16.4226 14.7559C16.2663 14.9122 16.0543 15 15.8333 15H4.16666C3.94564 15 3.73368 14.9122 3.5774 14.7559C3.42112 14.5996 3.33332 14.3877 3.33332 14.1667V7.73334L9.56666 11.5417C9.69334 11.6148 9.83704 11.6533 9.98332 11.6533C10.1296 11.6533 10.2733 11.6148 10.4 11.5417L16.6667 7.73334V14.1667Z" fill="#F0FDF4"></path>
</svg>
<p>Message</p>
</button>
</div>
<div class="flex flex-wrap pt-4 pb-6 -m-2">
<div class="w-full md:w-1/3 p-2">
<div class="text-center">
<p class="mb-1 text-xs text-coolGray-900 font-semibold">24</p>
<p class="text-xs text-coolGray-400 font-medium">Posts</p>
</div>
</div>
<div class="w-full md:w-1/3 p-2">
<div class="text-center">
<p class="mb-1 text-xs text-coolGray-900 font-semibold">420</p>
<p class="text-xs text-coolGray-400 font-medium">Following</p>
</div>
</div>
<div class="w-full md:w-1/3 p-2">
<div class="text-center">
<p class="mb-1 text-xs text-coolGray-900 font-semibold">2.7k</p>
<p class="text-xs text-coolGray-400 font-medium">Followers</p>
</div>
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/2 xl:w-1/4 p-3">
<div class="bg-white border border-coolGray-100 shadow-dashboard rounded-md">
<div class="flex flex-col justify-center items-center px-4 pt-8 pb-6 border-b border-coolGray-100">
<img class="mb-4" src="flex-ui-assets/images/dashboard/cards/avatar.png" alt="">
<h2 class="text-sm font-medium text-coolGray-900">John Doe</h2>
<h3 class="mb-3 text-xs font-medium text-coolGray-400">[email protected]</h3>
<button class="flex items-center px-4 py-2 font-medium text-sm text-white bg-green-500 hover:bg-green-600 rounded-md">
<svg class="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.8333 3.33334H4.16666C3.50362 3.33334 2.86773 3.59673 2.39889 4.06557C1.93005 4.53441 1.66666 5.17029 1.66666 5.83334V14.1667C1.66666 14.8297 1.93005 15.4656 2.39889 15.9344C2.86773 16.4033 3.50362 16.6667 4.16666 16.6667H15.8333C16.4964 16.6667 17.1323 16.4033 17.6011 15.9344C18.0699 15.4656 18.3333 14.8297 18.3333 14.1667V5.83334C18.3333 5.17029 18.0699 4.53441 17.6011 4.06557C17.1323 3.59673 16.4964 3.33334 15.8333 3.33334V3.33334ZM4.16666 5H15.8333C16.0543 5 16.2663 5.0878 16.4226 5.24408C16.5789 5.40036 16.6667 5.61232 16.6667 5.83334L9.99999 9.9L3.33332 5.83334C3.33332 5.61232 3.42112 5.40036 3.5774 5.24408C3.73368 5.0878 3.94564 5 4.16666 5V5ZM16.6667 14.1667C16.6667 14.3877 16.5789 14.5996 16.4226 14.7559C16.2663 14.9122 16.0543 15 15.8333 15H4.16666C3.94564 15 3.73368 14.9122 3.5774 14.7559C3.42112 14.5996 3.33332 14.3877 3.33332 14.1667V7.73334L9.56666 11.5417C9.69334 11.6148 9.83704 11.6533 9.98332 11.6533C10.1296 11.6533 10.2733 11.6148 10.4 11.5417L16.6667 7.73334V14.1667Z" fill="#F0FDF4"></path>
</svg>
<p>Message</p>
</button>
</div>
<div class="flex flex-wrap pt-4 pb-6 -m-2">
<div class="w-full md:w-1/3 p-2">
<div class="text-center">
<p class="mb-1 text-xs text-coolGray-900 font-semibold">24</p>
<p class="text-xs text-coolGray-400 font-medium">Posts</p>
</div>
</div>
<div class="w-full md:w-1/3 p-2">
<div class="text-center">
<p class="mb-1 text-xs text-coolGray-900 font-semibold">420</p>
<p class="text-xs text-coolGray-400 font-medium">Following</p>
</div>
</div>
<div class="w-full md:w-1/3 p-2">
<div class="text-center">
<p class="mb-1 text-xs text-coolGray-900 font-semibold">2.7k</p>
<p class="text-xs text-coolGray-400 font-medium">Followers</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Framework
All Frameworks
UI Library
All Libraries
Components
- Alert 253
- Application 179
- Banner 53
- Blog 217
- Call to action 338
- Cards 24
- Careers 20
- Charts 3
- Contact 147
- Content 187
- Cookies 168
- E-commerce (orders) 56
- E-commerce (products) 93
- FAQ 145
- Features 427
- Footers 205
- Forms 6
- Gallery 5
- Graphs 55
- HTTP codes 170
- Headers 296
- How it works 184
- Logo clouds 262
- Modals 24
- Navbar 212
- Navigation (horizontal) 340
- Navigation (vertical) 18
- Newsletter 168
- Notifications 4
- Portfolio 161
- Pricing 173
- Projects 9
- Reviews 20
- Rich text 3
- Section headings 72
- Sign in / Sign up 255
- Stats 238
- Tables 147
- Team 160
- Testimonials 193
- Users 59
Component #1
Cards Components by Shuffle
Choose from 24 variations of Cards UI components. Presented here are variants available in various UI libraries.
Get access to all UI components, code, and our visual editor. Try the demo for free!
Component #2
Component #3
Component #4
Component #5
Component #6
Component #7
Component #8
Component #9
Component #10
