Footer
Page footer with branding, link columns, and legal text. Provides a structured layout with slots for a logo, navigational link groups, social icons, and copyright information.
<arc-footer>Overview
Footer is the bottom-of-page landmark that anchors every page with branding, navigation, and legal information. It uses four slots (logo, default for columns, social, and legal), so you can compose any footer from a single-line copyright notice to a multi-column site map.
The default slot renders its children in a responsive CSS Grid that automatically wraps link columns from a single stack on mobile to as many columns as fit at 160 px minimum width. So you drop in three or four <div> elements with heading-and-link-list markup and the grid handles the rest. No manual breakpoints are needed.
Footer ships with two props that cover the most common layout tweaks. The border prop (on by default) adds a subtle top rule to visually separate the footer from the content above. density="compact" tightens all internal spacing for dashboards and admin panels where vertical real estate is at a premium. Together border, density, and the four slots cover the vast majority of footer patterns without custom CSS.
Guidelines
When to use
- Place the footer as the last child of your page layout or AppShell
- Use the logo slot for your brand mark or wordmark. Keep it compact
- Organize link columns by category (Product, Company, Resources) for scannability
- Include essential legal text (copyright year, company name) in the legal slot
- Use density="compact" inside admin shells and dashboards to save vertical space
- Keep link column headings short and consistent in casing
When not to use
- Do not nest interactive widgets (forms, modals) inside the footer. Keep it navigational
- Do not use more than four or five link columns; too many columns overwhelm on smaller screens
- Do not remove the border prop on pages with light backgrounds. The separator aids readability
- Do not duplicate primary navigation in the footer verbatim; footer nav should be a curated subset
- Do not place critical call-to-action buttons in the footer. They belong above the fold
- Do not omit a copyright notice; legal requires it for most commercial products
Features
- Slot-based composition with logo, default (columns), social, and legal regions
- Responsive CSS Grid columns that auto-wrap without manual breakpoints
- Compact mode for dashboards and space-constrained layouts
- Optional top border to separate footer from page content
- Dark background with muted text for clear visual hierarchy
- Legal section with its own subtle top divider for copyright and policy links
- CSS custom property theming via design tokens
- Shadow DOM encapsulation with ::part() hooks for targeted styling
Preview
Usage
<script type="module" src="@arclux/arc-ui"></script>
<arc-footer border>
<div slot="logo"><strong>ARC UI</strong></div>
<div>
<p><strong>Product</strong></p>
<ul>
<li><a href="/docs/components">Components</a></li>
<li><a href="/docs/tokens">Tokens</a></li>
<li><a href="/docs/changelog">Changelog</a></li>
</ul>
</div>
<div>
<p><strong>Company</strong></p>
<ul>
<li><a href="/about">About</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/careers">Careers</a></li>
</ul>
</div>
<div>
<p><strong>Resources</strong></p>
<ul>
<li><a href="/docs">Documentation</a></li>
<li><a href="/github">GitHub</a></li>
<li><a href="/support">Support</a></li>
</ul>
</div>
<div slot="legal">© 2026 ARC UI. All rights reserved.</div>
</arc-footer>import { Footer } from '@arclux/arc-ui-react';
export function SiteFooter() {
return (
<Footer border>
<div slot="logo"><strong>ARC UI</strong></div>
<div>
<p><strong>Product</strong></p>
<ul>
<li><a href="/docs/components">Components</a></li>
<li><a href="/docs/tokens">Tokens</a></li>
<li><a href="/docs/changelog">Changelog</a></li>
</ul>
</div>
<div>
<p><strong>Company</strong></p>
<ul>
<li><a href="/about">About</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/careers">Careers</a></li>
</ul>
</div>
<div>
<p><strong>Resources</strong></p>
<ul>
<li><a href="/docs">Documentation</a></li>
<li><a href="/github">GitHub</a></li>
<li><a href="/support">Support</a></li>
</ul>
</div>
<div slot="legal">© 2026 ARC UI. All rights reserved.</div>
</Footer>
);
}<script setup>
import { Footer } from '@arclux/arc-ui-vue';
</script>
<template>
<Footer border>
<div slot="logo"><strong>ARC UI</strong></div>
<div>
<p><strong>Product</strong></p>
<ul>
<li><a href="/docs/components">Components</a></li>
<li><a href="/docs/tokens">Tokens</a></li>
<li><a href="/docs/changelog">Changelog</a></li>
</ul>
</div>
<div>
<p><strong>Company</strong></p>
<ul>
<li><a href="/about">About</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/careers">Careers</a></li>
</ul>
</div>
<div>
<p><strong>Resources</strong></p>
<ul>
<li><a href="/docs">Documentation</a></li>
<li><a href="/github">GitHub</a></li>
<li><a href="/support">Support</a></li>
</ul>
</div>
<div slot="legal">© 2026 ARC UI. All rights reserved.</div>
</Footer>
</template><script>
import { Footer } from '@arclux/arc-ui-svelte';
</script>
<Footer border>
<div slot="logo"><strong>ARC UI</strong></div>
<div>
<p><strong>Product</strong></p>
<ul>
<li><a href="/docs/components">Components</a></li>
<li><a href="/docs/tokens">Tokens</a></li>
<li><a href="/docs/changelog">Changelog</a></li>
</ul>
</div>
<div>
<p><strong>Company</strong></p>
<ul>
<li><a href="/about">About</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/careers">Careers</a></li>
</ul>
</div>
<div>
<p><strong>Resources</strong></p>
<ul>
<li><a href="/docs">Documentation</a></li>
<li><a href="/github">GitHub</a></li>
<li><a href="/support">Support</a></li>
</ul>
</div>
<div slot="legal">© 2026 ARC UI. All rights reserved.</div>
</Footer>import { Component } from '@angular/core';
import { Footer } from '@arclux/arc-ui-angular';
@Component({
imports: [Footer],
template: `
<arc-footer border>
<div slot="logo"><strong>ARC UI</strong></div>
<div>
<p><strong>Product</strong></p>
<ul>
<li><a href="/docs/components">Components</a></li>
<li><a href="/docs/tokens">Tokens</a></li>
<li><a href="/docs/changelog">Changelog</a></li>
</ul>
</div>
<div>
<p><strong>Company</strong></p>
<ul>
<li><a href="/about">About</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/careers">Careers</a></li>
</ul>
</div>
<div>
<p><strong>Resources</strong></p>
<ul>
<li><a href="/docs">Documentation</a></li>
<li><a href="/github">GitHub</a></li>
<li><a href="/support">Support</a></li>
</ul>
</div>
<div slot="legal">© 2026 ARC UI. All rights reserved.</div>
</arc-footer>
`,
})
export class SiteFooterComponent {}import { Footer } from '@arclux/arc-ui-solid';
export function SiteFooter() {
return (
<Footer border>
<div slot="logo"><strong>ARC UI</strong></div>
<div>
<p><strong>Product</strong></p>
<ul>
<li><a href="/docs/components">Components</a></li>
<li><a href="/docs/tokens">Tokens</a></li>
<li><a href="/docs/changelog">Changelog</a></li>
</ul>
</div>
<div>
<p><strong>Company</strong></p>
<ul>
<li><a href="/about">About</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/careers">Careers</a></li>
</ul>
</div>
<div>
<p><strong>Resources</strong></p>
<ul>
<li><a href="/docs">Documentation</a></li>
<li><a href="/github">GitHub</a></li>
<li><a href="/support">Support</a></li>
</ul>
</div>
<div slot="legal">© 2026 ARC UI. All rights reserved.</div>
</Footer>
);
}import { Footer } from '@arclux/arc-ui-preact';
export function SiteFooter() {
return (
<Footer border>
<div slot="logo"><strong>ARC UI</strong></div>
<div>
<p><strong>Product</strong></p>
<ul>
<li><a href="/docs/components">Components</a></li>
<li><a href="/docs/tokens">Tokens</a></li>
<li><a href="/docs/changelog">Changelog</a></li>
</ul>
</div>
<div>
<p><strong>Company</strong></p>
<ul>
<li><a href="/about">About</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/careers">Careers</a></li>
</ul>
</div>
<div>
<p><strong>Resources</strong></p>
<ul>
<li><a href="/docs">Documentation</a></li>
<li><a href="/github">GitHub</a></li>
<li><a href="/support">Support</a></li>
</ul>
</div>
<div slot="legal">© 2026 ARC UI. All rights reserved.</div>
</Footer>
);
}<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-footer — requires footer.css + base.css (or arc-ui.css) -->
<div class="arc-footer">
<footer class="footer">
<div class="footer__brand">
<strong>ARC UI</strong>
</div>
<div class="footer__columns">
<div>
<p><strong>Product</strong></p>
<ul>
<li><a href="/docs/components">Components</a></li>
<li><a href="/docs/tokens">Tokens</a></li>
<li><a href="/docs/changelog">Changelog</a></li>
</ul>
</div>
<div>
<p><strong>Company</strong></p>
<ul>
<li><a href="/about">About</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/careers">Careers</a></li>
</ul>
</div>
<div>
<p><strong>Resources</strong></p>
<ul>
<li><a href="/docs">Documentation</a></li>
<li><a href="/github">GitHub</a></li>
<li><a href="/support">Support</a></li>
</ul>
</div>
</div>
<div class="footer__social">
</div>
<div class="footer__legal">
© 2026 ARC UI. All rights reserved.
</div>
</footer>
</div><!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-footer — self-contained, no external CSS needed -->
<div class="arc-footer" style="display: block; background: rgb(3, 3, 7); color: rgb(138, 138, 150); font-family: 'Host Grotesk', system-ui, sans-serif; font-size: clamp(15px, 1.2vw, 16px)">
<footer style="padding: 64px 40px 40px; border-top: 1px solid rgb(24, 24, 30)">
<div style="margin-bottom: 40px">
<strong style="color: rgb(232, 232, 236); font-size: 18px">ARC UI</strong>
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 40px; margin-bottom: 40px">
<div>
<p style="margin: 0 0 12px; font-weight: 600; color: rgb(232, 232, 236); font-size: 13px; text-transform: uppercase; letter-spacing: 1px">Product</p>
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px">
<li><a href="/docs/components" style="color: rgb(138, 138, 150); text-decoration: none">Components</a></li>
<li><a href="/docs/tokens" style="color: rgb(138, 138, 150); text-decoration: none">Tokens</a></li>
<li><a href="/docs/changelog" style="color: rgb(138, 138, 150); text-decoration: none">Changelog</a></li>
</ul>
</div>
<div>
<p style="margin: 0 0 12px; font-weight: 600; color: rgb(232, 232, 236); font-size: 13px; text-transform: uppercase; letter-spacing: 1px">Company</p>
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px">
<li><a href="/about" style="color: rgb(138, 138, 150); text-decoration: none">About</a></li>
<li><a href="/blog" style="color: rgb(138, 138, 150); text-decoration: none">Blog</a></li>
<li><a href="/careers" style="color: rgb(138, 138, 150); text-decoration: none">Careers</a></li>
</ul>
</div>
<div>
<p style="margin: 0 0 12px; font-weight: 600; color: rgb(232, 232, 236); font-size: 13px; text-transform: uppercase; letter-spacing: 1px">Resources</p>
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px">
<li><a href="/docs" style="color: rgb(138, 138, 150); text-decoration: none">Documentation</a></li>
<li><a href="/github" style="color: rgb(138, 138, 150); text-decoration: none">GitHub</a></li>
<li><a href="/support" style="color: rgb(138, 138, 150); text-decoration: none">Support</a></li>
</ul>
</div>
</div>
<div style="display: flex; align-items: center; gap: 16px; margin-bottom: 24px">
</div>
<div style="padding-top: 16px; border-top: 1px solid rgb(24, 24, 30); color: rgb(124, 124, 137); font-size: 12px">
© 2026 ARC UI. All rights reserved.
</div>
</footer>
</div>API
containedstringnull- Sets a max-width containment on the footer content. Accepts any CSS length value or named size token.
density'default' | 'compact''default'- Visual density. 'compact' reduces internal padding and spacing throughout the footer, for dashboard layouts or admin panels where vertical space is limited.
borderbooleantrue- Renders a subtle top border on the footer to visually separate it from the page content above. Enabled by default; disable it only when the footer sits against a dark background where the border would be redundant.
align'left' | 'center''left'- Controls footer content alignment.
See Also
- Top BarFixed header bar that anchors every page with a brand slot on the left, an optional center navigation area, and a right-aligned actions region for user controls, search, and settings.
- SidebarCollapsible navigation sidebar with grouped sections, heading labels, and active link highlighting. Suited to documentation sites, admin panels, and any layout that needs persistent vertical navigation.
- App ShellFull-page layout scaffold that composes a TopBar, Sidebar, and scrollable content area into an application frame. Handles responsive collapse, sidebar toggling, and an optional table-of-contents rail.
- LinkStyled anchor with nav, muted, and default variants.