Qwik footer - Flowbite
Use the footer component at the end of your page to show content such as sitemap links, brand logo, social icons and more using Qwik and Tailwind CSS
The footer component is an important section of a website where you should provide content such as sitemap links, copyright text, logo of your brand, social media account links, and more.
Get started with the examples from Flowbite Qwik based on multiple styles, sizes, and colors by using Qwik components and the utility classes from Tailwind CSS.
To start using the footer component you need to import it from flowbite-qwik :
import { Footer } from "flowbite-qwik"
Default footer
Use this footer component to show a copyright notice and some helpful website links.
tsx
import { component$ } from '@builder.io/qwik'
import { Footer } from 'flowbite-qwik'
export default component$(() => {
return (
<Footer container>
<Footer.Copyright href="#" by="Flowbite™" />
<Footer.LinkGroup>
<Footer.Link href="#">About</Footer.Link>
<Footer.Link href="#">Privacy Policy</Footer.Link>
<Footer.Link href="#">Licensing</Footer.Link>
<Footer.Link href="#">Contact</Footer.Link>
</Footer.LinkGroup>
</Footer>
)
})
Default with Logo
Use this component to show your brand’s logo, a few website links and the copyright notice on a second row.
tsx
import { component$ } from '@builder.io/qwik'
import { Footer } from 'flowbite-qwik'
export default component$(() => {
return (
<Footer container>
<div class="w-full text-center">
<div class="w-full justify-between sm:flex sm:items-center sm:justify-between">
<Footer.Brand href="https://flowbite.com" src="https://flowbite.com/docs/images/logo.svg" alt="Flowbite Logo" name="Flowbite" />
<Footer.LinkGroup>
<Footer.Link href="#">About</Footer.Link>
<Footer.Link href="#">Privacy Policy</Footer.Link>
<Footer.Link href="#">Licensing</Footer.Link>
<Footer.Link href="#">Contact</Footer.Link>
</Footer.LinkGroup>
</div>
<Footer.Divider />
<Footer.Copyright href="#" by="Flowbite™" />
</div>
</Footer>
)
})
Social media icons
This footer component can be used to show your brand’s logo, multiple rows of website links, a copyright notice and social media profile icons including Twitter, Facebook, Instagram, and more.
tsx
import { component$ } from '@builder.io/qwik'
import { Footer } from 'flowbite-qwik'
import { IconFacebookSolid, IconGithubSolid, IconDribbbleSolid, IconLinkedinSolid } from 'flowbite-qwik-icons'
export default component$(() => {
return (
<Footer container>
<div class="w-full">
<div class="grid w-full justify-between sm:flex sm:justify-between md:flex md:grid-cols-1">
<div>
<Footer.Brand href="https://flowbite.com" src="https://flowbite.com/docs/images/logo.svg" alt="Flowbite Logo" name="Flowbite" />
</div>
<div class="grid grid-cols-2 gap-8 sm:mt-4 sm:grid-cols-3 sm:gap-6">
<div>
<Footer.Title title="about" />
<Footer.LinkGroup col>
<Footer.Link href="#">Flowbite</Footer.Link>
<Footer.Link href="#">Tailwind CSS</Footer.Link>
</Footer.LinkGroup>
</div>
<div>
<Footer.Title title="Follow us" />
<Footer.LinkGroup col>
<Footer.Link href="#">Github</Footer.Link>
<Footer.Link href="#">Discord</Footer.Link>
</Footer.LinkGroup>
</div>
<div>
<Footer.Title title="Legal" />
<Footer.LinkGroup col>
<Footer.Link href="#">Privacy Policy</Footer.Link>
<Footer.Link href="#">Terms & Conditions</Footer.Link>
</Footer.LinkGroup>
</div>
</div>
</div>
<Footer.Divider />
<div class="w-full sm:flex sm:items-center sm:justify-between">
<Footer.Copyright href="#" by="Flowbite™" />
<div class="mt-4 flex space-x-6 sm:mt-0 sm:justify-center">
<Footer.Icon href="#" icon={IconFacebookSolid} />
<Footer.Icon href="#" icon={IconGithubSolid} />
<Footer.Icon href="#" icon={IconDribbbleSolid} />
<Footer.Icon href="#" icon={IconLinkedinSolid} />
</div>
</div>
</div>
</Footer>
)
})
Sitemap links
If you have a website with many pages you can use this footer component to show a sitemap spanning the entire width of a row followed below by a copyright notice and social media icons.
tsx
import { component$ } from '@builder.io/qwik'
import { Footer } from 'flowbite-qwik'
import { IconFacebookSolid, IconGithubSolid, IconDribbbleSolid, IconLinkedinSolid } from 'flowbite-qwik-icons'
export default component$(() => {
return (
<Footer bgDark>
<div class="w-full">
<div class="grid w-full grid-cols-2 gap-8 px-6 py-8 md:grid-cols-4">
<div>
<Footer.Title title="Company" />
<Footer.LinkGroup col>
<Footer.Link href="#">About</Footer.Link>
<Footer.Link href="#">Careers</Footer.Link>
<Footer.Link href="#">Brand Center</Footer.Link>
<Footer.Link href="#">Blog</Footer.Link>
</Footer.LinkGroup>
</div>
<div>
<Footer.Title title="help center" />
<Footer.LinkGroup col>
<Footer.Link href="#">Discord Server</Footer.Link>
<Footer.Link href="#">Twitter</Footer.Link>
<Footer.Link href="#">Facebook</Footer.Link>
<Footer.Link href="#">Contact Us</Footer.Link>
</Footer.LinkGroup>
</div>
<div>
<Footer.Title title="legal" />
<Footer.LinkGroup col>
<Footer.Link href="#">Privacy Policy</Footer.Link>
<Footer.Link href="#">Licensing</Footer.Link>
<Footer.Link href="#">Terms & Conditions</Footer.Link>
</Footer.LinkGroup>
</div>
<div>
<Footer.Title title="download" />
<Footer.LinkGroup col>
<Footer.Link href="#">iOS</Footer.Link>
<Footer.Link href="#">Android</Footer.Link>
<Footer.Link href="#">Windows</Footer.Link>
<Footer.Link href="#">MacOS</Footer.Link>
</Footer.LinkGroup>
</div>
</div>
<div class="w-full bg-gray-700 px-4 py-6 sm:flex sm:items-center sm:justify-between">
<Footer.Copyright href="#" by="Flowbite™" />
<div class="mt-4 flex space-x-6 sm:mt-0 sm:justify-center">
<Footer.Icon href="#" icon={IconFacebookSolid} />
<Footer.Icon href="#" icon={IconGithubSolid} />
<Footer.Icon href="#" icon={IconDribbbleSolid} />
<Footer.Icon href="#" icon={IconLinkedinSolid} />
</div>
</div>
</div>
</Footer>
)
})