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-icon-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 uppercase text-gray-400">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 uppercase text-gray-400">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 uppercase text-gray-400">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 uppercase text-gray-400">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-icon-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 uppercase text-gray-900 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 uppercase text-gray-900 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 uppercase text-gray-900 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