Footer A
Footer A variation 1
More than 4 customizable footer blocks are awaiting for you to build your own layouts, pages, and content.
Footer A variation 1
Footer A variation 2
Footer A variation 3
Footer A variation 4
Footer A available props
<template>
<FooterA color="dark" :social-links="socialLinks">
<template #left-links>
<RouterLink :to="{ name: 'index' }" class="level-item footer-link">Product</RouterLink>
<RouterLink :to="{ name: 'index' }" class="level-item footer-link">Features</RouterLink>
<RouterLink :to="{ name: 'index' }" class="level-item footer-link">Docs</RouterLink>
</template>
<template #right-links>
<RouterLink :to="{ name: 'index' }" class="level-item footer-link">Company</RouterLink>
<RouterLink :to="{ name: 'index' }" class="level-item footer-link">About</RouterLink>
<RouterLink :to="{ name: 'index' }" class="level-item footer-link">Support</RouterLink>
</template>
</FooterA>
</template>
Footer B variation 1
Footer B variation 2
Footer B variation 3
Footer B variation 4
Footer B available props
<template>
<FooterB color="dark">
<template #links>
<li class="inline-block px-2">
<RouterLink :to="{ name: 'index' }" class="footer-link">Demos</RouterLink>
</li>
<li class="inline-block px-2">
<RouterLink :to="{ name: 'index' }" class="footer-link">Components</RouterLink>
</li>
<li class="inline-block px-2">
<RouterLink :to="{ name: 'index' }" class="footer-link">Documentation</RouterLink>
</li>
<li class="inline-block px-2">
<RouterLink :to="{ name: 'index' }" class="footer-link">Support</RouterLink>
</li>
</template>
</FooterB>
</template>
Footer C variation 1
Footer C variation 2
Footer C variation 3
Footer C variation 4
Footer C available props
<template>
<FooterC text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Negare non possum. Apparet statim, quae sint officia, quae actiones."
color="dark"
:social-links="socialLinks"
image="/@src/assets/illustrations/footer/footer-cityscape.png"
>
<template #column-1>
<Title tag="h3" :size="6" weight="thin" inverted>
<span>Discover</span>
</Title>
<ul>
<li>
<RouterLink :to="{ name: 'index' }" class="level-item footer-link">Get Started</RouterLink>
</li>
<li>
<RouterLink :to="{ name: 'index' }" class="level-item footer-link">Product</RouterLink>
</li>
<li>
<RouterLink :to="{ name: 'index' }" class="level-item footer-link">Features</RouterLink>
</li>
<li>
<RouterLink :to="{ name: 'index' }" class="level-item footer-link">Sign Up</RouterLink>
</li>
<li>
<RouterLink :to="{ name: 'index' }" class="level-item footer-link">Sign In</RouterLink>
</li>
</ul>
</template>
<template #column-2>
<Title tag="h3" :size="6" weight="thin" inverted>
<span>Company</span>
</Title>
<ul>
<li>
<RouterLink :to="{ name: 'index' }" class="level-item footer-link">Company</RouterLink>
</li>
<li>
<RouterLink :to="{ name: 'index' }" class="level-item footer-link">About</RouterLink>
</li>
<li>
<RouterLink :to="{ name: 'index' }" class="level-item footer-link">Training</RouterLink>
</li>
<li>
<RouterLink :to="{ name: 'index' }" class="level-item footer-link">FAQs</RouterLink>
</li>
<li>
<RouterLink :to="{ name: 'index' }" class="level-item footer-link">Contact</RouterLink>
</li>
</ul>
</template>
<template #column-3>
<Title tag="h3" :size="6" weight="thin" inverted>
<span>Support</span>
</Title>
<ul>
<li>
<RouterLink :to="{ name: 'index' }" class="level-item footer-link">Help Center</RouterLink>
</li>
<li>
<RouterLink :to="{ name: 'index' }" class="level-item footer-link">Guides</RouterLink>
</li>
<li>
<RouterLink :to="{ name: 'index' }" class="level-item footer-link">API Docs</RouterLink>
</li>
<li>
<RouterLink :to="{ name: 'index' }" class="level-item footer-link">Terms</RouterLink>
</li>
<li>
<RouterLink :to="{ name: 'index' }" class="level-item footer-link">Privacy</RouterLink>
</li>
</ul>
</template>
</FooterC>
</template>
Block D variation 1
Block D variation 2
Block D variation 3
Block D variation 4
Footer D available props
<template>
<FooterD text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Negare non possum. Apparet statim, quae sint officia, quae actiones."
color="light"
:social-links="socialLinks"
bubbles
>
<template #column-1>
<Title tag="h3" :size="6" weight="thin" inverted>
<span>Discover</span>
</Title>
<ul>
<li>
<RouterLink :to="{ name: 'index' }" class="level-item footer-link">Get Started</RouterLink>
</li>
<li>
<RouterLink :to="{ name: 'index' }" class="level-item footer-link">Product</RouterLink>
</li>
<li>
<RouterLink :to="{ name: 'index' }" class="level-item footer-link">Features</RouterLink>
</li>
<li>
<RouterLink :to="{ name: 'index' }" class="level-item footer-link">Sign Up</RouterLink>
</li>
<li>
<RouterLink :to="{ name: 'index' }" class="level-item footer-link">Sign In</RouterLink>
</li>
</ul>
</template>
<template #column-2>
<Title tag="h3" :size="6" weight="thin" inverted>
<span>Company</span>
</Title>
<ul>
<li>
<RouterLink :to="{ name: 'index' }" class="level-item footer-link">Company</RouterLink>
</li>
<li>
<RouterLink :to="{ name: 'index' }" class="level-item footer-link">About</RouterLink>
</li>
<li>
<RouterLink :to="{ name: 'index' }" class="level-item footer-link">Training</RouterLink>
</li>
<li>
<RouterLink :to="{ name: 'index' }" class="level-item footer-link">FAQs</RouterLink>
</li>
<li>
<RouterLink :to="{ name: 'index' }" class="level-item footer-link">Contact</RouterLink>
</li>
</ul>
</template>
<template #column-3>
<Title tag="h3" :size="6" weight="thin" inverted>
<span>Support</span>
</Title>
<ul>
<li>
<RouterLink :to="{ name: 'index' }" class="level-item footer-link">Help Center</RouterLink>
</li>
<li>
<RouterLink :to="{ name: 'index' }" class="level-item footer-link">Guides</RouterLink>
</li>
<li>
<RouterLink :to="{ name: 'index' }" class="level-item footer-link">API Docs</RouterLink>
</li>
<li>
<RouterLink :to="{ name: 'index' }" class="level-item footer-link">Terms</RouterLink>
</li>
<li>
<RouterLink :to="{ name: 'index' }" class="level-item footer-link">Privacy</RouterLink>
</li>
</ul>
</template>
</FooterD>
</template>