Getting started
UI
W.Feature
Widget
.
---
import { WidgetFooter } from '@yatoday/astro-ui/astro';
export const socialLinks = [
{ariaLabel: 'Whatsapp', icon: 'tabler:brand-whatsapp', href: '#'},
{ariaLabel: 'Instagram', icon: 'tabler:brand-instagram', href: '#'},
{ariaLabel: 'Facebook', icon: 'tabler:brand-facebook', href: '#'},
{ariaLabel: 'YouTube', icon: 'tabler:brand-youtube', href: '#'},
];
export const footerData = {
links: [
{
title: 'Product',
links: [
{ text: 'Features', href: '#' },
{ text: 'Security', href: '#' },
{ text: 'Team', href: '#' },
{ text: 'Enterprise', href: '#' },
{ text: 'Customer stories', href: '#' },
{ text: 'Pricing', href: '#' },
],
},
{
title: 'Platform',
links: [
{ text: 'Developer API', href: '#' },
{ text: 'Partners', href: '#' },
{ text: 'Atom', href: '#' },
{ text: 'Electron', href: '#' },
{ text: 'Desktop', href: '#' },
{ text: 'Shop', href: '#' }
],
},
{
title: 'Support',
links: [
{ text: 'Docs', href: '#' },
{ text: 'Community Forum', href: '#' },
{ text: 'Services', href: '#' },
{ text: 'Skills', href: '#' },
{ text: 'Status', href: '#' },
{ text: 'Resources', href: '#' }
],
},
{
title: 'Company',
links: [
{ text: 'About', href: '#' },
{ text: 'Blog', href: '#' },
{ text: 'Careers', href: '#' },
{ text: 'Press', href: '#' },
{ text: 'Inclusion', href: '#' },
{ text: 'Social Impact', href: '#' }
],
},
],
secondaryLinks: [
{ text: 'Terms', href: '#' },
{ text: 'Privacy Policy', href: '#' },
],
socialLinks: socialLinks,
note: `Made in <a class="text-primary hover:underline" target="_blank" href="https://yatoday.es">Yatoday</a>`,
}
---
<WidgetFooter {...footerData}>
<Fragment slot="bg">
<div class="bg-background absolute inset-0 pointer-events-none" aria-hidden="true"></div>
</Fragment>
</WidgetFooter>
Prop | Type | Default | Description |
---|---|---|---|
socialLinks | Link [] | [] | - |
secondaryLinks | Link [] | [] | - |
links | Array | [] | Array of Link items |
note | string | - | - |
id | string | - | Specify a unique id for the section |
isDark | boolean | false | Adds the dark CSS class to the WidgetWrapper |
bg | string | - | Set background element |
as | string | footer | HTML tag name for the wrapper |
classes.container | string | - | CSS classes for the WidgetWrapper container |