Card

Card(class: 'w-96') do
	CardHeader do
		CardTitle { 'You might like "PhlexUI"' }
		CardDescription { "@joeldrapper" }
	end
	CardContent do
		AspectRatio(aspect_ratio: "16/9", class: "rounded-md overflow-hidden border") do
			img(
				alt: "Placeholder",
				loading: "lazy",
				src:
					helpers.image_url('pattern.jpg')
			)
		end
	end
	CardFooter(class: 'flex justify-end gap-x-2') do
		Button(variant: :outline) { "See more" }
		Button(variant: :primary) { "Buy now" }
	end
end

Card(class: 'w-96 overflow-hidden') do
	AspectRatio(aspect_ratio: "16/9", class: "border-b") do
		img(
			alt: "Placeholder",
			loading: "lazy",
			src:
				helpers.image_url('pattern.jpg')
		)
	end
	CardHeader do
		CardTitle { 'Introducing PhlexUI' }
		CardDescription { "Kickstart your project today!" }
	end
	CardFooter(class: 'flex justify-end') do
		Button(variant: :outline) { "Get started" }
	end
end

Card(class: 'w-96 overflow-hidden') do
	CardHeader do
		div(class: 'w-10 h-10 rounded-xl flex items-center justify-center bg-violet-100 text-violet-700 -rotate-6') do
			cash_icon
		end
	end
	CardContent(class: 'space-y-1') do
		CardDescription(class: 'font-medium') { "Current Balance" }
		h5(class: 'font-semibold text-4xl') { '$2,602' }
	end
	CardFooter do
		TypographyMuted { "**** 4620" }
	end
end