Socialmedia Footer
Examples
<script>
import {SocialMediaFooter} from 'flowbite-svelte'
import {
Facebook,
Github,
Twitter,
Instagram,
} from "svelte-simples";
let site = {
href: "/",
name: "Company",
img: "/images/flowbite-svelte-logo-30.png",
};
let links = [
{
parent: "RESOURCES",
children: [
{ name: "Flowbite-Svelte", href: "/" },
{
name: "Flowbite",
href: "/",
},
],
},
{
parent: "FOLLOW US",
children: [
{ name: "Github", href: "/" },
{
name: "Flowbite",
href: "/",
},
],
},
{
parent: "LEGAL",
children: [
{ name: "Privacy Policy", href: "/" },
{
name: "Terms & Conditions",
href: "/",
},
],
},
];
let socialMedia = [
{
href: "/",
icon: Facebook,
},
{
href: "/",
icon: Github,
},
{
href: "/",
icon: Twitter,
},
{
href: "/",
icon: Instagram,
},
];
</script>
<SocialMediaFooter {socialMedia} {links} {site}/>
Props
The component has the following props, type, and default values. See types page for type information.
Name | Type | Default |
---|---|---|
site | SiteType | - |
links | SocialMediaLinkType[] | - |
socialMedia | SocialMediaType[] | - |
footerClass | string | 'p-4 bg-white sm:p-6 dark:bg-gray-800' |
divClass | string | 'md:flex md:justify-between' |
divClass2 | string | 'mb-6 md:mb-0' |
siteLinkClass | string | 'flex items-center' |
siteNameSpanClass | string | 'self-center text-2xl font-semibold whitespace-nowrap dark:text-white' |
imgClass | string | 'mr-3 h-8' |
linksDivClass | string | 'grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3' |
parentClass | string | 'mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white' |
ulClass | string | 'text-gray-600 dark:text-gray-400' |
liClass | string | 'mb-4' |
linkClass | string | 'hover:underline' |
hrClass | string | 'my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8' |
copyrightDivClass | string | 'sm:flex sm:items-center sm:justify-between' |
copyrightClass | string | 'text-sm text-gray-500 sm:text-center dark:text-gray-400' |
socialMediaDivClass | string | 'flex mt-4 space-x-6 sm:justify-center sm:mt-0' |
socialMediaLinkClass | string | 'text-gray-500 hover:text-gray-900 dark:hover:text-white' |
iconClass | string | 'h-5 w-5 mr-2' |
copyrightYear | string | '© 2022' |
allRightsReserved | string | 'All Rights Reserved.' |