Card with Image
Media card with image header
Preview
Featured Card
Beautiful card with image header and action buttons.
{ window.Prism.highlightElement($refs.codeEl) }) }"
class="w-full flex items-center justify-between px-6 py-4 text-left bg-gray-50 dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors cursor-pointer">
View Code
<div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden max-w-sm">
<div class="h-48 bg-gradient-to-r from-blue-500 to-purple-600"></div>
<div class="p-6">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Featured Card</h3>
<p class="text-gray-600 dark:text-gray-400 mb-4">Beautiful card with image header and action buttons.</p>
<button class="w-full px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Learn More</button>
</div>
</div>