Cards

<Card>My Card</Card>

<script lang="ts">
	import { Card } from 'svelte-5-ui-lib';
</script>

<div class="flex justify-center">
	<Card class="max-w-[250px]">
		<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
			Technology acquisitions
		</h5>
		<p class="leading-tight font-normal text-gray-700 dark:text-gray-400">
			Here are the biggest enterprise technology acquisitions.
		</p>
	</Card>
</div>

<script lang="ts">
	import { Card, Button } from 'svelte-5-ui-lib';
</script>

<div class="flex justify-center">
	<Card class="text-center" size="lg" padding="xl">
		<h5 class="mb-2 text-3xl font-bold text-gray-900 dark:text-white">Work fast from anywhere</h5>
		<p class="mb-5 text-base text-gray-500 sm:text-lg dark:text-gray-400">
			Stay up to date and move work forward with Flowbite on iOS & Android. Download the app today.
		</p>
		<div
			class="items-center justify-center space-y-4 sm:flex sm:space-y-0 sm:space-x-4 rtl:space-x-reverse"
		>
			<Button>Download it</Button>
			<Button>Get it on</Button>
		</div>
	</Card>
</div>

<script lang="ts">
	import { Card, Button } from 'svelte-5-ui-lib';
	import { ArrowRightOutline } from 'flowbite-svelte-icons';
</script>

<div class="flex justify-center">
	<Card>
		<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
			Noteworthy technology acquisitions
		</h5>
		<p class="mb-3 leading-tight font-normal text-gray-700 dark:text-gray-400">
			Here are the biggest enterprise technology acquisitions of so far, in reverse chronological
			order.
		</p>
		<Button class="w-fit">
			Read more <ArrowRightOutline class="ms-2 h-3.5 w-3.5 text-white" />
		</Button>
	</Card>
</div>