Footer

Default

<script lang="ts">
	import { Footer, FooterLi, FooterUl, FooterCopyright } from 'svelte-5-ui-lib';
</script>

<Footer class="shadow-none" footerType="logo">
	<div class="sm:flex sm:items-center sm:justify-between">
		<FooterCopyright href="/" by="Flowbite" year={2022} />
		<FooterUl
			class="mt-3 flex flex-wrap items-center text-sm text-gray-500 sm:mt-0 dark:text-gray-400"
		>
			<FooterLi href="/">About</FooterLi>
			<FooterLi href="/">Privacy Policy</FooterLi>
			<FooterLi href="/">Licensing</FooterLi>
			<FooterLi href="/">Contact</FooterLi>
		</FooterUl>
	</div>
</Footer>

Logo

<script lang="ts">
	import { Footer, FooterBrand, FooterLi, FooterUl, FooterCopyright } from 'svelte-5-ui-lib';
</script>

<Footer footerType="logo">
	<div class="sm:flex sm:items-center sm:justify-between">
		<FooterBrand
			href="https://flowbite.com"
			src="/images/flowbite-svelte-icons-logo.svg"
			alt="Flowbite Logo"
			name="Flowbite"
		/>
		<FooterUl
			class="mb-6 flex flex-wrap items-center text-sm text-gray-500 sm:mb-0 dark:text-gray-400"
		>
			<FooterLi href="/">About</FooterLi>
			<FooterLi href="/">Privacy Policy</FooterLi>
			<FooterLi href="/">Licensing</FooterLi>
			<FooterLi href="/">Contact</FooterLi>
		</FooterUl>
	</div>
	<hr class="my-6 border-gray-200 sm:mx-auto lg:my-8 dark:border-gray-700" />
	<FooterCopyright href="/" by="Flowbite™" />
</Footer>

Sitemap link

<script lang="ts">
	import { Footer, FooterLi, FooterUl, FooterCopyright, FooterIcon } from 'svelte-5-ui-lib';
	import { FacebookSolid, GithubSolid, DiscordSolid, TwitterSolid } from 'flowbite-svelte-icons';
</script>

<Footer footerType="sitemap">
	<div class="grid grid-cols-2 gap-8 px-6 py-8 md:grid-cols-4">
		<div>
			<h2 class="mb-6 text-sm font-semibold text-gray-400 uppercase">Company</h2>
			<FooterUl class="text-gray-300">
				<FooterLi liClass="mb-4" href="/">About</FooterLi>
				<FooterLi liClass="mb-4" href="/">Careers</FooterLi>
				<FooterLi liClass="mb-4" href="/">Brand Center</FooterLi>
				<FooterLi liClass="mb-4" href="/">Blog</FooterLi>
			</FooterUl>
		</div>
		<div>
			<h2 class="mb-6 text-sm font-semibold text-gray-400 uppercase">Download</h2>
			<FooterUl class="text-gray-300">
				<FooterLi liClass="mb-4" href="/">Discord Server</FooterLi>
				<FooterLi liClass="mb-4" href="/">Twitter</FooterLi>
				<FooterLi liClass="mb-4" href="/">Facebook</FooterLi>
				<FooterLi liClass="mb-4" href="/">Contact Us</FooterLi>
			</FooterUl>
		</div>
		<div>
			<h2 class="mb-6 text-sm font-semibold text-gray-400 uppercase">Legal</h2>
			<FooterUl class="text-gray-300">
				<FooterLi liClass="mb-4" href="/">Privacy Policy</FooterLi>
				<FooterLi liClass="mb-4" href="/">Licensing</FooterLi>
				<FooterLi liClass="mb-4" href="/">Terms & Conditions</FooterLi>
			</FooterUl>
		</div>
		<div>
			<h2 class="mb-6 text-sm font-semibold text-gray-400 uppercase">Download</h2>
			<FooterUl class="text-gray-300">
				<FooterLi liClass="mb-4" href="/">iOS</FooterLi>
				<FooterLi liClass="mb-4" href="/">Android</FooterLi>
				<FooterLi liClass="mb-4" href="/">Windows</FooterLi>
				<FooterLi liClass="mb-4" href="/">MacOS</FooterLi>
			</FooterUl>
		</div>
	</div>
	<div class="bg-gray-700 px-4 py-6 md:flex md:items-center md:justify-between">
		<FooterCopyright spanClass="text-sm text-gray-300 sm:text-center" href="/" by="Flowbite™" />
		<div class="mt-4 flex space-x-6 sm:justify-center md:mt-0 rtl:space-x-reverse">
			<FooterIcon href="/">
				<FacebookSolid
					class="h-5 w-5 text-gray-500 hover:text-gray-900 dark:text-gray-500 dark:hover:text-white"
				/>
			</FooterIcon>
			<FooterIcon href="/">
				<DiscordSolid
					class="h-5 w-5 text-gray-500 hover:text-gray-900 dark:text-gray-500 dark:hover:text-white"
				/>
			</FooterIcon>
			<FooterIcon href="/">
				<TwitterSolid
					class="h-5 w-5 text-gray-500 hover:text-gray-900 dark:text-gray-500 dark:hover:text-white"
				/>
			</FooterIcon>
			<FooterIcon href="/">
				<GithubSolid
					class="h-5 w-5 text-gray-500 hover:text-gray-900 dark:text-gray-500 dark:hover:text-white"
				/>
			</FooterIcon>
		</div>
	</div>
</Footer>

Social media

<script lang="ts">
	import { Footer, FooterBrand, FooterLi, FooterUl, FooterCopyright, FooterIcon } from 'svelte-5-ui-lib';
	import { FacebookSolid, GithubSolid, DiscordSolid, TwitterSolid } from 'flowbite-svelte-icons';
</script>

<Footer footerType="socialmedia">
	<div class="md:flex md:justify-between">
		<div class="mb-6 md:mb-0">
			<FooterBrand
				href="https://flowbite.com"
				src="/images/flowbite-svelte-icons-logo.svg"
				alt="Flowbite Logo"
				name="Flowbite"
			/>
		</div>
		<div class="grid grid-cols-2 gap-8 sm:grid-cols-3 sm:gap-6">
			<div>
				<h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">
					Resources
				</h2>
				<FooterUl>
					<FooterLi liClass="mb-4" href="/">Flowbite</FooterLi>
					<FooterLi liClass="mb-4" href="/">Tailwind CSS</FooterLi>
				</FooterUl>
			</div>
			<div>
				<h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">
					Follow us
				</h2>
				<FooterUl>
					<FooterLi liClass="mb-4" href="/">GitHub</FooterLi>
					<FooterLi liClass="mb-4" href="/">Discord</FooterLi>
				</FooterUl>
			</div>
			<div>
				<h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">Legal</h2>
				<FooterUl>
					<FooterLi liClass="mb-4" href="/">Privacy Policy</FooterLi>
					<FooterLi liClass="mb-4" href="/">Terms & Conditions</FooterLi>
				</FooterUl>
			</div>
		</div>
	</div>
	<hr class="my-6 border-gray-200 sm:mx-auto lg:my-8 dark:border-gray-700" />
	<div class="sm:flex sm:items-center sm:justify-between">
		<FooterCopyright href="/" by="Flowbite™" />
		<div class="mt-4 flex space-x-6 sm:mt-0 sm:justify-center rtl:space-x-reverse">
			<FooterIcon href="/">
				<FacebookSolid
					class="h-5 w-5 text-gray-500 hover:text-gray-900 dark:text-gray-500 dark:hover:text-white"
				/>
			</FooterIcon>
			<FooterIcon href="/">
				<DiscordSolid
					class="h-5 w-5 text-gray-500 hover:text-gray-900 dark:text-gray-500 dark:hover:text-white"
				/>
			</FooterIcon>
			<FooterIcon href="/">
				<TwitterSolid
					class="h-5 w-5 text-gray-500 hover:text-gray-900 dark:text-gray-500 dark:hover:text-white"
				/>
			</FooterIcon>
			<FooterIcon href="/">
				<GithubSolid
					class="h-5 w-5 text-gray-500 hover:text-gray-900 dark:text-gray-500 dark:hover:text-white"
				/>
			</FooterIcon>
		</div>
	</div>
</Footer>

Sticky

<script lang="ts">
	import {
		Footer,
		FooterCopyright,
		FooterUl,
		FooterLi,
		Skeleton,
		ImagePlaceholder,
		TextPlaceholder
	} from 'svelte-5-ui-lib';
</script>

<div class="relative p-6">
	<div style="height:300px;" class="overflow-auto">
		<Skeleton class="my-8" />
		<ImagePlaceholder class="my-8" />
		<TextPlaceholder class="my-8" />
	</div>
	<Footer footerType="sticky" class="absolute">
		<FooterCopyright href="/" by="Flowbite™" />
		<FooterUl
			class="mt-3 flex flex-wrap items-center text-sm text-gray-500 sm:mt-0 dark:text-gray-400"
		>
			<FooterLi href="/">About</FooterLi>
			<FooterLi href="/">Privacy Policy</FooterLi>
			<FooterLi href="/">Licensing</FooterLi>
			<FooterLi href="/">Contact</FooterLi>
		</FooterUl>
	</Footer>
</div>

Footer

Default

Logo

Sitemap link

Social media

Sticky

Component data