Footers
Footer with trust badges
Link columns plus a row of compliance badges in the copyright slot, for products sold to procurement.
Live demo
Full width · the frame has its own viewport, so the breakpoints are real
What it uses
Imports
import { Badge, Footer, Stack, Text } from '@the_viveksingh/vivek-ui'The block
This is the file that renders the demo above, read at build time. Copy it into your project, change the words, and it runs — the only thing it needs is @the_viveksingh/vivek-ui and its stylesheet.
import { Badge, Footer, Stack, Text } from '@the_viveksingh/vivek-ui'
const COLUMNS = [
{
title: 'Product',
links: [
{ label: 'Components', href: '#' },
{ label: 'Charts', href: '#' },
{ label: 'Templates', href: '#' },
{ label: 'Changelog', href: '#' },
],
},
{
title: 'Docs',
links: [
{ label: 'Installation', href: '#' },
{ label: 'Theming', href: '#' },
{ label: 'Accessibility', href: '#' },
{ label: 'TypeScript', href: '#' },
],
},
{
title: 'Company',
links: [
{ label: 'About', href: '#' },
{ label: 'Blog', href: '#' },
{ label: 'Careers', href: '#' },
{ label: 'Contact', href: '#' },
],
},
]
export default function FooterWithBadges() {
return (
<Footer
brand="Palisade"
columns={COLUMNS}
copyright={
<Stack direction="horizontal" gap={2} wrap align="center">
<Text as="span" size="sm" tone="muted">
© 2026 Palisade Security.
</Text>
<Badge size="sm" variant="outline">
SOC 2 Type II
</Badge>
<Badge size="sm" variant="outline">
ISO 27001
</Badge>
<Badge size="sm" variant="outline">
GDPR
</Badge>
</Stack>
}
/>
)
}