nuxt-x-marketing
LayoutFooter
Dark full-featured footer with brand column, social links, multi-column link grid, optional newsletter form, and legal bar.
LayoutFooter
A full-featured dark footer. The left brand column shows the logo, description, and social links. Up to four additional link columns render in a responsive grid. An optional inline newsletter form can be toggled on. A bottom bar renders copyright text and legal links.
Components
<XMarkLayoutFooter />
A full-featured dark footer. The left brand column shows the logo, description, and social links. Up to four additional link columns render in a responsive grid. An optional inline newsletter form can be toggled on. A bottom bar renders copyright text and legal links.
<XMarkLayoutFooter
:logo="{ src: '/logo-white.svg', alt: 'Acme' }"
description="The platform that helps teams ship faster."
:social="[
{ name: 'Twitter', icon: 'i-lucide-twitter', href: 'https://twitter.com/acme' },
{ name: 'GitHub', icon: 'i-lucide-github', href: 'https://github.com/acme' },
]"
:columns="[
{ title: 'Product', links: [{ label: 'Features', to: '/features' }, { label: 'Pricing', to: '/pricing' }] },
{ title: 'Company', links: [{ label: 'About', to: '/about' }, { label: 'Blog', to: '/blog' }] },
]"
:has-newsletter="true"
newsletter-title="Stay in the loop"
newsletter-description="Get product updates and news."
:legal-links="[
{ label: 'Privacy Policy', to: '/privacy' },
{ label: 'Terms', to: '/terms' },
]"
copyright="© 2025 Acme Inc."
@newsletter-submit="onNewsletterSubmit"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
logo | Object | null | Logo object { src, alt? } |
description | String | '' | Brand tagline below the logo |
social | Array | [] | Social links [{ name, icon, href }] |
columns | Array | [] | Link columns [{ title, links: [{ label, to }] }] |
legalLinks | Array | [] | Bottom-bar legal links [{ label, to }] |
copyright | String | Current year string | Copyright notice |
hasNewsletter | Boolean | false | Show inline newsletter form |
newsletterTitle | String | 'Subscribe to our newsletter' | Newsletter heading |
newsletterDescription | String | 'Get the latest updates and news.' | Newsletter subtext |
Emits
| Event | Payload | Description |
|---|---|---|
newsletter-submit | email: string | Emitted when newsletter form is submitted |
AI Context
category: Layout
package: "@xenterprises/nuxt-x-marketing"
components:
- XMarkLayoutFooter
use-when: >
Adding a full-featured dark footer to a marketing site with logo, social
links, link columns, and optional newsletter form. Use at the bottom of
every page layout.
typical-page-section: Bottom of every page.