Getting StartedComponentsDesign TokensThemingTheme SynthesizerFrameworksAccessibilityUtilitiesServer RenderingBrowser SupportContributingChangelog App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip
ARC UI ARC Radiant Components
v3.2 Docs Components Tokens Synthesizer
Getting StartedFrameworksServer Rendering Design TokensThemingTheme SynthesizerTypographyUtilities All ComponentsAccessibilityBrowser SupportChangelogContributingStats App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip

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.

Components Footer
navigation static
<arc-footer>

Overview

Footer is the bottom-of-page landmark that anchors every page with branding, navigation, and legal information. It uses a slot-based architecture — logo, default (columns), social, and legal — so you can compose any footer layout from simple single-line copyright notices to expansive multi-column site maps. 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. This means you drop in three or four `<div>` elements with heading-and-link-list markup and the grid handles the rest — no manual breakpoints 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

ARC UI

Company

© 2026 ARC UI. All rights reserved. · Privacy · Terms

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">&copy; 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">&copy; 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">&copy; 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">&copy; 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">&copy; 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">&copy; 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">&copy; 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">
    &copy; 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">
    &copy; 2026 ARC UI. All rights reserved.
   </div>
   </footer>
</div>

API

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.
border boolean true
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.
contained string null
Sets a max-width containment on the footer content. Accepts any CSS length value or named size token.
align 'left' | 'center' 'left'
Controls footer content alignment.

See Also
ARC UI

Components that glow. One Lit source, seven native targets.

Docs

Project

Arclight

© 2026 Arclight Digital, LLC. All rights reserved.

Documentation generated with AI assistance and reviewed by humans. Found an issue? Open a GitHub issue.

Privacy Policy